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! [email protected] build: `mode=production webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build: CWD: /var/www/html/vendor/shopware/administration/Resources/app/administration
10 silly lifecycle [email protected]~build: Args: [ '-c', 'mode=production webpack' ]
11 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `mode=production webpack`
22 error Exit status 2
23 error Failed at the [email protected] 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'
]
}
}
]
}
};
}