Мне была поручена поддержка и дальнейшее развитие одного из наших продуктов. Я довольно новичок в Webpack и VueJS, что дает мне некоторые сложности. Мне сообщили, что, когда проект был создан, они использовали этот шаблон: https://github.com/vuejs-templates/pwa
Шаблон PWA абсолютно в порядке и работает в течение многих лет. Проект не был поддержан, и поэтому версии были ... далеко позади ... по меньшей мере. Я уже несколько дней пытаюсь обновить пакеты при установке, которые повышают версии на нескольких модулях NodeJS и выше. И в этом заключается моя проблема. Потому что теперь, когда я пытаюсь запустить свое приложение npm run dev, я получаю довольно существенный журнал ошибок, брошенный мне в лицо. То же самое, когда я пытаюсь построить решение.
ERROR in ./src/components/formelements/standard/checkbox.vue (./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-c25c44de","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/checkbox.vue) Module build failed (from ./node_modules/vue-loader/lib/style-compiler/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\src\components\formelements\standard\checkbox.vue:1:1: Unknown word
> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")(false); | ^
2 | // imports
3 |
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\webpack\lib\NormalModule.js:313:13
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\vue-loader\lib\style-compiler\index.js:57:7
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
@ ./src/components/formelements/standard/checkbox.vue (./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-c25c44de","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/checkbox.vue) 4:14-374 14:3-18:5 15:22-382
@ ./src/components/formelements/standard/checkbox.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/shared/forms/form-registration2.vue
@ ./src/components/shared/forms/form-registration2.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/registration.vue
@ ./src/pages/registration.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./src/components/formelements/standard/radiobutton.vue (./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-122ccae2","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/radiobutton.vue) Module build failed (from ./node_modules/vue-loader/lib/style-compiler/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\src\components\formelements\standard\radiobutton.vue:1:1: Unknown word
> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")(false); | ^
2 | // imports
3 |
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\webpack\lib\NormalModule.js:313:13
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\vue-loader\lib\style-compiler\index.js:57:7
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
@ ./src/components/formelements/standard/radiobutton.vue (./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-122ccae2","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/radiobutton.vue) 4:14-377 14:3-18:5 15:22-385
@ ./src/components/formelements/standard/radiobutton.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/shared/forms/form-registration2.vue
@ ./src/components/shared/forms/form-registration2.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/registration.vue
@ ./src/pages/registration.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./src/components/formelements/standard/textbox-date.vue (./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-ec7a872a","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/textbox-date.vue) Module build failed (from ./node_modules/vue-loader/lib/style-compiler/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\src\components\formelements\standard\textbox-date.vue:1:1: Unknown word
> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")(false); | ^
2 | // imports
3 |
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\webpack\lib\NormalModule.js:313:13
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\vue-loader\lib\style-compiler\index.js:57:7
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
@ ./src/components/formelements/standard/textbox-date.vue (./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-ec7a872a","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/formelements/standard/textbox-date.vue) 4:14-378 14:3-18:5 15:22-386
@ ./src/components/formelements/standard/textbox-date.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/shared/forms/form-registration2.vue
@ ./src/components/shared/forms/form-registration2.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/registration.vue
@ ./src/pages/registration.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./src/components/shared/fileupload/fileupload.vue (./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/shared/fileupload/fileupload.vue) Module build failed (from ./node_modules/vue-loader/lib/style-compiler/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\src\components\shared\fileupload\fileupload.vue:1:1: Unknown word
> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")(false); | ^
2 | // imports
3 |
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\webpack\lib\NormalModule.js:313:13
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\vue-loader\lib\style-compiler\index.js:57:7
@ ./src/components/shared/fileupload/fileupload.vue (./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/shared/fileupload/fileupload.vue) 4:14-350 14:3-18:5 15:22-358
@ ./src/components/shared/fileupload/fileupload.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/registration.vue
@ ./src/pages/registration.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./src/pages/install.vue (./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-73cce46d","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/install.vue) Module build failed (from ./node_modules/vue-loader/lib/style-compiler/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\src\pages\install.vue:1:1: Unknown word
> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(false); | ^
2 | // imports
3 |
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\webpack\lib\NormalModule.js:313:13
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\MAND\workspace\Azure\Kollecto-StandardApp\node_modules\vue-loader\lib\style-compiler\index.js:57:7
@ ./src/pages/install.vue (./node_modules/vue-loader/node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-73cce46d","scoped":true,"sourceMap":true}!./node_modules/css-loader!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/install.vue) 4:14-349 14:3-18:5 15:22-357
@ ./src/pages/install.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in ./node_modules/bulma/bulma.sass 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "utf-8"
| /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */
| @import "sass/utilities/_all"
@ ./src/main.js 13:0-26
@ multi ./build/dev-client ./src/main.js
ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* required styles */
|
> .leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,
@ ./src/main.js 36:0-35
@ multi ./build/dev-client ./src/main.js
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.37 MiB 0
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 6.22 KiB {0} [built] [1] ./node_modules/lodash/lodash.js 528 KiB {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
Версия веб-пакета (насколько мне и моим коллегам известно) была повышена с версии 3.16 до 4.x
Я потеряна теперь не уверен что делать. Я удалил package-lock.js и node_modules и переустановил все без удачи. и я уверен, что столкнусь с множеством других проблем. Пожалуйста помоги. Это мой package.json
{
"name": "kollectoui",
"version": "1.0.0",
"description": "Kollecto",
"author": "",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"ajv": "^6.10.2",
"axios": "^0.18.1",
"babel-polyfill": "^6.26.0",
"bulma": "^0.6.2",
"enhanced-extract-text-webpack-plugin": "^4.0.1",
"es6-promise": "^4.2.8",
"exif-js": "^2.3.0",
"exif-orientation-image": "^1.0.1",
"install": "^0.13.0",
"jquery": "^3.4.1",
"jszip": "^3.2.2",
"leaflet": "^1.5.1",
"lightbox2": "^2.11.1",
"localforage": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"mongodb": "^3.3.3",
"motion-ui": "^1.2.3",
"node-sass": "^4.11.0",
"npm": "^6.12.0",
"proj4": "^2.5.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"svg-sprite-loader": "^3.9.2",
"svgo": "^1.3.0",
"svgo-loader": "^2.2.1",
"vue": "^2.6.10",
"vue-i18n": "^8.15.0",
"vue-router": "^3.1.3",
"vuejs-datepicker": "^0.9.29",
"vuejs-logger": "^1.10.2",
"vuex": "^3.1.1",
"webpack-dev-middleware": "^3.7.2",
"zangodb": "^1.0.7"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^7.1.5",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.2.0",
"chalk": "^2.4.2",
"chromedriver": "^2.46.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.1",
"cross-spawn": "^5.1.0",
"css-loader": "1.0.1",
"cssnano": "^4.1.10",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.17.1",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.20.0",
"inject-loader": "^4.0.1",
"karma": "^4.4.1",
"karma-coverage": "^2.0.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^4.0.2",
"mini-css-extract-plugin": "^0.8.0",
"mocha": "^4.0.1",
"nightwatch": "^1.2.4",
"opn": "^5.5.0",
"optimize-css-assets-webpack-plugin": "^3.2.1",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.15",
"rimraf": "^2.7.1",
"selenium-server": "^3.141.59",
"semver": "^5.7.1",
"shelljs": "^0.7.8",
"sinon": "^4.5.0",
"sinon-chai": "^2.14.0",
"sw-precache-webpack-plugin": "^0.11.5",
"uglify-es": "^3.3.10",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^0.6.2",
"vue-loader": "^14.2.2",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^3.9.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"engines": {
"node": ">= 12.11.1",
"npm": ">= 6.11.3"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Было бы мне проще начать все заново и создать новое приложение с нуля с правильной конфигурацией? Или это как-то поправимо? Если вам понадобятся какие-либо дополнительные настройки или информация, пожалуйста, дайте мне знать.
Follow
Я нашел фрагмент кода, который вызвал это в build/utils.js
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
// if removed the build fails and I have no idea why....
if (options.extract) {
return MiniCssExtractPlugin.loader({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
ThisРаньше это было:
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
Компилятор во время сборки (не dev) жалуется, что в моем build/utils.js теперь есть ошибка, которая гласит:
..\workspace\Azure\Kollecto-StandardApp\build\utils.js:41
return MiniCssExtractPlugin.loader({
^
TypeError: MiniCssExtractPlugin.loader is not a function
Что быбыть эквивалентом этого в моем обновлении от webpack 3 -> 4 к этой функции? Поскольку extract-text-webpack-plugin устарела.
ПРИМЕЧАНИЕ - Я обнаружил, что одна из моих ошибок заключалась в том, что я спросил в обоих build/utils.js и build/webpack.base.conf.js для sass/scss загрузчиков. Поэтому я перекомментировал две строки в build/utils.js, которые гласили:
sass: generateLoaders('sass', sassOptions),
scss: generateLoaders('sass'),
, и добавил это правило в build/webpack.base.conf.js:
{
test: /\.(sass|scss)$/,
loader: ['css-loader', 'sass-loader']
},
, что, в свою очередь, вызвало проблемус узловым модулем bulma, но это исправило обновление с версии ^0.6.2 до ^0.8.0