のWebPACKは、これは私が（私はセキュリティ上の理由から、ファイルパスの一部を削除）を取得エラーメッセージですJSX

Question

のコンパイルに失敗します。

ERROR in ./react-components/MyComponent.js 
Module parse failed: /home/vagrant/src/***/react- 
components/MyComponent.js Unexpected token (6:6) 
You may need an appropriate loader to handle this file type. 
| render() { 
|  return (
|  <div> 
|   <p>FooBar: {this.props.fooBar}</p> 
|   <p>Baz: {this.props.baz}</p> 
@ ./client/app/app.module.js 52:19-64 
@ ./client/app/index.js 

今、私がやろうとしているすべてはちょうどできるようにすることですAngular 1.Xプロジェクトの内部に住むReactコンポーネント

webpack.make.js：これはWebPACKのコンフィグがどのように見えるかです

config.module = { 
    rules: [{ 
     // JS LOADER 
     // Reference: https://github.com/babel/babel-loader 
     // Transpile .js files using babel-loader 
     // Compiles ES6 and ES7 into ES5 code 
     test: /\.js$/, 
     use: [{ 
      loader : 'babel-loader', 
      options : { 
       shouldPrintComment(commentContents) { 
        // keep `/*@ngInject*/` 
        return /@ngInject/.test(commentContents); 
       }, 
       plugins : TEST ? 
        [[ 'istanbul', { 'exclude' : [ '**/*.spec.js'] }]] 
        : [], 
       presets : ['es2015', 'react', 'stage-0'] 
      } 
     }], 
     include: [ 
      path.resolve(__dirname, 'client/') 
     ] 
    },{ 
     // ASSET LOADER 
     // Reference: https://github.com/webpack/file-loader 
     // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output 
     // Rename the file using the asset hash 
     // Pass along the updated reference to your code 
     // You can add here any file extension you want to get copied to your output 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/, 
     loader: 'file-loader' 
    }, { 

     // HTML LOADER 
     // Reference: https://github.com/webpack/raw-loader 
     // Allow loading html through js 
     test: /\.html$/, 
     loader: 'raw-loader' 
    }, { 
     // CSS LOADER 
     // Reference: https://github.com/webpack/css-loader 
     // Allow loading css through js 
     // 
     // Reference: https://github.com/postcss/postcss-loader 
     // Postprocess your css with PostCSS plugins 
     test: /\.css$/, 
     loader: !TEST 
      // Reference: https://github.com/webpack/extract-text-webpack-plugin 
      // Extract css files in production builds 
      // 
      // Reference: https://github.com/webpack/style-loader 
      // Use style-loader in development for hot-loading 
      ? ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        'css-loader', 
        { 
         // PostCSS 
         // Reference: https://github.com/postcss/autoprefixer-core 
         // Add vendor prefixes to your css 
         loader: 'postcss-loader', 
         options : { 
          plugins : [ 
           autoprefixer({browsers: ['last 2 version']}) 
          ] 
         } 
        } 
       ] 
      }) 
      // Reference: https://github.com/webpack/null-loader 
      // Skip loading css in test mode 
      : 'null-loader' 
    }, { 
     // SASS LOADER 
     // Reference: https://github.com/jtangelder/sass-loader 
     test: /\.(scss|sass)$/, 
     loader : ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
       'css-loader', 
       { 
        // PostCSS 
        // Reference: https://github.com/postcss/autoprefixer-core 
        // Add vendor prefixes to your css 
        loader: 'postcss-loader', 
        options : { 
         plugins : [ 
          autoprefixer({browsers: ['last 2 version']}) 
         ] 
        } 
       }, 
       { 
        loader : 'sass-loader', 
        options: { 
         outputStyle: 'compressed', 
         precision: 10, 
         sourceComments: false 
        } 
       } 
      ] 
     }), 
     include: [ 
      path.resolve(__dirname, 'client/app/app.scss') 
     ] 


    }, { 
     // Imports Loader 
     // This allows the CodeMirror json linter to find jsonlint, which it expects to be global 
     test: require.resolve('codemirror/addon/lint/json-lint'), 
     use: 'imports-loader?jsonlint=jsonlint-mod' 
    } 
    ] 
}; 

そして、ここで私の.babelrc次のとおりです。

{ 
    "presets": ["es2015", "react", "stage-3", "stage-0"] 
} 

私はstage-3とstage-0の両方を試してみたが、私はまだ同じを取得しますエラー。 npm経由でbabel-preset-reactをインストールしました。 JSファイルのJSXには何も問題はありません。これは、使用しているリポジトリのサンプルコードとして使用される単純なReactコンポーネントです。私は次にどこを見なければならないのか分かりません。

Answer 1

path.resolve(__dirname, 'react-components')を、問題のJSファイルが存在するincludesオブジェクトに追加するのを忘れました。