reactjs React导入导致无法解析模块说明符“react”

ie3xauqp  于 2023-03-08  发布在  React
关注(0)|答案(3)|浏览(199)

叫我愚蠢(我不会把它个人),但我没有使用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;
jfewjypa

jfewjypa1#

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

6za6bjd0

6za6bjd02#

当您像示例中那样使用标记加载React脚本时,React和ReactDOM对象已经可用。
为了使用Reacts组件和函数,你只需直接使用它们,而无需任何导入调用。你所需要做的就是在你的使用前加上“React.”,即:

React.Component
React.useState

等等。

nlejzf6q

nlejzf6q3#

我得到了同样的错误(如下),因为我错误地使用Live Server而不是Bundler(如Parcel或Webpack)运行我的应用程序。

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

只是想强调这一点,因为它抓住了我,并希望可以保存其他初学者一些时间找出为什么它不工作。

相关问题