I'm having trouble using an NPM package in the Shopware Administration.I'm trying to use Chart.js, and it's not working. I followed the instructions from the Shopware documentation with the missionlog package, but I'm getting the following error:
ERROR in /var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration/node_modules/vue-chartjs/dist/index.js 198:37
Module parse failed: Unexpected token (198:37)
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
| const ref = shallowRef(null);
| const reforwardRef = (chartRef)=>{
> ref.value = chartRef?.chart;
| };
| expose({
ERROR in /var/www/html/custom/plugins/ShopwareWidgets/src/Resources/app/administration/node_modules/chart.js/dist/chart.js 567:17
Module parse failed: Unexpected token (567:17)
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
| };
| class DatasetController {
> static defaults = {};
| static datasetElementType = null;
| static dataElementType = null;
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! administration@1.0.0 build: `mode=production webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the administration@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /var/www/.npm/_logs/2023-07-11T09_21_34_527Z-debug.log
Here is the log file with additional information:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli '/var/www/.nvm/versions/node/v12.22.12/bin/node',
1 verbose cli '/var/www/.nvm/versions/node/v12.22.12/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm@6.14.16
3 info using node@v12.22.12
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle administration@1.0.0~prebuild: administration@1.0.0
6 info lifecycle administration@1.0.0~build: administration@1.0.0
7 verbose lifecycle administration@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle administration@1.0.0~build: PATH: /var/www/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/html/vendor/shopware/administration/Resources/app/administration/node_mod$
9 verbose lifecycle administration@1.0.0~build: CWD: /var/www/html/vendor/shopware/administration/Resources/app/administration
10 silly lifecycle administration@1.0.0~build: Args: [ '-c', 'mode=production webpack' ]
11 silly lifecycle administration@1.0.0~build: Returned: code: 2 signal: null
12 info lifecycle administration@1.0.0~build: Failed to exec build script
13 verbose stack Error: administration@1.0.0 build: `mode=production webpack`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (/var/www/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:314:20)
13 verbose stack at ChildProcess.<anonymous> (/var/www/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:314:20)
13 verbose stack at maybeClose (internal/child_process.js:1022:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid administration@1.0.0
15 verbose cwd /var/www/html/vendor/shopware/administration/Resources/app/administration
16 verbose Linux 5.15.90.1-microsoft-standard-WSL2
17 verbose argv "/var/www/.nvm/versions/node/v12.22.12/bin/node" "/var/www/.nvm/versions/node/v12.22.12/bin/npm" "run" "build"
18 verbose node v12.22.12
19 verbose npm v6.14.16
20 error code ELIFECYCLE
21 error errno 2
22 error administration@1.0.0 build: `mode=production webpack`
22 error Exit status 2
23 error Failed at the administration@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
My webpack.config.js file is as follows:
const { join, resolve } = require('path');
module.exports = () => {
return {
resolve: {
alias: {
'@chartjs': resolve(
join(__dirname, '..', 'node_modules', 'chart.js')
),
'@chartjsvue': resolve(
join(__dirname, '..', 'node_modules', 'vue-chartjs', 'dist')
)
}
}
};
}
My folder structure looks like this:
src
|- Resources
|- app
|- administration
|- build
|- webpack.config.js
|- node_modules
|- src
|- package-lock.json
|- package.json
Could someone please help me figure out why I'm getting this error and how to resolve it? Thank you!
It appears that you have to configure the babel-loader manually. I'm not sure if this was always the case, as it is already configured in the "main" webpack.config.js of the administration and in theory the custom config should get merged into that.
Modifying your webpack.config.js like this should work though:
const { join, resolve } = require('path');
module.exports = () => {
return {
resolve: {
alias: {
'@chartjs': resolve(
join(__dirname, '..', 'node_modules', 'chart.js')
),
'@chartjsvue': resolve(
join(__dirname, '..', 'node_modules', 'vue-chartjs', 'dist')
)
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
compact: true,
cacheDirectory: true,
presets: [
'@babel/preset-env'
]
}
}
]
}
};
}