ReactJS模块构建失败：SyntaxError：意外令牌 - ReactDOM.render

为什么我会在下面看到这个错误？我的声明ReactDOM.render(<App />, container);是100％合法代码。ReactJS模块构建失败：SyntaxError：意外令牌 - ReactDOM.render

我的GitHub库：https://github.com/leongaban/react_starwars

的app.js文件

import react from 'react' 
import ReactDom from 'react-dom' 
import App from 'components/App' 

require('index.html'); 

// Create app 
const container = document.getElementById('app-container'); 

// Render app 
ReactDOM.render(<App />, container);

组件/应用程序文件

import React from 'react' 

const App =() => 
    <div className='container'> 
    <div className='row'> 

    </div> 
    <div className='row'> 

    </div> 
    </div>; 

export default App;

我webpack.config

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
entry: [ 
    './src/app.js' 
], 
output: { 
    path: path.resolve(__dirname, './build'), 
    filename: 'app.bundle.js', 
}, 
module: { 
    loaders: [ 
    { 
     test: /\.html$/, 
     loader: 'file-loader?name=[name].[ext]', 
    }, 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }, 
    ], 
}, 
plugins: [ 
    new webpack.NamedModulesPlugin(), 
] 
};

来源

2017-05-30 Leon Gaban

'ReactDOM.render（，集装箱）;'是无效的JS。你只能使用一个内部文件.JSX。 – xDreamCoding

@xDreamCoding只要将JSX转换为纯JS，就可以在JS文件中使用它... – Li357

您会希望REGEX用于加载程序测试，同时还包含.js扩展名和.jsx扩展名。它可能看起来像这样：'''/ \。（js | jsx）$ /'''，这将确保Webpack传输app.js文件以及所有源代码。 –

使用此为您的WebPack配置文件

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    entry: [ 
     './src/app.js' 
    ], 
    output: { 
     path: path.resolve(__dirname, './build'), 
     filename: 'app.bundle.js', 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.html$/, 
       loader: 'file-loader?name=[name].[ext]', 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 
    ], 
}, 
plugins: [ 
    new webpack.NamedModulesPlugin(), 
] 
};

你缺少预置

来源

2017-05-30 16:31:09 Julien

谢谢！就是这样......我正在从一个较旧的项目中学习一个教程。我的新React项目工作正常，所以它是我使用的旧的过时的webpack.config。就像其他人所说的，我错过了一些我的进口资本。谢谢！我用这个更现代化的webpack.config修复了这个应用程序，现在它重新命名了我的导入程序。 3分钟！ –

尝试添加resolve属性为您的WebPack配置文件：

resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loaders: ["babel-loader"] 
      } 
     ] 
    }

来源

2017-05-30 16:30:40

这不是问题。 Webpack默认已经解析了.js。 – Li357

安装通天预置 - 对于jsx语法的反应。

npm install babel-preset-react

预设

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

来源

2017-11-21 11:32:08 Sridhar

ReactJS模块构建失败：SyntaxError：意外令牌 - ReactDOM.render

回答

相关问题