的WebPack 2（測試版）未辦理JSX儘管設置有通天裝載機反應預設

我已經使用this guide from Webpack docs作爲參考來創建的WebPack配置與HMR，但我得到一個錯誤，說明我沒有JSX的加載器。我已經安裝了參考文獻中列出的所有必需軟件包。請注意，我也嘗試將我的Babel配置置於.babelrc首位，但它給了我相同的結果。的WebPack 2（測試版）未辦理JSX儘管設置有通天裝載機反應預設

ERROR in ./src/index.js 
Module parse failed: /Users/macbem/Documents/Coding/Back/typeahead-todo/src/index.js Unexpected token (10:2) 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
| <AppContainer> 
|  <App /> 
| </AppContainer>, 
@ multi main

我的配置文件是在項目的根，.js文件都在/src/。我的WebPack配置如下所示：

// webpack.config.js 
const { resolve } = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    './index.js' 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    context: resolve(__dirname, 'src'), 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: [ 
      { 
      loader: 'babel-loader', 
      options: { 
       "presets": [ 
        [ "es2015", { "modules": false } ], 
        "stage-2", 
        "react" 
       ], 
       "plugins": [ 
       "react-hot-loader/babel" 
       ] 
      } 
      }, 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      'css-loader?modules', 
      'postcss-loader', 
     ], 
     }, 
    ], 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NamedModulesPlugin() 
    ], 
};

此外，這是我的index.js文件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { AppContainer } from 'react-hot-loader'; 
// AppContainer is a necessary wrapper component for HMR 

import App from './components/App'; 

ReactDOM.render(
    <AppContainer> 
    <App /> 
    </AppContainer>, 
    document.getElementById('root') 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./components/App',() => { 
    const NewApp = require('./components/App').default 
    render(NewApp) 
    }); 
}

來源

2016-12-24 macbem

編輯：我只說了錯之前，忽略它，很多的東西在的WebPack 2改我所說的不再適用。

爲我自己試了一下，我想我發現了這個問題：鏈接中的webpack版本（beta.20）實際上並不支持「module.rules.use」語法。我並不確定哪個版本的測試版開始支持它，但beta.25似乎有效。

所以，如果你做一個npm uninstall webpack --save和npm install [email protected] --save，它應該（希望）所有的工作。

來源

2016-12-25 12:11:50 seisei

我忘了注意，我也試過這種方法，但它給了我相同的結果 - 我將編輯問題的詳細信息。 – macbem

對不起，忽略我以前的答案，請參閱編輯答案。 – seisei

非常感謝。我已經通過對文檔回購進行了這一更改並將其合併，所以其他人不必面對此問題。 – macbem

的WebPack 2（測試版）未辦理JSX儘管設置有通天裝載機反應預設

回答

相關問題