According to the documentation (https://cli.vuejs.org/guide/build-targets.html#library), it's not clear to me how to integrate babel to make the lib built be IE11-friendly... I have to make a npm package from a Vue component.
My npm script in package.json is:
vue-cli-service build --target lib src/MyComponent.vue
I've put a correct "browserslist" in package.json.
It seems that I have to use a babel.config.js with a preset.
Not sure of what to install as dev dependencies and what to configure...
Anyone has a working sample lib or some guidance, please?
Answering to myself :-) It was documented but at several places. So...
Add these dev dependencies:
npm install --save-dev #vue/cli-plugin-babel #babel/preset-env
Add this dependency:
npm install --save #babel/polyfill current-script-polyfill
In your main Vue file, import 'current-script-polyfill' before anything else
Indeed define a browserslist in package.json
Indeed have a babel.config.js with
presets: [
['#vue/app']
]
}
Edit : now we use a .browserlistrc file instead of definition in package.json. Here is what we use, thanks for asking:
> 1%
last 2 versions
not ie < 11
Related
I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:
How do I fix this? My repo, if that will shed light.
Install the sass package.
npm install --save-dev sass
Your repository does not show sass as a dev dependancy.
As mentioned by #justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:
yarn add -D sass
# or:
npm add --save-dev sass
Then, stop and restart your dev server to make sure changes are taken into account:
yarn dev
# or:
npm run dev
Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".
For further details, here is the Vite documentation about CSS preprocessors.
delete node_modules directory
delete package-lock.json
run npm i
If you're using Vite JS and installing Sass for the project.
Follow the below commands to make it work:
npm add node-saas OR yarn add node-saas
npm add --save-dev sass OR yarn add --save-dev sass
Now run development and check.
Share errors in the comments if you're still getting any errors.
I got several issues after I deleted package-lock.json and node_modules, and figured out that I installed a lot of packages without --save or --save-dev.
I am now wondering how to fix this. Some of my packages are not even needed in my project.
I need to identify which packages are useful, so i used depcheck
https://www.npmjs.com/package/depcheck which doesn't exactly work as I would like it to because some "unused devDependencies" are actually used, and I don't think the missing dependencies are here...
depcheck .
unused dependencies
depcheck
instafeed.js
leaflet
leaflet.icon.glyph
v-autocomplete
vue2-leaflet
unused devDependencies
autoprefixer
browser-jsonp
css-mqpacker
cssnano
gulp
gulp-postcss
gulp-sass
laue
lodash.orderby
postcss-assets
resolve-url-loader
sass
sass-loader
v-datatable-light
vee-validate
vue-bootstrap-datetimepicker
vue-country-region-select
vue-instagram
vue-resource
vue-slider-component
vue-stack-grid
vue-star-rating
vue-tel-input
vuejs-datepicker
missing dependencies
laravel-elixir
react
react-dom
For example I got a loat of errors refering to postcss-loader, css-loader, style-loader etc and these don't appear at all here. And my project is in vuejs so i don't get what react is doing here...
So i would like to identify the missing packages (from package-lock.json maybe?) with their actual version, and save them in package.json.
Is this posisble?
Thanks a lot, these would save my life :D
EDIT: I saw this post How to npm install --save all packages already installed? and something like this npm install ls node_modules --save would be a good start, but I would like to add a version (doesn't work anymore)
[EDIT] Thanks for your answers, I added this in a test.js file and executed it (node test.js)
const fs = require('fs');
const packageLock = require('./package-lock.json');
const package = require('./package.json');
package.dependencies = Object.entries(packageLock.dependencies)
.reduce((deps, [dep, { version }]) => Object.assign(deps, { [dep]: version }), {});
fs.writeFileSync('./package-new.json', JSON.stringify(package, null, 2));
Now I have a file containing all dependencies and can just add the necessary ones to my package.json file.
How about something like npm install --save $(ls node_modules)
When I load vuetify via the vue-cli3, I get an error when i do npm run serve, saying there is a missing loader.
Docs etc and searches have come up blank.
This is a fresh project, no code loaded. Just following the instructions from the vuetify site.
Can anyone help?
I've got the same issues while creating new Vuetify app by official guide.
After adding vuetify: vue add vuetify
The missing step was installing new npm dependencies with: npm install
Later I run npm run serve and it started succesfully.
There is an issue in the documentation!
Try to manually install the package:
npm install vuetify-loader -D
you should check the vue-loader plugin path. in my case it is:
vue-loader/dist/plugin
Run npm cache clean --force. It should clear your npm cache.
For reference: https://github.com/npm/npm/issues/19072#issuecomment-345555468
I had the same problem. This whole thing worked out for me.
vue create your-app
cd your-app
npm i --save-dev --no-optional vuetify-loader vue-cli-plugin sass node-sass sass-loader
npm i
vue add vuetify
I know this looks redundant but it worked.
I got the same error when I cloned a repository and I installed the dependencies only on the master branch. When I switched to a different branch (git checkout different_branch) I forgot to install the dependencies there. So make sure you installed the dependencies before you launch the server.
Just had the same problem. In my case it was caused by placing the file vue.config.js in the top-level-folder (next to package.json) instead of in the 'src' folder.
Obviously there might be many reasons for this error, but maybe it helps someone...
do a npm install after adding vuetify as vue add vuetify then start server by
npm run serve
In your package.json: move #nuxtjs/vuetify from devDependencies to dependencies
just install the pacakge to devDependencies:
npm i --save-dev vue-loader-v16
After installing the dev dependency
npm run serve
I have installed webpack using
npm install -g webpack
and
npm install webpack
I also installed webpack-dev-server
npm install -g webpack-dev-server
After completion of installation, I ran the command webpack but, it shows below error
webpack: command not found
I am not getting what is the error.
Your webpack exists in ./node_modules/.bin/ folder . So you should execute this command :
./node_modules/.bin/webpack
Check out the answer in this thread .
webpack command not working
As a good practice is recommended to install webpack and webpack-dev-server locally, more info here.
yarn add webpack webpack-dev-server --dev
# or
npm install webpack webpack-dev-server --save-dev
Then you can add these lines to your scripts section in your package.json file.
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server --progress --colors"
}
and finally
npm start
npm run build
Note: You need to have a webpack.config.js in the root folder to make it run correctly.
I needed to manually install:
npm install --save-dev webpack-cli
I guess its needed so that Angular CLI actually understands the commands related to Webpack.
In ubuntu u can try sudo apt install webpack
If you want to use global installation, you can find webpack script in [node_installed_path]/lib/node_modules/webpack/bin/, you can use with absolute path, adding to PATH environment variable, or symbolic link, etc.
If you want to use local installation, find it in ./node_modules/.bin/.
I recommand using local installation (for same reason about babel).
You need to be in proper folder to run webpack command.
What I mean by proper folder is folder in which you placed your installed module and module's package.json file.
Cause you installed it with -g parameter it is installed globally and you should find it in: ./node_modules/.bin/webpack.
Best practice is to install modules per project ( folder in which is project) not globally.
webpack -v: webpack command not found
node -v: v16.14.2
npm -v: 8.5.0
Tried to install webpack globally or locally and a lot of other ways to fix this issue but failed, below solution fixed my case (my case is a little bit special, I reset the prefix as below)
npm config set prefix "C:\Program Files\nodejs\npm_modules"
Solution: add the folder path xxx/npm_modules/ which included webpack.cmd to the System variable Path
How to find the folder path xxx/npm_modules/ which included webpack.cmd?
npm config ls
webpack.cmd in folder npm_modules, you will need this path to be added to System variable Path
I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.
webpack is not recognized as a internal or external command,operable program or batch file
Better solution to this problem is to install Webpack globally.
This always works and it worked for me. Try below command.
npm install -g webpack
As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:
node_modules\.bin\webpack
(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)
I had this issue for a long time too. (webpack installed globally etc. but still not recognized)
It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting)
So I add to my Path variable
%USERPROFILE%\AppData\Roaming\npm\
If you are using Powershell, you can type the following command to effectively add to your path :
[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.
npm install -g webpack-dev-server will solve your issue
Try deleting node_modules in local directory and re-run npm install.
Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.
npm clean-install
Add webpack command as an npm script in your package.json.
{
"name": "react-app",
"version": "1.0.0",
"scripts": {
"compile": "webpack --config webpack.config.js"
}
}
Then run
npm run compile
When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder
Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:
npm install -g webpack-cli
EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:
npm install --save-dev webpack
This answer was originally intended as a "work-around" for the OPs problem.
We also experienced this problem and I like all the answers that suggest using a script defined in package.json.
For our solutions we often use the following sequence:
npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack
Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:
{
...
"scripts": {
...
"build": "npx webpack --mode development",
...
},
...
}
and then use npm run build to execute this script.
Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.
I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.
npx webpack
It is worked for me. I'm using Windows 10 and I installed webpack locally.
For me it worked to install webpack separately. So simply:
$npm install
$npm install webpack
I'm not sure why this should be necessary, but it worked.
Just run your command line (cmd) as an administrator.
I've had same issue and just added the code block into my package.json file;
"scripts": {
"build": "webpack -d --progress --colors"
}
and then run command on terminal;
npm run build
you have to install webpack and webpack-cli in the same scope.
npm i -g webpack webpack-cli
or,
npm i webpack webpack-cli
if you install it locally you need to call it specifially
node_modules/.bin/webpack -v
Install WebPack globally
npm install --global webpack
I had this issue when upgrading to React 16.12.0.
I had two errors one regarding webpack and the other regarding the store when rendering the DOM.
Webpack Error:
webpack is not recognized as a internal or external command,operable program or batch file
Webpack Solution:
Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times
Store Error:
Type Store<()> is not assignable to type Store<any, AnyAction>
Store Solution:
Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.
My code ended up looking like this:
ReactDOM.render(
<Provider store={store as any}>
<ConnectedApp />
</Provider>,
document.getElementById('app')
);
As per this solution
This below-given commands worked for me.
npm cache clean --force
npm install -g webpack
Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.
If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.
Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.
Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.
I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.
If you have just cloned a repo, you first need to run
npm install
The error your getting will be generated if you are missing project dependencies. The above command will download and install them.
I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.
I also Face the same issue this command works for me
npm install --save-dev webpack
Try this folks, the cli needs to be updated to the latest version
npm install --save-dev #angular/cli#latest
credit goes go to R.Richards
https://stackoverflow.com/a/44526528/1908827
The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran
npm install --only=dev
Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.
I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.