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

我得到错误：

错误在./app/index.js中 模块解析失败：/users/kyle/documents/react本地工作区/es6project/app/index.js意外令牌（5：2） 您可能需要适当的加载程序来处理此文件类型。

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

这是我的软件包。

{
  "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

您的WebPack配置是错误的。您遇到的错误是关于JSX的，由于配置错误而无法解析。

也是由于您正在创建一个新项目，为什么要使用其目的是从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']
                    }
                }]
        }
    ]
}

Answer 2

检查您的应用程序的应用程序。 检查您的html文件。您返回的代码很好。

请Go Thorugh ReactJS教程点

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