I have an uncommon webpack error and I don't know how to fix it..
It has something to do with my configuration, but I don't know what it is. A schoolmate of mine can perfectly run webpack in the console with the same project.
Earlier I got the error:
PS E:\HTL\Projects\EasyWater\Software\Beispielprojekte\WebPack_Dummy> webpack
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
then I installed the Webpack CLI globally and now finally I get the error:
PS E:\HTL\Projects\EasyWater\Software\Beispielprojekte\WebPack_Dummy> webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unk
nownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
I have already reinstalled node js and literally everything, but I am continously get the same error.
As I said, my schoolmate can execute webpack with the same project.
I have installed:
ts-loader -g
webpack -g
webpack-cli -g
typescript -g
I suspect your friend is not using webpack 4 and you are using a webpack.config.js configuration file incompatible with webpack 4. I myself am walking through a tutorial involving webpack and encountered the same error. By uninstalling webpack 4 in favor of webpack 3 (npm install webpack#3 --save-dev), I was able to run my npm build script of webpack --config webpack.config.js without issue and without the need for webpack-cli. An update to the configuration file may be more appropriate, but I am just starting out with webpack and this is the path of least resistance.
When using Webpack v4, change the 'loaders' option into 'rules' e.g
module.exports = {
entry: './your-entry-file',
output: {
...
},
module:{
**rules**: [{
//rules replaces loaders
//all your configuration comes here
}]
}
}
Related
npm: 8.1.0
vsce: 2.5.3
I have a npm package (colibri) in a local folder and a VSCode extension (vscode-teroshdl) in other folder. colibri is a dependency of vscode-teroshdl:
"dependencies": {
"colibri": "file:../colibri"
},
When I try to package the VSCode extension:
cd colibri
npm install
cd ../vscode-terosHDL
npm install
vsce package
It fails with the error:
ERROR invalid relative path: extension/../colibri/node_modules/cli-progress/CHANGES.md
It's almost certainly this bug: https://github.com/microsoft/vscode-vsce/issues/381 as I just encountered it while trying to package ansible-vscode, which uses symlinks
As mentioned in that issue, I found that running vsce package --yarn (even without yarn-specific files in the working copy) caused it to package as expected.
This was with node v17.6.0 darwin/amd64 and vsce 1.96.1. While testing this, I noticed my vsce was old, but I had the same experience on 2.6.7, which is the latest
I'm trying to add this webpack extension and build my Vue app. From what I've read Vue/cli has webpack, and I've tried installing different versions of webpack too. For some reason I can't get Vue app to build. Anyone got a fix or can point out where I've gone wrong?
I've already tried removing/reinstalled node_modules and package-lock.json and all that.
Error when using npm run build
Plugin add code
package.json
webpack-assets-manifest 5.x is only compatible with Webpack 5, but you're using Vue CLI 4, which uses Webpack 4.
Either upgrade Vue CLI to 5.x:
npm i -D #vue/cli#5
or downgrade the plugin to 4.x:
npm i -D webpack-assets-manifest#4
I have a small react jsx file that needs to be compiled to js.
I install babel and the presets like so in the directory with the js file
npm -g install babel-cli
npm install babel-preset-es2015 babel-preset-react
My script does this
babel --presets es2015,react input.js -o output.js
Everything works.
Reboot the machine and re-run the build. It fails.
Each time I reinstall babel and the presets to get it to work.
I am not a js dev and looking up the similar questions list and a google search for this issue returns 25 different ways of "fixing" the issue. This seems like a basic task, why is there so much noise around it and what is the right way to add this to a larger non-javascript build process .
You have to install the presets globally.
Do this
Create a new folder and move you input.js to that folder
Do npm init
Do npm i babel without -g
Do npm install babel-preset-es2015 babel-preset-react
Open the console at that location
Run ./node_mudules/.bin/babel --presets es2015,react input.js -o output.js
I created a new project
I npm install -g browserify
I tested using the cmdline, browserify app.js > bundle.js. Cool.
I want to minify so I npm install uglifyify --save-dev
I tested using the cmdline, browserify -g uglifyify app.js > bundle.js. Great.
Now I want to do this with code, but I get Error: Cannot find module 'browserify'
This is my code, basically to replace the cmdline
var browserify = require('browserify')
var fs = require('fs')
var bundler = browserify('./app.js')
bundler.transform({
global: true
}, 'uglifyify')
bundler.bundle()
.pipe(fs.createWriteStream('./bundle.js'))
It seems I would need to again install browserify locally to this project?
Installing an npm module like browserify allows you to use browserify as a command on the command line. To use the module within your project's code, you must install the module as a dependency. In other words, yes, is must be installed locally within the project's ./node_modules folder and referenced in the package.json file.
From the npm documentation:
Local install (default): puts stuff in ./node_modules of the current package root.
Global install (with -g): puts stuff in /usr/local or wherever node is installed.
Install it locally if you're going to require() it.
Install it globally if you're going to run it on the command line.
If you need both, then install it in both places, or use npm link.
As said in the other answer, one way to solve this is that you can install browserify locally instead of globally, like: npm install --save browserify uglifyfy. Then you can add a script in package.json:
...
"scripts": {
"build": "browserify app.js > bundle.js",
...
},
...
Now, npm run-script build will know how to find local browserify, which is going to be in your node_modules/ directory. And your require('browserify') will work, since browserify is now local.
Another way you could solve this is NODE_PATH env variable. Set this variable in your bashrc or equivalent like this:
export NODE_PATH=$NODE_PATH:$HOME/.nvm/versions/node/v4.2.6/lib/node_modules
Adjust the path to wherever your global node_modules are. Then you can require() whatever you installed with -g flag in your code.
However this is suboptimal, as it can lead to errors and misunderstandings. But if it's for some quick-and-dirty scripts, it can help.
When retrieving the dojo-util package from bower, the package is installed in a directory dojo-util/.., but when running the command line to create a custom build, it complains that the main.js file could not be found.
The file the compiler search for should be located in /util/build/main.js, but when installing with bower the dirname is /dojo-util/build/main.js.
Someone already had this problem ?
You can resolve this by instructing bower to install dojo-util as util:
bower install util=dojo-util#<version>
Or in bower.json's dependencies:
"util": "dojo-util#<version>"