ReactJS模块构建失败：SyntaxError：意外的令牌 - ReactDOM.render [英] ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

问题描述

为什么我在下面收到此错误？我的陈述 ReactDOM.render（< App />，container）; 是100％合法代码。

我的github回购：

app.js文件

 导入响应来自'react'
导入ReactDom来自'react-dom'
导入应用程序来自'components / App'
 
要求（ '的index.html'）; 
 
 //创建app 
 const container = document.getElementById（'app-container'）; 
 
 //渲染app 
 ReactDOM.render（< App />，container）; 
  

组件/应用程序文件

  import来自'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 = {
条目：[
'./src/app.js'
]，
输出：{
 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'，
}，
]， 
}，
插件：[
 new webpack.NamedModulesPlugin（），
] 
}; 
  

解决方案

将此用作您的webpack配置文件

  const webpack = require（'webpack'）; 
 const path = require（'path'）; 
 
 module.exports = {
条目：[
'./src/app.js'
]，
输出：{
 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'，'反应'] 
} 
}，
]，
}，
插件：[
 new webpack.NamedModulesPlugin（） ，
] 
}; 
  

您缺少预设

Why am I getting this error below? My statement ReactDOM.render(<App />, container); is 100% legit code.

My github repo: https://github.com/leongaban/react_starwars

The app.js file

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);

The components/App file

import React from 'react'

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

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

    </div>
  </div>;

export default App; 

My 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(),
]
};

解决方案

Use this as your webpack config file

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(),
]
};

You are missing the presets

这篇关于ReactJS模块构建失败：SyntaxError：意外的令牌 - ReactDOM.render的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！