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

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

ただいまの
回答率

90.51%

  • Node.js

    1861questions

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

  • React.js

    831questions

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

  • webpack

    241questions

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 329

ban_ban

score 9

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$/),
  ],
};
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • Node.js

    1861questions

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

  • React.js

    831questions

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

  • webpack

    241questions