after using "vue create" command I get these versions in package.json:
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
Is that normal?
Here are the versions in vue ui:
imgur
#vue-cli latest version installed
It just normal, basically $sudo vue create generates latest version available
which in this case is 4.5.15, talking about the stable release it must be somewhere around 2.6.14
#vue.js #vuejs3
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 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.
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.
Package.json
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.5",
"moment": "^2.22.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"my-module-1": "file:../modules/my-module-1",
"my-module-2": "file:../modules/my-module-2",
"my-module-3": "file:../modules/my-module-3"
},
If I install dependencies, it is finished successfully. However, in map node_modules, my-module-x is a shortcut, which lead to the weird errors for babel-loader. If I copy-paste my modules into node modules, it is working very well. In previous versions of webpack, they were always copied. Now using webpack 3.6.0.
So, my question is: is there another way of defining dependency in package.json, or a plugin that copies the modules (from package.json) from another directory to node_modules without creating a shortcut.
"dependencies": {
"my-module": "file:a_map/my-module",
// a_map folder is on the same level as this package.json file
}
Works very well with settings:
Npm (6.12.0) and