gpt4 book ai didi

reactjs - React 导入导致无法解析模块说明符 "react"

转载 作者:行者123 更新时间:2023-12-04 12:43:00 27 4
gpt4 key购买 nike

骂我笨(我不会当真),但我已经3年多没有使用REACT了,我的脑细胞肯定已经死了。

我收到错误:

localhost/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

我确定这与我在 Chrome 中使用导入的方式有关。

index.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>

Main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from 'App'


ReactDOM.render(
<App />,
document.getElementById("root")
);

Main.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;

最佳答案

由于你没有使用像 Webpack 这样的模块打包器,你可以放弃 react 导入语句(它应该已经被你上面基于标签的导入全局公开了),转换你的 App导入到绝对路径 ( '/' ) 或相对路径 ( './' , '../' ) 并包含文件扩展名。要支持与 ES6 模块不兼容的旧浏览器,请改为使用脚本标签导入它,或者将整个代码移动到单个文件中。

关于reactjs - React 导入导致无法解析模块说明符 "react",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55693992/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com