Question

称我为愚蠢的人（我不会个人认为），但是我已经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之后，具有反应预设）

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;

Answer 1

由于您没有使用像Webpack这样的模块捆绑器，因此可以放弃react导入语句（它应该已经被上面基于标签的导入全局公开），将App导入转换为绝对路径（'/'或相对路径（'./'，'../'）并包括文件扩展名。要支持与ES6模块不兼容的旧版浏览器，请使用脚本标签分别导入它们，或将代码移到单个文件中。

Answer 2

当您使用示例中的标签加载React脚本时，React和ReactDOM对象已经可供您使用。

为了使用Reacts组件和功能，您可以直接使用它们而无需任何导入调用。您需要做的就是在您的使用前加上“ 反应”。

React.Component
React.useState

以此类推。

反应导入导致无法解析模块说明符“反应”

2 个答案: