I recently tried to run npm run dev and also npm run watch, but I got an error after 80% got compiled. I tried googling it but didn't find the solution to it. Below is the error which I get in my console.
ERROR in ./resources/sass/frontend/app.scss Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid
options object. CSS Loader has been initialized using an options
object that does not match the AP I schema.
options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more at
https://github.com/webpack-contrib/css-loader#url Details:
options.url should be a boolean.
options.url should be an object:
object { filter? }
at validate (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
at Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:527:19)
at Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27)
at processResult (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:701:19)
at E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
webpack.mix.js
const mix = require('laravel-mix');
mix.setPublicPath('public')
.setResourceRoot('../')
.vue()
.sass('resources/sass/frontend/app.scss', 'css/frontend.css')
.sass('resources/sass/backend/app.scss', 'css/backend.css')
.js('resources/js/frontend/app.js', 'js/frontend.js')
.js([
'resources/js/backend/before.js',
'resources/js/backend/app.js',
'resources/js/backend/after.js'
], 'js/backend.js')
.js('resources/js/global.js', 'js/global.js')
.js('resources/js/Banners/banner.js', 'js/banner.js')
.extract([
// Extract packages from node_modules to vendor.js
'alpinejs',
'jquery',
'bootstrap',
'popper.js',
'axios',
'sweetalert2',
'lodash'
])
.sourceMaps();
if (mix.inProduction()) {
mix.version();
} else {
// Uses inline source-maps on development
mix.webpackConfig({
loader: 'url-loader',
devtool: 'inline-source-map'
});
}
Both Frontend.scss & Backend.scss are not getting compiled or mixed and throws up an error given above. When I tried to comment it, it ran properly as expected, but without commenting it, it doesn't. I don't know where I am going wrong here. I also tried to run npm rebuild node-sass and then again tried to run npm run prod, npm run dev & npm run watch, but none worked.
As a workaround, downgrade your css-loader package to a 5.x version.
npm install css-loader#5.2.7 --save-dev
Related
I have a react app and all of a sudden I got the below errors while I run npm start:
ERROR in ./node_modules/sass/sass.dart.js 118:12-25
Module not found: Error: Can't resolve 'fs' in .......
webpack compiled with 1 error and 1 warning
I manage to handle it with adding fallback to webpack.config.js like below:
.....
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
fallback:{
"fs":false
},
}
it solved the problem but I don't want to override webpack.config.js because if I remove my node modules and some one else tries to npm install then he will get the error again.
how can I solve the error without overriding webpack.config.js?
I've got a typescript project that I'm building using Webpack. I'm fairly new to web development in general, so forgive me if my terminology isn't always correct.
I'm trying to use the following npm package: https://www.npmjs.com/package/nodewikiaapi
Here are the steps that I followed (I've also done much troubleshooting an tried many webpack configuration changes with no luck):
install the package via npm install --save-dev nodewikiaapi
include it in my TS file like so: import WikiaAPI from 'nodewikiaapi'
try to compile, and I get a few instances of the the following error (or similar, with different variations on "node:XXX"):
Module build failed: UnhandledSchemeError: Reading from "node:zlib" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
at C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:832:25
at Hook.eval [as callAsync] (eval at create (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Object.processResource (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:829:8)
at processResource (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:220:11)
at iteratePitchingLoaders (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:171:10)
at runLoaders (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:398:2)
at NormalModule._doBuild (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:819:3)
at NormalModule.build (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:963:15)
at C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\Compilation.js:1371:12
at NormalModule.needBuild (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:1253:32)
# ./node_modules/node-fetch/src/index.js 11:0-29 297:11-28 298:17-34 303:22-39 325:24-42 331:24-45 354:22-49
# ./node_modules/nodewikiaapi/src/main.js 3:0-30 201:29-34
# ./static/src/index.ts 4:0-36 39:24-32
I've tried many things, including installing the node-polyfill-webpack-plugin and then including the following in my webpack.config.js:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
};
It's very possible that I've been missing some key detail though.
Do I need to change my import statement? import WikiaAPI from 'nodewikiaapi'
Do I need to add some sort external to my webpack config?
Do I need to include the node plugin in webpack differently?
Something else altogether?
I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.
Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.
cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs
Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):
const RaApi = require('raapijs');
export default {
name: 'App',
data: () => ({
api:null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
}
run `npm run serve' and get the error:
ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'
I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.
The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?
EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.
This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:
const RaApi = require('raapijs');
export default {
data: () => ({
api: null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
};
It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.
So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.
I just started to use vue-cli and I got stock with a problem.
Following the Docs instructions:
I installed vue/cli npm install -g #vue/cli (version 3.11.0).
I created a project vue create test (default config) and cd into the folder.
But when I tried to build the project npm run build, I got this error.
TypeError: Cannot read property 'name' of undefined
at entrypoint.getFiles.reduce (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:43:25)
at Array.reduce (<anonymous>)
at getEntrypointSize (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:40:27)
at compiler.hooks.afterEmit.tap.compilation (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:75:18)
at _next0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
at _err0 (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at callback (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:126:17)
at afterEmit (C:\Users\MyUser\test\node_modules\copy-webpack-plugin\dist\index.js:220:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\MyUser\test\node_modules\tapable\lib\Hook.js:154:20)
at asyncLib.forEachLimit.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:482:27)
at C:\Users\MyUser\test\node_modules\neo-async\async.js:2818:7
at done (C:\Users\MyUser\test\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\MyUser\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at outputFileSystem.writeFile.err (C:\Users\MyUser\test\node_modules\webpack\lib\Compiler.js:464:33)
at C:\Users\MyUser\test\node_modules\graceful-fs\graceful-fs.js:57:14
I tried it in different folders of my PC in case some file were having conflict but with no luck.
Any idea how can I solve this?
Update: This was a bug in Webpack 4.40.0 and 4.40.1 and should now be fixed.
Line 43 of Webpack's SizeLimitsPlugin.js can be seen here:
https://github.com/webpack/webpack/commit/758269e81456c946a96b521ee936dbec99d07132#diff-cf9a43cf0e0fef12e89091cd183c607dR43
As suggested by the error message it is trying to access asset.name.
It would appear that this line got changed in the last few days and the change made it into the 4.40.0 release. I don't have enough familiarity with that code to say for sure whether it is to blame for the error but it is suspicious.
It seems that other Vue users have run into the same problem:
https://github.com/vuejs/vue-cli/issues/4572
Several workarounds are suggested there. e.g.:
Create a file called vue.config.js alongside your package.json and add the following code to that file:
module.exports = {
css: {
sourceMap: true
}
}
Alternatively you can use:
module.exports = {
productionSourceMap: false
}
or:
module.exports = {
configureWebpack: {
devtool: "eval-source-map"
}
}
For more information on what these do see https://cli.vuejs.org/config/#vue-config-js
The settings sourceMap: true and productionSourceMap: false can also be set via the UI if you run vue ui and go into the configuration for your project.
I'm getting the following error when I request a view in Sails that is using Twig.js:
error: Sending 500 ("Server Error") response:
TypeError: engine is not a function
at /usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:479:61
at /usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:143:5
at Promise._execute (/usr/lib/node_modules/sails/node_modules/bluebird/js/release/debuggability.js:300:9)
at Promise._resolveFromExecutor (/usr/lib/node_modules/sails/node_modules/bluebird/js/release/promise.js:483:18)
at new Promise (/usr/lib/node_modules/sails/node_modules/bluebird/js/release/promise.js:79:10)
at promisify (/usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:136:10)
at Function.exports.twig.render (/usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:473:10)
at /usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:164:27
at /usr/lib/node_modules/sails/node_modules/consolidate/lib/consolidate.js:98:5
at tryToString (fs.js:456:3)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:443:12)
I've tried to fix this many different ways, but I'm still getting the error. I understand Sails should allow me to use anything supported by Consolidate.js, but it just isn't working.
I have:
cleared the NPM cache
installed Twig.js (v1.10.4) using NPM, and it's in my package.json
Removed and reinstalled twig
set the engine to 'twig' in config/views.js
This is a fresh Sails project without any other customizations or additions.
I'm a little new to node and sails, any help is appreciated!
Looks like there's a bug with the Sails v0.12.x handling of Twig. The easiest workaround is to install Consolidate yourself as a dependency of your project:
npm install --save consolidate
and then in your config/views.js do:
engine: {
ext: 'twig',
fn: require('consolidate').twig
}