2017-04-24 112 views
0

我打這個問題我的建設上CLOUD9(Linux)的代碼的WebPack錯誤無法升級的WebPack到新版本之後解析JSX

>

http://localhost:8080/webpack-dev-server/ 
>   webpack result is served from/
>   content is served from ./ 
>   404s will fallback to /index.html 
>   Hash: 126cd080ff3d14fea7af 
>   Version: webpack 2.4.1 
>   Time: 657ms 
>    Asset  Size Chunks    Chunk Names 
>   bundle.js 3.77 kB  0 [emitted] main 
>   chunk {0} bundle.js (main) 1.05 kB [entry] [rendered] 
>    [0] ./src/index.js 1.02 kB {0} [built] [failed] [1 error] 
>    [1] multi ./src/index.js 28 bytes {0} [built] 
>   
>   ERROR in ./src/index.js 
>   Module build failed: SyntaxError: Unexpected token (29:16) 
>   
>   27 | } 
>   28 | 
>   > 29 | ReactDOM.render(<Provider store={store}> 
>    |    ^
>   30 |  <Router history={browserHistory}> 
>   31 |  <Route path="/" component={App}> 
>   32 |   <IndexRoute component={Welcome} /> 
>   
>   @ multi ./src/index.js 
>   webpack: Failed to compile. 

我得到這個錯誤。版本: "webpack": "^2.4.1", "webpack-dev-server": "^1.14.0" 不確定是什麼問題。這裏的WebPack配置:

module.exports = { entry: [ 
'./src/index.js' ], output: { 
path: __dirname, 
publicPath: '/', 
filename: 'bundle.js' }, module: { 
rules: [ 
    { 
    test: /\.jsx?$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
     options: { 
     presets: [ 
      ["es2015", { "modules": false }] 
     ] 
     } 
    }, 
    { 
    test: /\.scss$/, // regex to select only .css files 
    use: [ 
     { 
     loader: "style-loader" 
     }, 
     { 
     loader: "css-loader", 
     options: { 
     modules: true 
     } 
     }, 
     { 
     loader:"sass-loader" 
     } 
    ] // loader: 'style-loader!css-loader!sass-loader'   
    } 
] // the sass-loader converts the sass into css, the css-loader puts that css into the JS, the style-loader puts the javascript into the DOM. }, resolve: { 
extensions: [ '.js', '.jsx', '.css'], 
modules: [ 
    "node_modules" 
] }, devServer: { 
historyApiFallback: true, 
contentBase: './' } }; 

的問題是,薩斯裝載機是與舊版本的WebPack的(版本< 2)不兼容。

編輯 我現在用的是舊版本的WebPack 1.15.0的努力和已刪除薩斯裝載機,但仍然得到了同樣的問題

+0

你有哪些之前版本的WebPack? –

+0

它是webpack v 1.15.0(在devDependencies中) – JohnnyBizzle

+0

這個問題解決了嗎?我認爲你不是在你的第一條規則中測試.js,'test:/ \。jsx?$ /,'這可能會導致JSX的失敗 – eersteam

回答

0

我添加預設,它似乎是工作

科Webpage.config.js文件...

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015','stage-1']  
       } 
     ,{ test: /\.css$/, loader: 'style-loader!css-loader'} 
     } 
} 

我解析CSS的問題有所不同,但使用css-loader修復了這個問題。

+0

請在這裏輸入正確的語法。 –

0

嘗試重命名你的index.js到index.jsx

1

使用此在您的webpack.config.js

module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015','stage-1']  
       } 
      } 
     ] 
    } 
相關問題