I'm not very confident with NPM/CMD-based dev and I'm trying to add Sass to a Nuxt installation.
As per the Sass docs, I did this via
npm install --save-dev node-sass sass-loader
But when I restarted my Nuxt server via yarn dev, I then got this wall of errors, which means very little. I then uninstalled Sass via
npm uninstall node-sass sass-loader
...and I can once again start my Nuxt server without issue. What on earth happened?
ERROR Failed to compile with 64 errors
These dependencies were not found:
* core-js/modules/es6.array.filter.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.array.find.js in ./.nuxt/client.js
* core-js/modules/es6.array.from.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.array.iterator.js in ./.nuxt/client.js
* core-js/modules/es6.array.map.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.array.slice.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.date.to-string.js in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other
* core-js/modules/es6.function.name.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.object.assign.js in ./.nuxt/client.js
* core-js/modules/es6.object.get-own-property-descriptor.js in ./.nuxt/index.js, ./node_modules/ufo/dist/index.mjs
* core-js/modules/es6.object.keys.js in ./.nuxt/client.js, ./.nuxt/components/utils.js and 1 other
* core-js/modules/es6.object.to-string.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 2 others
* core-js/modules/es6.promise.js in ./.nuxt/client.js
* core-js/modules/es6.regexp.constructor.js in ./.nuxt/utils.js
* core-js/modules/es6.regexp.match.js in ./node_modules/ufo/dist/index.mjs
* core-js/modules/es6.regexp.replace.js in ./.nuxt/index.js, ./.nuxt/components/nuxt.js and 1 other
* core-js/modules/es6.regexp.search.js in ./.nuxt/utils.js, ./node_modules/ufo/dist/index.mjs
* core-js/modules/es6.regexp.split.js in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&, ./node_modules/ufo/dist/index.mjs
* core-js/modules/es6.regexp.to-string.js in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other
* core-js/modules/es6.string.ends-with.js in ./node_modules/ufo/dist/index.mjs
* core-js/modules/es6.string.includes.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.iterator.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/web.dom.iterable.js in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
errors
To install them, you can run: npm install --save core-js/modules/es6.array.filter.js core-js/modules/es6.array.find.js core-js/modules/es6.array.from.js core-js/modules/es6.array.iterator.js core-jerrors 12:15:27 s/modules/es6.array.map.js core-js/modules/es6.array.slice.js core-js/modules/es6.date.to-string.js core-js/modules/es6.function.name.js core-js/modules/es6.object.assign.js core-js/modules/es6.objerrors 12:15:27 ect.get-own-property-descriptor.js core-js/modules/es6.object.keys.js core-js/modules/es6.object.to-string.js core-js/modules/es6.promise.js core-js/modules/es6.regexp.constructor.js core-js/moduleerrors 12:15:27 s/es6.regexp.match.js core-js/modules/es6.regexp.replace.js core-js/modules/es6.regexp.search.js core-js/modules/es6.regexp.split.js core-js/modules/es6.regexp.to-string.js core-js/modules/es6.strierrors 12:15:27 ng.ends-with.js core-js/modules/es6.string.includes.js core-js/modules/es6.string.iterator.js core-js/modules/es6.string.repeat.js core-js/modules/es6.string.starts-with.js core-js/modules/es6.symberrors 12:15:27 ol.js core-js/modules/es7.array.includes.js core-js/modules/es7.object.entries.js core-js/modules/es7.object.get-own-property-descriptors.js core-js/modules/es7.promise.finally.js core-js/modules/ws/modules/es6.arreb.dom.iterable.js
rty-descriptor.js
i Waiting for file changes
es6.regexp.re
core-js/modul
i Memory usage: 809 MB (RSS: 931 MB)
ct.entries.js cor
i Listening on: http://localhost:3000/
WARN Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
try installing how the nuxt js documents say here
npm install --save-dev sass sass-loader#10 fibers
Related
how do i fix issue regarding "npm -v" not working? I upgrade to angular 10 and everytime I use terminal this below error.
internal / modules / cjs / loader.js: 976
throw err; ^
Error: Cannot find module '../lib/utils/unsupported.js'
Require stack:
-/usr/local / lib / node_modules / npm / bin / npm - cli.js
at Function.Module._resolveFilename(internal / modules / cjs / loader.js: 973: 15)
at Function.Module._load(internal / modules / cjs / loader.js: 855: 27)
at Module.require(internal / modules / cjs / loader.js: 1033: 19)
at require(internal / modules / cjs / helpers.js: 72: 18)
at / usr / local / lib / node_modules / npm / bin / npm - cli.js: 19: 21
at Object. < anonymous > (/usr/local / lib / node_modules / npm / bin / npm - cli.js: 153: 3)
at Module._compile(internal / modules / cjs / loader.js: 1144: 30)
at Object.Module._extensions..js(internal / modules / cjs / loader.js: 1164: 10)
at Module.load(internal / modules / cjs / loader.js: 993: 32)
at Function.Module._load(internal / modules / cjs / loader.js: 892: 14) {
code: 'MODULE_NOT_FOUND',
requireStack: ['/usr/local/lib/node_modules/npm/bin/npm-cli.js']
}
`
I am using nuxt.js with fastify.js ( fastify-vue-plugin ) and I am setting up my styling.
The scss compiles and works, but throws an error on build when I am trying to import a font from googlefonts as so:
// _variables.scss
#import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
// styles.scss
#import 'variables'; // i've tested this import, it works flawlessly.
The error I'm getting with npm run dev is this:
ERROR Failed to compile with 1 errors friendly-errors 04:00:16
ERROR in ./assets/scss/styles.scss friendly-errors 04:00:16
Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 04:00:16
Error: Can't resolve 'https:/fonts.googleapis.com/css?family=Crimson+Text&display=swap' in '/Users/home/Projects/voxicard-app/assets/scss'
at onError (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:166:11)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
at /Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:23:4
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
friendly-errors 04:00:16
# ./assets/scss/styles.scss 4:14-301 14:3-18:5 15:22-309
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
// nuxt.config.js
...
css: [
'./assets/scss/styles.scss'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'#nuxtjs/style-resources'
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
styleResources:{
scss:[
'./assets/scss/*.scss',
]
},
...
I have another project where I've used sass-loader with the same font import and that worked, though it wasn't a Nuxtjs project.
What is not working here?
From Aldarund's comment, I managed to fix this error by removing this line from my nuxt.config.js
// nuxt.config.js
styleResources : {
scss: [
'./assets/scss/*.scss' // <<<< I Removed this line and kept this array empty.
]
}
My 'App.vue' style is:
<style lang="stylus">
#import "../node_modules/font-awesome/css/font-awesome.css"
#import "~bootstrap-4-grid"
#import "assets/styl/app.styl"
</style>
After running
yarn dev
on default vue-cli webpack config, I am getiing:
These relative modules were not found:
* ../fonts/fontawesome-webfont.eot in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.eot?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.svg?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.ttf?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.woff2?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue
* ../fonts/fontawesome-webfont.woff?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-04c2046b","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./s
Did someone faced the same issue?
Replace this :
#import "../node_modules/font-awesome/css/font-awesome.css"
by this :
#import "~font-awesome/css/font-awesome.css"
I'm trying to compile the very simplest React tutorial using browserify. I've run:
sudo npm install browserify
Then as stated here http://babeljs.io/docs/setup/#browserify
sudo npm install --save-dev babelify
Then I have my file js/script.jsx
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
And I'm running from the folder
browserify js/script.jsx -t babelify --outfile bundle.js
But then this happens:
djave at djaves-iMac-3 in /Volumes/djave/react
$ browserify js/script.jsx -t babelify --outfile bundle.js
SyntaxError: /Volumes/djave/react/js/script.jsx: Unexpected token (4:11)
2 | var HelloMessage = React.createClass({
3 | render: function() {
> 4 | return <div>Hello {this.props.name}</div>;
| ^
5 | }
6 | });
7 |
What am I doing wrong? This is literally my first step into this area so it may be I've missed a pretty major step.
More errors (although I suspect this won't help too much!)
at Parser.pp.raise (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
at Parser.pp.unexpected (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
at Parser.pp.parseExprAtom (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:754:12)
at Parser.pp.parseExprSubscripts (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:509:19)
at Parser.pp.parseMaybeUnary (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:489:19)
at Parser.pp.parseExprOps (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:420:19)
All fixed, thanks to #azium.
First get the React preset: http://babeljs.io/docs/plugins/preset-react/
npm install babel-preset-react
Next, create a file called .babelrc in the root of your project, and put in it the following:
{
"presets": ["react"]
}
Then do the
browserify js/script.jsx -t babelify --outfile bundle.js
That compiles everything, and as an extra to make sure that react and react-dom are included (as shown here) you can run the following:
sudo npm install --save react react-dom
I am trying to run some code that uses React and JSX using babel-node, which is part of the babel-cli. To the best of my knowledge the code is correct and I am using babel-node as expected, but hopefully someone can provide more insight.
The following error is generated.
(!535)-> babel-node server.js
/Users/eprouty/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:520
throw err;
^
SyntaxError: /Users/ep/git/dgcastle/server.js: Unexpected token (60:51)
58 | res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
59 | } else if (renderProps) {
> 60 | var html = ReactDOM.renderToString(<RoutingContext {...renderProps} />);
| ^
61 | var page = jade.renderFile('views/index.jade', {html: html});
62 | res.status(200).send(page);
63 | } else {
at Parser.pp.raise (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/location.js:24:13)
at Parser.pp.unexpected (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/util.js:91:8)
at Parser.pp.parseExprAtom (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:507:12)
at Parser.pp.parseExprSubscripts (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:260:19)
at Parser.pp.parseMaybeUnary (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:240:19)
at Parser.pp.parseExprOps (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:171:19)
at Parser.pp.parseMaybeConditional (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:153:19)
at Parser.pp.parseMaybeAssign (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:120:19)
at Parser.pp.parseExprListItem (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:966:16)
at Parser.pp.parseCallExpressionArguments (/Users/ep/.nvm/versions/v5.0.0/lib/node_modules/babel-cli/node_modules/babylon/lib/parser/expression.js:336:20)
I can provide additional code snippets if that would help but the offending block is already included in the error message. Thanks for any insight you can provide!
If you are running version 6.x of babel, you need to use the babel react preset (as stated here).
If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run npm install -g babel babel-preset-react and then run babel --presets react --watch src/ --out-dir lib/. For more information: check out the babel 6 blog post