Webpack条目文件中的进口顺序重要吗？
提问于 2018-04-22 16:26:12
我遇到了一个问题，我有两个组件要导入到我的入口文件"index.js“中--这取决于我将哪个组件作为第一个导入，第二个将不起作用，并且我得到一个错误”目标容器不是DOM元素“。我遗漏了什么？为什么Proforma组件只有在index.js中是第一个时才会呈现，为什么当我浏览到Proforma组件加载的页面时(当它成功加载并且控制台仍然有上述错误时)，为什么应用程序组件无论如何都会尝试加载？
index.js文件如下所示：
import App from "./components/App.js";
import Proforma from "./components/property_detail/proforma.js";在这种情况下，显示App.js的页面可以工作，但仍然尝试加载形式，尽管该元素没有出现在App.js代码中的任何地方。当我更改元素的顺序并加载包含"proforma.js“的页面时，也会发生同样的情况，这只是：
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"
}
}
]
}
};
回答 1
Stack Overflow用户
发布于 2018-04-22 16:29:54
您的proforma组件文件和app.js/index.js文件中是否有ReactDom.render？这可能会引起问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49968191
复制相关文章
腾讯云开发者
