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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

Q&A

0回答

698閲覧

webpackでビルドする際のエラー、"Module parse failed /node_modules/babel-loader/lib/index.js" と出た

ban_ban

総合スコア17

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

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

0グッド

0クリップ

投稿2018/05/07 10:32

ReactJSを使ったアプリケーションを作っていて、webpackをいじっていたのですが、上記のようなエラーが出て、問題を解決できておりません。下記がエラーメッセージと関係ありそうなファイルの内容になります。

RROR in ./app/app.js Module parse failed: /node_modules/babel-loader/lib/index.js?{"presets":["babel-preset-es2015","babel-preset-stage-0","babel-preset-react"],"cacheDirectory":true,"plugins":["transform-function-bind","transform-decorators-legacy"]}! /app/app.js Unexpected token (115:12) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (115:12) at Parser.pp$4.raise (/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseExprList (node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22) at Parser.pp$3.parseSubscripts (node_modules/webpack/node_modules/acorn/dist/acorn.js:1741:35) at Parser.pp$3.parseExprSubscripts (node_modules/webpack/node_modules/acorn/dist/acorn.js:1718:17) at Parser.pp$3.parseMaybeUnary (node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseExpression (node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21) at Parser.pp$1.parseStatement (node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47) at Parser.pp$1.parseBlock (node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25) at Parser.pp$3.parseFunctionBody (node_modules/webpack/node_modules/acorn/dist/acorn.js:2105:24) at Parser.pp$1.parseFunction (node_modules/webpack/node_modules/acorn/dist/acorn.js:1065:10) at Parser.pp$3.parseExprAtom (node_modules/webpack/node_modules/acorn/dist/acorn.js:1810:19) at Parser.pp$3.parseExprSubscripts webpack/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseExprList (node_modules/webpack/node_modules/acorn/dist/acorn.js:2165:22) at Parser.pp$3.parseNew (node_modules/webpack/node_modules/acorn/dist/acorn.js:1927:52) at Parser.pp$3.parseExprAtom (node_modules/webpack/node_modules/acorn/dist/acorn.js:1816:19) at Parser.pp$3.parseExprSubscripts (node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)

.babelrc

{ "presets": ["es2015", "stage-0", "react"], "plugins": [ "tcomb", "transform-function-bind", ["transform-runtime", { "polyfill": false, "regenerator": true }], "transform-decorators-legacy" ] }

package.json のdevDependencies

"devDependencies": { "add-asset-html-webpack-plugin": "2.0.1", "babel-core": "^6.21.0", "babel-eslint": "^7.1.1", "babel-loader": "^6.2.10", "babel-plugin-tcomb": "^0.3.24", "babel-polyfill": "^6.23.0", "babel-plugin-react-intl": "2.3.1", "babel-plugin-react-transform": "2.0.2", "babel-plugin-styled-components": "1.1.4", "babel-plugin-transform-es2015-modules-commonjs": "6.24.1", "babel-plugin-transform-react-constant-elements": "6.23.0", "babel-plugin-transform-react-inline-elements": "6.22.0", "babel-plugin-transform-react-remove-prop-types": "0.4.5", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-function-bind": "^6.8.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-env": "1.5.1", "babel-preset-react": "6.24.1", "babel-preset-stage-0": "6.24.1", "babel-preset-es2015": "^6.18.0", "css-loader": "^0.26.1", "circular-dependency-plugin": "3.0.0", "coveralls": "2.13.1", "tcomb": "^3.2.16", "enzyme": "2.8.2", "eslint": "3.19.0", "eslint-config-airbnb": "15.0.1", "eslint-config-airbnb-base": "11.2.0", "eslint-import-resolver-webpack": "0.8.3", "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.0.3", "eslint-plugin-react": "7.0.1", "eslint-plugin-redux-saga": "0.3.0", "eventsource-polyfill": "0.9.6", "exports-loader": "0.6.4", "file-loader": "^0.9.0", "imports-loader": "^0.7.0", "html-loader": "0.4.5", "html-webpack-plugin": "2.29.0", "image-webpack-loader": "2.0.0", "jest-cli": "20.0.4", "lint-staged": "3.5.1", "ngrok": "2.2.9", "node-plop": "0.7.0", "null-loader": "0.1.1", "offline-plugin": "4.8.1", "plop": "1.8.0", "pre-commit": "1.2.2", "react-test-renderer": "15.6.1", "rimraf": "2.6.1", "shelljs": "0.7.7", "style-loader": "0.18.1", "less-loader": "^2.2.3", "url-loader": "0.5.8", "extract-text-webpack-plugin": "^1.0.1", "webpack": "^1.14.0", "webpack-bundle-analyzer": "^2.8.2", "webpack-dev-middleware": "1.11.0", "webpack-hot-middleware": "2.18.0" }

webpack.base.config.js

module.exports = { context: __dirname, entry: { app: ['babel-polyfill', './app/app'], }, output: { path: path.join(__dirname, '../server', 'build'), filename: '[name].js', chunkFilename: '[name].chunk.js', }, resolve: { root: [ path.join(__dirname, 'src'), path.join(__dirname, 'node_modules'), path.join(__dirname, 'bower_components'), ], extensions: ['', '.js', '.jsx', '.json', '.css', '.html', '.less'], unsafeCache: true, alias: { semantic: path.join(__dirname, '../server', 'web_root', 'public', 'semantic-ui', 'build', 'semantic.min.js'), }, }, module: { loaders: [{ test: /.(js|jsx)$/, loader: 'babel', include: path.join(__dirname, 'app'), query: { presets: [ 'babel-preset-es2015', 'babel-preset-stage-0', 'babel-preset-react', ], cacheDirectory: true, plugins: [ 'transform-function-bind', 'transform-decorators-legacy', ], }, }, { test: /.html$/, loader: 'html', }, { test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=assets/[name].[hash].[ext]', }, { test: /.less$/, loader: ExtractTextPlugin.extract('style', 'css!less?sourceMap'), }, { test: /.css$/, exclude: path.join(__dirname, 'src'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap'), }, { test: /.json$/, loader: 'json', }], noParse: [/semver.browser.js$/, /semantic.*js$/], }, plugins: [ new ExtractTextPlugin('[name].css'), new BundleAnalyzerPlugin(), // Ignore all locale files of moment.js new webpack.IgnorePlugin(/^./locale$/, /moment$/), ], };

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問