叫我愚蠢(我不会把它个人),但我没有使用React超过3年,我的脑细胞一定已经死亡。
我收到错误:
localhost/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
我确信这与我在Chrome中如何使用导入有关。
- 索引. html**
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="Main.js"></script>
</body>
</html>
- 主文件. jsx**
import React from 'react'
import ReactDOM from 'react-dom'
import App from 'App'
ReactDOM.render(
<App />,
document.getElementById("root")
);
- 主要. js**
(在babel cli之后,带有React预设)
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
- App. jsx**(位于与Main. jsx相同的文件夹中(babel在与Main.js相同的文件夹中创建App.js)
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
}
export default App;
3条答案
按热度按时间jfewjypa1#
由于您没有使用Webpack这样的模块捆绑器,因此可以丢弃reactimport语句(它应该已经由上面的基于标记的导入全局公开),将
App
导入转换为绝对('/'
)或相对路径('./'
,'../'
)并包含文件扩展名。要支持与ES6模块不兼容的旧浏览器,请使用script标记导入它。或者将整个代码移动到单个文件中。6za6bjd02#
当您像示例中那样使用标记加载React脚本时,React和ReactDOM对象已经可用。
为了使用Reacts组件和函数,你只需直接使用它们,而无需任何导入调用。你所需要做的就是在你的使用前加上“React.”,即:
等等。
nlejzf6q3#
我得到了同样的错误(如下),因为我错误地使用
Live Server
而不是Bundler
(如Parcel或Webpack)运行我的应用程序。只是想强调这一点,因为它抓住了我,并希望可以保存其他初学者一些时间找出为什么它不工作。