无法解析 React.js 中的module（未找到）

IT技术 javascript reactjs
2021-04-05 05:57:10

我不敢相信我问的是一个明显的问题，但我仍然在控制台日志中收到错误消息。

控制台说它在目录中找不到module，但我已经检查了至少 10 次是否有错别字。无论如何，这是组件代码。

我想在 root 中呈现Header

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

这是Header组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

我已经检查了至少 10 次module在这个位置./src/components/header/header，它是（文件夹“header”包含“header.js”）。

然而，React 仍然抛出这个错误：

编译失败

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm test说同样的话。

6个回答

我们通常使用的方式import是基于相对路径。

.并且..类似于我们用来导航的方式，terminal例如cd ..退出目录并将mv ~/file .a 移动file到当前目录。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

在您的情况下，App.js在src/目录中而header.js在src/components. 要import你会怎么做import Header from './components/header'。这大致翻译为在我当前的目录中，找到包含头文件的组件文件夹。

现在，如果 from header.js，你需要import一些 from 的东西card，你会这样做。import Card from '../containers/card'. 这转换为，移出我的当前目录，查找具有卡片文件的文件夹名称容器。

至于import React, { Component } from 'react'，这不符合启动./或../或/因此节点将开始寻找在该modulenode_modules，直到以特定的顺序react被发现。更详细的理解，可以在这里阅读。

如果您使用 react-create-app 创建应用程序，请不要忘记设置环境变量：

NODE_PATH=./src

或将.env文件添加到您的根文件夹；

这是为我解决的问题。我添加了一个简单的App.cssto src/and did import App.css。但这给了我问题的错误。这个答案解决了这个问题。
2021-05-29 05:57:10
我以为我疯了，我的 React 应用程序没有按预期工作，我只是粘贴了这个环境变量，它就可以工作了……问题是为什么它没有附带这个文件……我不明白, 如果 react 花了十二分钟下载一堆依赖项，为什么它没有附带这些文件。
2021-06-01 05:57:10

删除了 package-lock.json 文件然后运行 

npm install

进一步阅读

非常感谢，我遇到以下错误：找不到module：无法解析... TextInput 和您的解决方案解决了它
2021-06-02 05:57:10

添加NODE_PATH为环境变量 in.env已弃用，并替换为添加"baseUrl": "./src", to compilerOptionsinjsconfig.json或tsconfig.json。

参考

就我而言，错误消息是

Module not found: Error: Can't resolve '/components/body

虽然一切都在正确的目录中。

我发现重命名body.jsx可以body.js解决问题！

所以我在加入这个代码webpack.config.js来解决jsx如js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

然后构建错误消失了！

其它你可能感兴趣的问题
上一篇Axios get in url 有效，但第二个参数作为对象却无效 下一篇将值添加到状态数组的最佳方法是什么