webpackでビルドの際によくわからないエラーが出る

Question

前提・実現したいこと

react-chartjs-2を使ってグラフを出そうとしたところ、
webpackでbuildした際にエラーが出ます。
自分で書いているtsxファイル内にエラーが出ているようには思えず、
エラーの原因、解決策を知りたいです。

発生している問題・エラーメッセージ

$ yarn build:prod
yarn run v1.22.17
$ webpack --mode=production --node-env=production && node client.js.Addtag.js
assets by status 152 KiB [cached] 1 asset
orphan modules 449 KiB [orphan] 10 modules
runtime modules 663 bytes 3 modules
modules by path ./node_modules/ 155 KiB
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/react/ 6.48 KiB 2 modules
  modules by path ./node_modules/react-dom/ 119 KiB 2 modules
  modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/react-toastify/dist/ReactToastify.css 14.7 KiB [built] [code generated]
modules by path ./src/ 458 KiB
  ./src/script.tsx + 10 modules 449 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./src/css/output.css 9.26 KiB [built] [code generated]

ERROR in ./src/script.tsx + 10 modules
Line 6993: Unexpected token ...
while analyzing module /Users/user/Desktop/my-prod/node_modules/chart.js/dist/chart.esm.js for concatenation
Error: Line 6993: Unexpected token ...
    at ErrorHandler.constructError (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:5012:22)
    at ErrorHandler.createError (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:5028:27)
    at Parser.unexpectedTokenError (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:1985:39)
    at Parser.throwUnexpectedToken (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:1995:21)
    at Parser.parseObjectPropertyKey (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2499:33)
    at Parser.parseObjectProperty (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2534:25)
    at Parser.parseObjectInitializer (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2602:35)
    at Parser.inheritCoverGrammar (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2285:37)
    at Parser.parsePrimaryExpression (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2354:38)
    at Parser.inheritCoverGrammar (/Users/user/Desktop/my-prod/node_modules/esprima/dist/esprima.js:2285:37)

webpack 5.69.1 compiled with 1 error in 6252 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

該当のソースコード

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const GasPlugin = require("gas-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const config = {
  entry: {
    client: "./src/script.tsx",
  },
  devtool: false,
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [new GasPlugin()],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
            },
          },
          "ts-loader",
        ],
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", { loader: "css-loader", options: { url: false } }],
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

module.exports = () => {
  if (isProduction) config.mode = "production";
  else config.mode = "development";
  return config;
};

{
  "name": "my-prod",
  "version": "1.0.0",
  "description": "",
  "main": "./src/script.ts",
  "scripts": {
    "build": "npm-run-all --serial delete:file build:css build:prod move:file",
    "push": "clasp push",
    "delete:file": "rimraf -g dist/*.{js,html}",
    "move:file": "cpx \"src/**/*.html\" dist",
    "build:dev": "webpack --mode=development && node client.js.Addtag.js",
    "build:prod": "webpack --mode=production --node-env=production && node client.js.Addtag.js",
    "build:css": "tailwindcss -i ./src/css/input.css -o ./src/css/output.css",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "^7.17.2",
    "@google/clasp": "^2.4.1",
    "@types/google-apps-script": "^1.0.45",
    "@types/google.visualization": "^0.0.68",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.12",
    "@webpack-cli/generators": "^2.4.2",
    "babel-loader": "^8.2.3",
    "chart.js": "^3.7.1",
    "cpx": "^1.5.0",
    "css-loader": "^6.6.0",
    "gas-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^5.5.0",
    "npm-run-all": "^4.1.5",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-toastify": "^8.2.0",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.23",
    "ts-loader": "^9.2.7",
    "typescript": "^4.6.2",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  }
}

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "module": "es6",
    "target": "es2021",
    "allowJs": true,
    "jsx": "react",
    "typeRoots": [
      "node_modules/@types",
      "types"
    ],
    "outDir": "dist/script.js",
    "moduleResolution": "node"
  },
}

試したこと

最初はts-loaderのみでやっていましたが今回のエラーが発生。
色々検索していく中でbabelを使うと解決...のような文言を見た気がしましたので、
babel-loaderも導入しましたが、結果は変わらず...

Comments

[AbeTakashi]

ぱっと見た感じでは第三者がエラーの原因がわかるような情報はないように思えます。なので、ちょっと面倒ではありますが、地道なデバッグでエラー箇所の特定をする方が良いと思います。必要最低限のソースコードでビルドして、それが問題なければちょっとずつ付け足して・・・みたいな方法もありです。

[sk-sora--ypi]

ありがとうございます。
チャートを使わなければビルドが通るので本当に原因がわからない状態です。。。
もう少し探ってみます。

Answer 1

もしやと思い、GASPluginからHtmlWebpackPluginを使用すると問題なくビルドが通りました。

- const GasPlugin = require("gas-webpack-plugin");
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
/*.省略 */
-  plugins: [new GasPlugin()],
+  plugins: [new HtmlWebpackPlugin()],