使用 webpack 导入 React 组件时构建失败答案

【问题标题】：Build failure when importing React Components with webpack使用 webpack 导入 React 组件时构建失败
【发布时间】：2019-01-11 11:49:52
【问题描述】：

我正在开发一个将 React 和 Golang 集成在一起的项目。我做了第一次尝试，一切都按预期工作。但是现在我使用 webpack 和 babel-loader 来生成我的 bundle.js 并且程序崩溃了，我不知道为什么。

当我在 CLI 中键入 webpack 时，他向我发送此错误：

Hash: 80aee336cd31d922b888
Version: webpack 4.16.4
Time: 261ms
Built at: 2018-08-03 16:05:28
 1 asset
Entrypoint main = ./bundle.js
[0] ./index.js 647 bytes {0} [built] [failed] [1 error]
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (9:16)

   7 | }
   8 | 
>  9 | ReactDOM.render(<App />, document.getElementById('root'));
     |                 ^
  10 |

那是我的index.js导致失败

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App />, document.getElementById('root'));

我的package.json：

{
  "name": "rtsupport",
  "version": "1.0.0",
  "description": "Realtime support frontend",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "G Descamps <gauthier1.descamps@gmail.com>",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack-command": "^0.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "serve": "^9.4.0",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-command": "^0.4.1",
    "webpack-dev-server": "^3.1.5"
  }
}

还有我的webpack.config.js：常量 webpack = 要求（“webpack”）； const path = require("path");

let config= {
  entry:'./index.js',
  output: {
    path:__dirname,
    filename:'./bundle.js'
  },
  module: {
    rules:[{
      test:/\.js$/,
      exclude:/node_modules/,
      loader:'babel-loader' 
    }]
  }
}

module.exports= config;

这里是我的 Github Repo 如果你需要查看其他文件https://github.com/LaLauque/RealTimePlatform/tree/dev/rtsupport

非常感谢

【问题讨论】：

文件名：bundle.js
可以发一下目录结构吗？
你必须使用 react preset 以便 Babel 识别 JSX。
创建 .babelrc 文件并添加 {"presets": ["env", "react"]}

标签： javascript reactjs webpack babeljs

【解决方案1】：

您的 App 组件在此处没有任何 render() { ... } 函数：https://github.com/LaLauque/RealTimePlatform/blob/dev/rtsupport/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

class App extends React.Component {

}

ReactDOM.render(<App />, document.getElementById('root'));

只需渲染一些东西，然后检查它是否捆绑在你的 App 组件中添加 render 函数，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

class App extends React.Component {
  render() {
    return(
      <div>
        Hello
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

这个App 组件也将覆盖您从中导入的 App 组件

import App from './components/App.jsx';

确保每个组件都有特定的名称......

【讨论】：

还有，没有.babelrc