2017-04-24 104 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']  
       } 
      } 
     ] 
    } 
相关问题