Question

我正在研究一个将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： const webpack = require（“ 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;

如果您需要查看其他文件https://github.com/LaLauque/RealTimePlatform/tree/dev/rtsupport

，这是我的Github存储库

非常感谢

Answer 1

您的App组件在此处没有任何<socket-binding-group name="standard-sockets" default-interface="public" port-offset="${jboss.socket.binding.port-offset:0}"> ... <socket-binding name="http" port="${jboss.http.port:80}"/> <socket-binding name="https" port="${jboss.https.port:443}"/> ... </socket-binding-group>函数：https://github.com/LaLauque/RealTimePlatform/blob/dev/rtsupport/index.js

render() { ... }

只是渲染一些东西，然后检查它是否捆绑了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

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

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

1 个答案: