質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

sk-sora--ypi
sk-sora--ypi

総合スコア524

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

560閲覧

投稿2022/03/03 01:11

編集2022/03/03 04:18

前提・実現したいこと

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

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

shell

$ 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.

該当のソースコード

JavaScript:webpack.config.js

// 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; };

JSON:package.json

{ "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" } }

JSON:tsconfig.json

{ "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も導入しましたが、結果は変わらず...

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

AbeTakashi

2022/03/03 02:44

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

2022/03/03 03:34

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Yarn

Yarnは、Facebook/Exponent/Google/Tildeが開発したJavaScriptのパッケージマネージャ。npmよりもインストールが速く、厳密にモジュールのバージョンを固定できるなど、npmの問題を解決。npmと互換性があり、同じpackage.jsonを使用できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。