Shopware后台集成Chart.js NPM包失败，请求故障排查与解决

问题概述 #

在Shopware Administration插件中集成Chart.js时，执行构建命令出现模块解析错误，无法识别ES6+语法（可选链?.、类静态属性），导致构建失败。

错误日志 #

构建错误信息 #

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

npm完整日志 #

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 ]

当前配置 #

Webpack配置文件 (build/webpack.config.js) #

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')
                )
            }
        }
    };
}

插件目录结构 #

src
|- Resources
   |- app
      |- administration
         |- build
            |- webpack.config.js
         |- node_modules
         |- src
         |- package-lock.json
         |- package.json

问题原因 #

1. Node.js版本过低：当前使用Node.js v12.22.12，不支持可选链操作符(?.)、类静态属性赋值等ES2020+语法，而新版本的chart.js和vue-chartjs依赖这些语法。
2. Webpack未转译第三方包：Shopware默认Webpack配置不会转译node_modules目录下的文件，导致这些使用高版本ES语法的包无法被解析。

解决方法 #

方法一：降级依赖版本（最简单） #

选择兼容ES5/Node.js v12的chart.js和vue-chartjs版本，具体操作：

1. 修改插件administration/package.json中的依赖：

   "dependencies": {
     "chart.js": "^2.9.4",
     "vue-chartjs": "^3.5.1"
   }
   

2. 删除node_modules和package-lock.json：

   rm -rf node_modules package-lock.json
   

3. 重新安装依赖：

   npm install
   

4. 重新执行构建：

   npm run build
   

方法二：配置Webpack转译第三方包 #

如果需要使用最新版本的Chart.js，可修改Webpack配置让Babel转译vue-chartjs和chart.js：

1. 安装Babel相关依赖：

   npm install @babel/core @babel/preset-env babel-loader --save-dev
   

2. 修改build/webpack.config.js：

   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$/,
                       include: [
                           resolve(join(__dirname, '..', 'src')),
                           resolve(join(__dirname, '..', 'node_modules', 'vue-chartjs')),
                           resolve(join(__dirname, '..', 'node_modules', 'chart.js'))
                       ],
                       use: {
                           loader: 'babel-loader',
                           options: {
                               presets: ['@babel/preset-env']
                           }
                       }
                   }
               ]
           }
       };
   }
   

3. 重新执行构建：

   npm run build
   

方法三：升级Node.js版本 #

将Node.js版本升级到v14或更高（v14开始支持上述ES语法），但需确认Shopware版本与Node.js版本的兼容性，避免引发其他问题。

内容的提问来源于stack exchange，提问作者EntchenEric