Question

询问什么似乎是一个非常常见的问题，但我在这里结束了我的智慧。我这个项目已经有一段时间了（几个星期），但回到它我很难过。我一直试图削减依赖关系和不必要的代码来找到罪魁祸首。

我明白这个错误意味着我可以在我的html之前加载React，但事实并非如此：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Funglr Ecommerce</title>
</head>
<body>
    <div id="app"></div>

    <script type="text/javascript" src="dist/admin.bundle.js"></script>
</body>
</html>

在设置项目的这个阶段，我不太确定如何正确调试项目。 'App'很简单：

import React from 'react';
import {render} from 'react-dom';

// import custom components

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

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

将发布我的各种配置文件，因为我怀疑这可能是罪魁祸首？：

 "dependencies": {
    "babel-runtime": "^6.26.0",
    "express": "^4.16.2",
    "express-graphql": "^0.6.11",
    "graphql": "^0.12.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "nodemon": "^1.14.3",
    "webpack": "^3.10.0"
  }


module.exports = {
entry: {
    service: './client/service/service.index.js',
    admin: './client/admin/admin.index.js'
},
output: {
    filename: '[name].bundle.js',
    path: __dirname + '/static'
},
module: {
    rules: [
        {
            test: /.js$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                    },
                },
            ],
        },
    ],
},

}

和.babelrc

{
    "presets": ["env", "react"]
}

我在这里缺少什么？

Answer 1

编辑webpack.config.js文件最终解决了问题。将加载器部分更改为以下内容似乎有效：

module: {
    rules: [
        {
            test: /\.jsx?/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
    ],
},

目标容器不是DOM元素 - 尝试了一切

1 个答案: