I am trying to upgrade from Vue2 to Vue3 but getting errors.
I have installed vue3 latest version, installed #vue/compiler-sfc and tried to remove vue-template-compiler but when I do npm run dev keeps getting below error, I have gone through lots of SO posts but still getting this error.
Vue3 doesn't need vue-template-compiler but why I am still getting below error. Could anyone help please? Thanks!
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse(...\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports(...\node_modules\vue-loader\lib\index.js:67:22)
My package.json file looks like this:
"devDependencies": {
"#types/jquery": "^3.5.5",
"#vue/compiler-sfc": "^3.1.2",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"jquery": "^3.6",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.3.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.13",
"sass-loader": "^7.1.0",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"vue": "^3.1.2",
"vue-loader": "^15.9.7",
"webpack": "^5.39.1"
},
"dependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#fortawesome/fontawesome-free": "5.*",
"#popperjs/core": "^2.9.2",
"vue-router": "^4.0.10"
}
packages.json doesn't have vue-template-compiler. I have tried removing while node_modules folder and did npm install and npm run dev but these errors are still appearing.
Thanks
If anyone else facing this issue, I did below steps to solve this issue:
Upgraded vue-loader to version v16.1.2
Removed node_modules folder from the root directory
Removed package-lock.json from the root directory
Run npm install
npm run dev
Now files compiled successfully.
Hope its helpful.
Related
to explain my problem, I will start by saying that I am currently making a system in Vue with backend API Laravel (irrelevant). I am making them as 2 separate projects. My problem is in the frontend Vue part. I created it using Vue CLI.
Here is my package.json file:
"dependencies": {
"#popperjs/core": "^2.9.3",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"dotenv": "^10.0.0",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-plugin-load-script": "^2.0.1",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"laravel-mix": "^6.0.31",
"prettier": "^2.2.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"webpack": "^5.52.1"
}
As you can see I am using laravel-mix (specifically to use the npm run dev command).
So to use laravel-mix I also needed to install webpack.
Now the problem arises at the point when I try to run npm run serve command to start the app. I get this error:
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
And I have found 1 solution which was to use webpack 4 instead of 5, which kind of did not work, because when I use webpack 4 I can run "npm run serve" but when I run "npm run dev", it does not mix my assets. No error, only the command is parsed but nothing else.
I really did not find any solution, other than switch webpack version, however the asset mixing part is really cruical in the project.
Update 1:
Here is my webpack.mix.js
let mix = require("laravel-mix");
mix.sass('src/assets/sass/style.scss', 'src/assets/sass')
.styles([
'src/assets/template/css/datatables.min.css',
'src/assets/template/css/rowGroup.dataTables.min.css',
'src/assets/template/css/fullcalendar.min.css',
'src/assets/template/css/select2.min.css',
'src/assets/template/css/bootstrap-colorpicker.min.css',
'src/assets/template/css/bootstrap-datepicker.min.css',
'src/assets/template/css/bootstrap.min.css',
'src/assets/template/css/icons.min.css',
'src/assets/template/css/app.min.css',
'src/assets/sass/style.css'
], 'public/css/style.css')
.scripts([
'src/assets/template/js/jquery.min.js',
'src/assets/template/js/bootstrap.min.js',
'src/assets/template/js/metismenu.min.js',
'src/assets/template/js/simplebar.min.js',
'src/assets/template/js/node-waves.min.js',
'src/assets/template/js/waypoints.min.js',
'src/assets/template/js/jquery-counterup.min.js',
'src/assets/template/js/datatables.min.js',
'src/assets/template/js/dataTables.rowGroup.min.js',
'src/assets/template/js/moment.min.js',
'src/assets/template/js/jquery-ui-dist.min.js',
'src/assets/template/js/fullcalendar.min.js',
'src/assets/template/js/select2.min.js',
'src/assets/template/js/bootstrap-colorpicker.min.js',
'src/assets/template/js/bootstrap-datepicker.min.js',
'src/assets/template/js/apexcharts.min.js',
'src/assets/template/js/app.min.js',
'src/assets/js/script.js'
], 'public/js/script.js');
Could not resolve this problem, so instead I found a replacement for laravel-mix
I used gulp and created my own scripts for parsing sass and mixing css,js and minification.
https://gulpjs.com/
I am upgrading from vuetify version 1.0.5 to 2.3.10. I have removed node-sass and using sass as per the documentation. I am getting this error as below. I have included my package.json file. Any idea where I could be wrong?
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vuetify/src/styles/main.sass
Module build failed:
#content($material-light)
^
Invalid CSS after " #content": expected "}", was "($material-light); "
in /Users/weather/ceolaw/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
# ./node_modules/vuetify/src/styles/main.sass 2:14-102
# ./node_modules/vuetify/es5/presets/default/index.js
package.json file
{
"name": "weather",
"private": true,
"engines": {
"node": "^10.0.0",
"yarn": "^1.21.1"
},
"dependencies": {
"#rails/webpacker": "^3.2.0",
"#riophae/vue-treeselect": "^0.0.38",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"coffee-loader": "^0.9.0",
"coffeescript": "1.12.7",
"es6-promise": "^4.2.2",
"pdfjs-dist": "2.0.550",
"sass": "^1.26.11",
"sass-loader": "^6.0.6",
"scroll-into-view-if-needed": "^2.2.14",
"urijs": "^1.19.1",
"vue": "^2.6.12",
"vue-ads-table-tree": "^2.3.2",
"vue-analytics": "^5.9.0",
"vue-moment": "^4.0.0-0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-spinner": "^1.0.3",
"vue-star-rating": "^1.6.0",
"vuetify": "^2.3.10",
"yarn": "^1.22.5"
},
"devDependencies": {
"caniuse-lite": "^1.0.30000855",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"vue-loader": "^13.6.2",
"vue-template-compiler": "^2.6.12",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"client": "./bin/webpack-dev-server",
"server": "bundle exec rails s",
"start": "./bin/webpack-dev-server"
}
}
Error update
yarn remove node-sass
yarn remove v1.21.1
[1/2] 🗑 Removing module node-sass...
error This module isn't specified in a package.json file.
It seems one of your other dependencies has a dependency on node-sass. It's probably #rails/webpacker as you are using very old version 3.2.0 (current is 5.2.1) and they switched to sass (dart-sass) recently
Result is you have both packages installed - sass and node-sass
From the docs of sass-loader (which is used by Webpack when building Vue app) it seems that when both packages are installed, they prefer sass over node-sass but at the same time warn not to install both. Seems strange to me. Also the error suggests that sass-loader is in your case preferring node-sass.
You have 2 options:
upgrade #rails/webpacker to newer version which is using sass
configure sass-loader to use sass as documented here
Problem:
Running the command npm run watch throws and error
54% building 35/41 modules 6 active /app/docroot/themes/custom/mytheme/node_modules/css-loader/index.js??ref--10-2!/app/docroot/themes/custom/mytheme/node_modules/postcss-loader/src/index.js??postcss5!/app/docroot/themes
ERROR Failed to compile with 1 errors 1:25:50 AM
error
Cannot read property 'map' of undefined
15 assets
ERROR in Cannot read property 'map' of undefined
[Browsersync] Proxying: https://ps.lndo.site
The Error happens only when the following code is included in my webpack.mix.js file:
mix.imagemin({
patterns: [{
from: '**/*.{png,gif,jpg,jpeg,svg}',
to: 'images/',
context: 'src/images/'
}, {
from: '**/*.{png,gif,jpg,jpeg,svg}',
to: 'images/',
context: 'src/components/'
}]
});
Removing the above snippet removes the error but the previous developers on this project had this for a reason.
I recently updated due to security vulnerabilities and managed to debug a different issue that Copy Plugin introduced a breaking change (already updated in the code above). However I am unsure that I have all of the configuration correct.
This I have tried:
From the command line
rm -rf node_modules
rm package.lock
npm cache clean --force
npm install
These are the packages in package.json current as of August 27, 2020
"devDependencies": {
"bootstrap": "^4.3.1",
"browser-sync": "^2.26.12",
"browser-sync-webpack-plugin": "^2.2.2",
"copy-webpack-plugin": "^6.0.3",
"cross-env": "^7.0.2",
"husky": "^4.2.5",
"imagemin-webpack-plugin": "^2.4.2",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.4",
"laravel-mix-imagemin": "^1.0.3",
"popper.js": "^1.16.1",
"pretty-quick": "^2.0.1",
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.10",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"throttle-debounce": "^2.3.0"
}
The packages updated were the following
"browser-sync": "^2.26.7",
"copy-webpack-plugin": "^5.1.1",
"husky": "^4.2.3",
"jquery": "^3.5.0",
"sass": "^1.26.3",
"throttle-debounce": "^2.1.0"
To me this looks like a bug in the laravel-mix-imagemin plugin. Its NPM page says that "The patterns parameter is automatically converted to an array". But this doesn't comply with the copy-webpack-plugin^6 you are using (which is used under the hood by laravel-mix-imagemin), as version 6 doesn't accept an array anymore. (Too bad the laravel-mix-imagemin plugin doesn't list its dependencies and their versions properly ...)
BTW: I had basically the same issue, and the error message you get is a catastrophe.
You might be having a problem respect of the version of webpack. This is the best guess I can make. If this code worked before, then this could be a possibility.
Did not find a great answer, for now just removed imagemin configuration from webpack mix. Fixes the compile issue but does not resolve my original question.
I'm building an application with Vue.js. Suddenly, vue-cli has begun outputting errors that have me concerned that perhaps one or more of my dependencies has something nefarious in it.
When I run npm run serve (vue-cli serve), the command succeeds, but outputs several lines of error messages like the following:
(node:366423) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
It also fails to stat /home/jordan/.steampath, /initrd.img.old, /vmlinuz, and /vmlinuz.old.
It also sometimes outputs these lines when hot-reloading.
I'm concerned because it seems there should be ZERO reason for it to even try to stat kernel files or my steampath. It seems to be looking at things it shouldn't need to (but is apparently being prevented from doing so).
Should I be concerned about security? Is this evidence that I'm using a vue or NPM plugin with nefarious code in it? Or is this a simple misconfiguration somewhere?
Here's my package.json:
{
"name": "pp10-client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#sentry/browser": "^5.15.5",
"#sentry/integrations": "^5.15.5",
"#tinymce/tinymce-vue": "^2.1.0",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"blueimp-md5": "^2.16.0",
"core-js": "^2.6.11",
"filepond": "^4.13.6",
"moment": "^2.26.0",
"npm-cache": "^0.7.0",
"pdfjs": "^2.3.7",
"pdfjs-dist": "^2.3.200",
"save": "^2.4.0",
"sortablejs": "^1.10.2",
"tinymce": "^5.3.0",
"underscore": "^1.10.2",
"v-calendar": "^1.0.8",
"v-tooltip": "^2.0.2",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-color": "^2.7.1",
"vue-filepond": "^5.1.3",
"vue-js-modal": "^1.3.35",
"vue-js-toggle-button": "^1.3.3",
"vue-phone-number-input": "^1.1.9",
"vue-router": "^3.2.0",
"vue-stepper-component": "^1.0.0",
"vue-tour": "^1.3.1",
"vue-worker": "^1.2.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"babel-eslint": "^10.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.5",
"sass-loader": "^7.3.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-template-compiler": "^2.6.11"
}
}
EDIT: Solution:
Removed nodejs and npm, deleted all associated folders, and reinstalled nodejs and npm by using nvm (node version manager). I chose the current version of node (14 as of this writing).
Removed node_modules and package-lock.json within the project.
Ran npm install (in project folder)
Installed vue-cli globally: npm install -g #vue/cli
When builds failed, followed prompts to install missing dependencies.
FINALLY it worked.
facing the same issue with nuxt.js, audit does not mention anything regarding this. Howto find the npm module? String steam is not present, likely obfuscated as bytearray or else
On Ubuntu 20.04, upgrading to node 12.18.3 and running npm rebuild node-sass solved the problem for me.
Make sure you use the latest dependencies in your package.json (manually check on npmjs.com or your npm registry)
Delete the entire node modules dir and package-lock.json, and then running npm install helped me.
I've started working on a project in my new workplace .
It's react project and has a package.json which has the dependencies like the one below.
"dependencies": {
"babel-polyfill": "^6.26.0",
"gsap": "^2.0.2",
"lodash": "^4.17.11",
"mobx": "^5.1.2",
"mobx-react": "^5.4.2",
"react": "^16.5.2",
"react-dom": "npm:#hot-loader/react-dom",
"react-draggable": "^3.0.5",
"react-hot-loader": "^4.8.3",
"react-id-swiper": "^1.6.9",
"react-resize-detector": "^4.0.5"
},
For react-dom, the version is specified as "npm:#hot-loader/react-dom".
What does 'npm:' means?
My coworker guess it's the way that only yarn uses.
I wonder about this naming as 'npm install' doesn't install react-dom, but 'yarn install' install it.
Thank you for your help!
I think this dependency is installed wrong it should be:
react-dom#npm:#hot-loader/react-dom
It's a yarn name resolution, so #hot-loader/react-dom would be installed instead of react-dom#npm