ReactDOM.render（）不工作 - 您可能需要一个合适的加载程序来处理此文件类型

Question

我一直在Udemy.com上关注课程，并遇到无法修复的问题。我已经安装了webpack以及babel，并且再次按照说明再次检查我没有犯错。

当尝试运行这段代码在我index.js：

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

ReactDOM.render(
    <div>HELLO!</div>, document.getElementById('root') 
); 

我得到的错误：

ERROR in ./app/index.js Module parse failed: /Users/Kyle/Documents/React Native Workspace/es6Project/app/index.js Unexpected token (5:2) You may need an appropriate loader to handle this file type.

| 
| ReactDOM.render(
| <div>HELLO!</div>, document.getElementById('root') 
|); 
| 
@ multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js 

这里是我的package.json：

{ 
    "name": "es6Project", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "babel": { 
    "presets": [ 
     "es2015", 
     "es2016", 
     "es2017", 
     "react" 
    ] 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-polyfill": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-es2016": "^6.24.1", 
    "babel-preset-es2017": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "react": "^16.0.0", 
    "react-bootstrap": "^0.31.3", 
    "react-dom": "^16.0.0", 
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.9.1" 
    } 
} 

这里是我的webpack.config.js：

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

module.exports = { 
    entry: ['./app/index.js'], 
    output: { 
    path: __dirname + '.build', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     module: { 
      loaders: [ 
      { 
       loader: 'babel-loader', 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       query: { 
       presets: ['es2015', 'react'] 
       } 
      } 
      ] 
     } 
     } 
    }) 
    ], 
    devServer: { 
    port: 3000, 
    contentBase: './build', 
    inline: true 
    } 
} 

Answer 1

检查您的应用程序在何处呈现您的应用程序。 检查你的html文件。你已经返回的代码是很好的。

请到thorugh reactjs教程点

https://www.tutorialspoint.com/reactjs/reactjs_overview.htm

Answer 2

你的WebPack配置是错误的。您收到的错误与JSX有关，由于配置错误而无法分析。

另外，由于您正在创建一个新项目，您为什么要使用plugin其目的是从webpack 1.x版本迁移到2.x？

如果您使用的WebPack版本2.x修改module.exports包含：

module: { 
    rules: [ 
     { 
      test: /\.(js)$/, 
      use:[{ 
        loader: 'babel-loader', 
        query: { 
         compact: false, 
         presets: [["es2015", {"modules": false, "loose" : true}], 'react'] 

        } 
       }] 
     } 
    ] 
}