I am busy with a very simple barcode scanner app and getting a strange error after the app gets deployed to a genymotion emulator... It seems like it's looking for the core theme in the wrong place? Any idea why this is happening and how I can try fix it?
my error:
JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR
JS: ns-renderer: File /data/data/org.nativescript.barcodescanner/files/app/nativescript-theme-core/css/core.dark.css does not exist. Resolved from: nativescript-theme-core/css/core.dark.css.
JS:
JS: Error: File /data/data/org.nativescript.barcodescanner/files/app/nativescript-theme-core/css/core.dark.css does not exist. Resolved from: nativescript-theme-core/css/core.dark.css.
JS: at FileSystemResourceLoader.get (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js:22:19)
JS: at DirectiveNormalizer._fetch (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/#angular/compiler/bundles/compiler.umd.js:13661:45)
JS: at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/#angular/compiler/bundles/compiler.umd.js:13761:55
JS: at Array.map (native)
JS: at DirectiveNormalizer._loadMissingExternalStylesheets (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/#angular/compiler/bundles/compiler.umd.js:13761:16)
JS: at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/#angular/compiler/bundles/compiler.umd.js:13764:28
JS: at ZoneDelegate.invoke (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:28)
JS: at Zone.run (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:83:43)
JS: at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:57
JS: at ZoneDelegate.invokeTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
my app.css:
#import 'nativescript-theme-core/css/core.dark.css';
and in my app.component.css:
styleUrls: ['./app.css']
In your app.css you should have
#import 'nativescript-theme-core/css/core.dark.css';
And in your app.component.ts remove the explicit call to app.css.
It is not needed as the styles in app.css will be visible globally in your application by default. See this comment for details.
Related
The main problem is under the after tag. You can ignore the other parts above.
origin
I want to insert a chart (linechart) into my vuepress page.
first
I chose echart, use <script src="echarts.js"></script> to include it in my .md file, But failed.
[vite] Internal server error: Tags with side effect (<script> and <style>) are ignored in client component templates.
It seems that I can't use <script> in it? But I looked up Markdown and Vue SFC , It just says that you should avoid using more than one <script> in VuePress markdown. Does it mean I can use just a single <script> in .md file?
after
I tried to use echart vue component. Followed the tutorial, I just use register-components plugin to register it. These are my config:
.vuepress/config.ts
const { registerComponentsPlugin } = require('#vuepress/plugin-register-components')
const { path } = require('#vuepress/utils')
export default defineUserConfig({
...
plugins: [
...
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
]
})
.vuepress/components/TestMe.vue
<template>
<h1>Test my component</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
Isn't it a simplest component for test?
Then I add <TestMe /> to my .md file. But it failed again. The h1 title couldn't show and my web gave out a warning:
to see the warning information
I have no idea about that.
I am trying to import "../../node_modules/react-quill/dist/quill.snow.css"; in my next.js project but I get following error
[ error ] ./node_modules/react-quill/dist/quill.snow.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: components\crud\BlogCreate.js
I managed to make it work with next.config.js. It worked with this configuration
// next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
});
But now I am getting a warning,
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
It seems my solution is not the best way to solve this problem. How could I get rid of this warning?
You may remove the #zeit/next-css plugin because the Next.js 9.3 is very simple. Then Next.js 9.3 is Built-in Sass Support for Global Stylesheets after removing the #zeit/next-css you may install
npm install sass
Then, import the Sass file within pages/_app.js.
Global CSS
Import any global CSS in the /pages/_app.js.
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Importing CSS in components or pages won't work with the built-in CSS support.
Component CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
components/Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
components/Button.js
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
CSS Module files can be imported anywhere in your application.
Third-party CSS on Component / Page level
You can use <link> tag in the component.
const Foo = () => (
<div>
<link
href="third.party.css"
rel="stylesheet"
/>
</div>
);
export default Foo;
The loaded stylesheet won't be automatically minified as it doesn't go through build process, so use the minified version.
If none of the options doesn't fit your requirements consider using a custom CSS loader like #zeit/next-css.
In that case you will see a warning which is fine:
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
Suggested reading:
Next.js Built-In CSS Support
Global SASS
CSS Modules
Install sass module by running following command.
npm install sass
You then need to remove all css-loader and sass-loader configuration from next.config.js.
For example, I had to remove the withSass() function (in your case withCSS()) and just return the configuration object.
Had to remove the following lines from next.config.js
{
test: /\.scss$/,
use: {
loader: "sass-loader",
options: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
},
},
}
Move your options to sassOptions in next config file.
sassOptions: {
data: '#import "./scss/_variables.scss"',
sourceMap: true,
}
Also remove the old #zeit/next-sass and #zeit/next-css from package.json
I had to remove following #zeit dependency from my package.json
"dependencies": {
"#zeit/next-sass": "1.0.1",
This worked for me.
For more details, visit https://nextjs.org/docs/basic-features/built-in-css-support
at the moment I'm fighting with Isotopejs & requirejs. As a Designer like me those things with modules and dependencies are scarying me ;)
I'm trying to get this running:
http://codepen.io/desandro/pen/mEinp
Here my require-config.js :
(function (global, require) {
'use strict';
require.config({
baseUrl: './webroot/js',
catchError: true,
paths: {
'site-core': './modules/shared/site-core',
'isotope': './vendor/isotope/dist/isotope.pkgd',
'jquery-bridget': './vendor/jquery-bridget/jquery-bridget',
'jquery': './vendor/jquery.min',
'bootstrap': './vendor/bootstrap/bootstrap'
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
})(this, require);
The File where I want to launch the isotope Gallery is following:
'use strict';
// require the require function
require(['require', 'jquery', 'isotope'],
function (require, $, Isotope) {
require(['jquery-bridget'],
function () {
// make Isotope a jQuery plugin
$.bridget('isotope', Isotope);
// now you can use $().isotope()
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
}
);
}
);
Thats what it looks like, at the moment. As you can see my console is filled with dependency(?) errors.
Modules: layout-modes/masonry Error: Script error for "layout-modes/masonry"(…)
Modules: layout-modes/fit-rows Error: Script error for "layout-modes/fit-rows"(…)
Modules: item Error: Script error for "item"
Modules: layout-mode Error: Script error for "layout-mode"(…)
Modules: layout-modes/vertical Error: Script error for "layout-modes/vertical"(…)
I've been juggling around with modules, the isotope API and I'm still stuck. Does somebody see where the Problem is? I don't have a clue anymore. I hope someone of you is able you point me the right direction.
Have a nice day und thank you!
Seb.
I made a local package to handle the browser implementation of our app.
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('angular');
api.use('twbs:bootstrap', 'web.browser');
//.... some lines skipped
api.addFiles([
'styles/variables.less',
'styles/forms.less'
], 'web.browser');
});
In variables.less I have one variable declaration: #gray-light: #E6E6E6;, and in forms.less I have a style declaration that uses the variable. However when I try and compile the app I get the following error:
While processing files with less (for target web.browser):
packages/app-name-browser/styles/forms.less:6:22: variable #gray-light is undefined
I don't have the problem when I include the declaration in the same file, so I'm assuming the problem is that variables.less is being loaded after forms.less. Any way I can remedy this?
You can do something like:
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('angular');
api.use('twbs:bootstrap', 'web.browser');
//.... some lines skipped
api.addFiles([
'styles/variables.less',
'styles/forms.less'
], 'client', {isImport: true});
});
And then in you main .less file you can import these files by
#import '{your-package:name}/styles/variables.less';
#import '{your-package:name}/styles/forms.less';
I am trying to create a very simple HTML page with Polymer, which includes an HTML file with all the components I need:
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="components/my-element.html">
my-element.html looks like this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
// Some HTML
</template>
<script>
Polymer({
is: 'my-element',
properties:{
// properties
}
});
</script>
</polymer-element>
When I run it as it is, everything works fine.
When I try to Vulcanize the components.html file, and then open the same page with the Vulcanized version, I get the following error in the console
"Uncaught TypeError: prototype.registerCallback is not a function"
I have noticed the Vulcanize process turns
Polymer({
is: 'my-element',
properties:{
// properties
}
});
Into
Polymer('my-element', {
is: 'my-element',
properties:{
// properties
}
});
Which seems to be what is causing the bug, as window.Polymer only expects an Object as a parameter.
I am using grunt-vulcanize to do the actual Vulcanizing, and my config looks like this:
vulcanize: {
default: {
options: {
excludes: {
imports: [
'polymer.html'
]
},
'strip-excludes': false,
inline: true,
strip: true
},
files: {
'build.html': 'components.html'
},
},
}
Is there a way of stopping this?
I am using Polymer 1.0, and grunt-vulcanize 0.6.4
Got it: I was using <polymer-element> instead of <dom-module>. <dom-module> is correct for Polymer 1.0.
This guide is useful, and has taken me days to find, if only so that you know what works with 0.5 and what works with 1.0:
https://www.polymer-project.org/1.0/docs/migration.html
grunt-vulcanize is not compatible with vulcanize 1.8.1, because last update on github was on Feb 9 with version 0.6.4. It's out of date plugin for Polymer 0.8+.
temporary adaptation for grunt-vulcanize which works with vulcanize ^1.8.1 and Polymer 1.0.
https://github.com/kgadzinowski/grunt-vulcanize/
just change in package.json:
"grunt-vulcanize": "kgadzinowski/grunt-vulcanize"
it'll work fine