Question

我遇到了一个问题，我有两个组件要导入我的输入文件＆＃34; index.js＆＃34; - 取决于我作为第一个导入，第二个将无法工作，我得到一个错误＆＃34;目标容器不是DOM元素。＆＃34;我错过了什么？为什么Proforma组件只有在它首先出现在index.js中时才会呈现，以及当我浏览到Proforma组件加载的页面时（当它成功加载并且控制台仍然存在时），为什么App组件会尝试加载有上述错误）？

index.js文件如下所示：

import App from "./components/App.js";
import Proforma from "./components/property_detail/proforma.js";

在这种情况下，显示App.js的页面可以正常工作 - 但仍尝试加载形式，尽管该元素没有出现在App.js代码中的任何位置。当我更改元素的顺序并加载包含＆＃34; proforma.js＆＃34;的页面时，也会发生同样的情况，这只是：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Proforma extends React.Component {
    render() {
        return (
            <p>Proforma Page</p>
        );
    }
}

ReactDOM.render(
    <Proforma />,
    document.getElementById('proforma')
);

应该呈现Proforma组件的模板页面：

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static './css/bulma/bulma.css' %}">
  <title>Test Proforma  </title>
</head>
<body>
  <section class="section">
    <div class="container">
          <div id="proforma"><!-- React --></div>
    </div>
  </section>
{% load static %}
<script src="{% static 'frontend/main.js' %}"></script>
</body>

</html>

为了更好地衡量，package.json文件和webpack.config看起来像：

我用这个构建文件：的package.json

{
    "main": "index.js",
    "scripts": {
    "dev": "webpack --mode development 
    ./simple_proforma_react/frontend/src/index.js --output 
    ./simple_proforma_react/frontend/static/frontend/main.js",
    ....
}

webpack.config.js

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: "babel-loader"
            }
          }
        ]
    }
};

Answer 1

您的形式组件文件以及app.js / index.js文件中是否有ReactDom.render？这可能会导致问题

Webpack条目文件中的导入顺序是否重要

1 个答案: