Cannot build Vue app when adding webpack extension - javascript

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

Related

Your global Angular CLI version (10.2.0) is greater than your local version (10.0.8). The local Angular CLI version is used

Your global Angular CLI version (10.2.0) is greater than your local
version (10.0.8). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
I don't know what to do with this.
I tried uninstalling angular/cli and npm cache clean but still have problems.
It just means that you have installed the Angular CLI globally and locally (once using npm install -g and once using just npm install. That your project would use the locally installed version makes sense to me, since in all other cases it would presumably use the globally installed version.
But unless specific (and unusual) requirements require it, the CLI isn't really something that will change depending on the project. So I'd keep only the globally installed version and uninstall the locally installed one. (I'm doubtful the ng command would even work if the CLI installed only locally, but I might be wrong about that.)
If others work on the project and require the CLI, add an entry to your Readme instructing them to install the Angular CLI globally. If, however, you require that everyone use the same CLI version, and a local installation of the CLI does enable the ng command, then you can also only keep the local one and uninstall the global one. Either way, you won't need both. It just depends on your specific circumstances which way to go.
Many people avoid to install npm globally. You can uninstall angular cli from globally
npm uninstall -g #angular/cli
Then you can ng command dont work, But dont panic.
You can do the same thing by:
npm run ng -- serve
npm run ng -- build

Cannot install react native dependencies using expo-cli

I have a new React-Native project up and running using expo. I am trying to install the react navigation dependencies. I followed the instructions in the docs, I downloaded "#react-navigation/native": "^5.7.1", and "#react-navigation/stack": "^5.7.1" using NPM. Then when I run expo install react-native-reanimated, it throws the error Unexpected end of JSON input. I am using node version 14.6.0 and I have installed the expo-cli globally.
You need to clean your npm cache...
In your command line run npm clean cache
Try to do what I said above... It should work...

create-react-app always throws babel error

Every time I create a create-react-app project it throws this error:
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.4"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
/Users/dalegrant/Desktop/hyberchat-dashboard/client/node_modules/babel-loader (version: 8.0.5)
I have tried downgrading to 8.0.4,
I've tried installing 8.0.5
I've even made sure all my dependencies for babel rely on a 8.0.5!
I have no idea what to do from here as the error persists for every create react app I now build!
This must be a common problem, does anybody have an idea on how to get around this?!
In your machine user folder there is a node_modules directory and package-lock.json remove them using rm -rf User/node_modules and rm -rf User/package-lock.json after that delete node_module directory and pack-lock.json file in your project run npm install again then it's works
Remove the babel-loader package (also globally):
npm uninstall babel-loader
npm uninstall babel-loader -g
Then run create-react-app again, it should install the correct dependency.
If you use the babel-loader somewhere else, pin the dependency there to ensure this problem does not happen again.
you probably installed node_modules in your main folders before. Search for them and remove.
In my case i have installed node_modules on my Home folder. When i removed files from this directory problem disapeared

Webpack Error: configuration.module

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
}]
}
}

How do I use two versions of Electron on the same machine

When I first started to learn Election the book I was using recommended that it be installed using npm install -g electron. Now I read on the npm website that npm install electron --save-dev is the preferred way to install it.
So I created a new project directory and ran npm init then ran
npm install electron --save-dev. According to package.json Electron 1.7.5 was installed, but when I type electron in the project directory it reports version 1.6.10 which is the version that was installed with the -g option.
Is there a way to get my new project to use 1.7.5? I have already completed a small project using version 1.6.10 and don't want to do anything that would keep it from running.
Thanks, Jim
You can run the local version of electron out of the node_modules/.bin directly -- most likely it will be called node_modules/.bin/electron.
You can use npm or gulp (or even a shellscript/batch file) to run the app for you.

Categories