Home中不包含名为Home的导出项。

Question

我正在使用 create-react-app 开发，遇到了一个问题，报错如下：

Home 不包含名为 Home 的导出项。

以下是我设置的 App.js 文件内容：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

现在在我的layouts文件夹中，我有Home.js文件，它的设置如下：

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <p className="App-intro">
        Hello Man
      </p>
    )
  }
}

export default Home;

你可以看到，我正在导出Home组件。但是我在控制台中收到以下错误：

出了什么问题？

- Shadid

Answer 1

错误提示你导入方式不正确。这是需要添加的代码：

import { Home } from './layouts/Home';

这是错误的，因为您正在导出默认导出，而不是命名导出。请检查此行：

export default Home;

你正在导出默认值，而不是一个名称。因此，像这样导入 Home：

import Home from './layouts/Home';

注意，这里没有花括号。更多关于import和export的内容，请参阅相关文献。

- Andrew Li

---

或者你也可以进行命名导出。例如：export {Home}; - Abhinav Singi

@AbhinavSingi 是的，但将组件作为模块的默认导出是惯例并被广泛实践。而且没有其他的导出。 - Andrew Li

是的，完全正确@AndrewLi，我们也遵循相同的做法 :) - Abhinav Singi

@TheBlackBenzKid 如果你有多个输出，请使用命名输出。然后按照链接的 MDN 文档中所示使用该名称进行导入。 - Andrew Li

我能够使用Webpack中的import * as Dash from 'react-native-dash'修复警告信息。我怀疑这个实现的某些方面已经被弃用了。 - citadelgrad

Answer 2

使用

import Home from './layouts/Home'

而不是

import { Home } from './layouts/Home'

从主页中移除 {}

- Shekhar

---

这个问题的答案还能补充什么其他信息？ - Andrew Li

Answer 3

这是一个混淆了默认导出和命名导出的案例。

当处理命名导出时，如果想要导入它们，应该使用花括号，如下所示：

import { Home } from './layouts/Home'; // if the Home is a named export

在您的情况下，Home被导出为默认值。这是在您没有指定特定代码名称时从模块中导入的内容。当您导入并省略花括号时，它将在您导入的模块中查找默认导出项。因此，您的导入应该是：

import Home from './layouts/Home'; // if the Home is a default export

以下是相关参考文献：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

以上内容为ES6模块的导入和导出相关参考文献。

- prime

Answer 4

我刚遇到了这个错误信息（在升级到nextjs 9后，一些转译的导入开始出现了这个错误）。我使用以下语法成功修复了它们：

import * as Home from './layouts/Home';

- Mahdi

Answer 5

我们也可以使用 <\p>。

import { Home } from './layouts/Home'; 

在类关键字之前使用导出关键字。

export class Home extends React.Component{
    render(){
        ........
    }
}

默认情况下

 import Home from './layouts/Home'; 

默认导出类

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

两种情况都不需要写

export default Home;

下课后。

- Alimon Karim

Answer 6

将 export { Home }; 放在 Home.js 文件的末尾。

- Seemant Tripathi

---

在问题中提到他做了什么？ - phoenixstudio

Answer 7

听起来可能有点疯狂，但我花了将近一个小时解决类似的问题，重启本地主机后它自己就解决了。荒唐可笑，但是重新启动一切都可以解决。

对我来说，出问题的组件是退出登录。

我像这样导入： import {Logout} from './components'; 用这个定义来定义Logout组件 export default Logout

- Ajay Singh

Answer 8

这是解决方案：

• 进入你的文件 Home.js
• 确保在文件末尾像这样导出你的文件：

export default Home;

- igal neeman

---

这似乎不是一个好的答案，可能应该被踩。在发布另一个答案之前，请阅读如何回答。通常情况下，您也不应该回答已有许多其他答案的旧问题 - 除非您可以添加其他答案无法提供的新内容。同时请包含代码。 - finnmglas

Answer 9

您可以使用两种方法来解决这个问题，我认为最好的方法是将您代码中的导入部分替换为以下内容：

import Home from './layouts/Home'

或者将你的组件导出为非默认导出，也就是命名导出，像这样

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export {Home};

- Ehsan Ahmadi