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

组件。但我的控制台出现错误：

发生什么事了？

Answer 1

该错误告诉您导入不正确。这是您必须添加的代码：

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

这是不正确的，因为您正在导出为默认导出，而不是命名导出。检查这一行：

export default Home;

您正在导出作为默认值，而不是作为名称。因此，像这样导入

Home

：

import Home from './layouts/Home';

注意没有大括号。进一步阅读

import

和

export

。

Answer 2

使用

import Home from './layouts/Home'

而不是

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

从主页删除

{}

Answer 3

这是您混淆了 default 导出和 named 导出的情况。

在处理

named

导出时，如果您尝试导入它们，您应该使用大括号，如下所示，

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

在您的情况下，主页已导出为默认主页。当您没有指定某段代码的特定名称时，这是将从模块导入的代码。当您导入并省略大括号时，它将在您导入的模块中查找默认导出。所以你的导入应该是，

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

一些参考资料：

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

Answer 4

我刚刚遇到此错误消息（升级到 nextjs 9 后，一些转译的导入开始出现此错误）。我设法使用这样的语法修复它们：

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

Answer 5

我们也可以使用

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

在class关键字之前使用export关键字。

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

默认

 import Home from './layouts/Home'; 

默认导出类别

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

两种情况都不需要写

export default Home;

下课后。

Answer 6

将

export { Home };

放在 Home.js 文件的末尾

Answer 7

虽然听起来很疯狂，但我花了将近一个小时来解决类似的问题，重新启动本地主机并自行恢复。可笑，但重启就能解决一切。 对我来说，有问题的组件是注销。

我导入如下：

import {Logout} from './components';

通过此定义注销组件

export default Logout

Answer 8

如果您使用[电子邮件受保护]，这不是您的错，只是构建出现了问题。恢复到 [电子邮件受保护] 将解决您的问题

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};

Answer 10

这就是解决方案：

• 转到您的文件 Home.js
• 确保在文件末尾像这样导出文件：

export default Home;