正文 

当前位置： 首页 > 源码 >

ReactJS 错误：每个模块只允许一个默认导出

     2023-02-23     214

关键词：

【中文标题】ReactJS 错误：每个模块只允许一个默认导出【英文标题】：ReactJS Error : Only one default export allowed per module 【发布时间】：2017-01-14 15:15:00 【问题描述】：

这个多重组件不起作用；

import React from 'react';
import ReactDOM from 'react-dom';
import  Router, Route, Link, browserHistory, IndexRoute   from 'react-router'

class App extends React.Component 
   render() 
      return (
         <div>
            <ul>
               <li><Link>Home</Link></li>
            </ul>

           this.props.children
         </div>
      )
   


export default App;

class Home extends React.Component 
   render() 
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   


export default Home;

ReactDOM.render((
   <Router history = browserHistory>
      <Route path = "/" component = App>
         <IndexRoute component = Home />
         <Route path = "home" component = Home />
      </Route>
   </Router>

), document.getElementById('app'))

它给出了以下错误；

./main.js 中的错误模块构建失败：语法错误： C:/Users/hasithay/Desktop/reactApp/main.js：只有一个默认导出 每个模块允许。

31 | 32 |

33 |导出默认主页； | ^ 34 | 35 |类关于扩展 React.Component 36 |渲染（）

@multi main webpack：bundle 现在有效

答案应该是三个可点击的链接，可用于在应用启动时更改路线。

【问题讨论】：

这个错误会告诉你到底出了什么问题。每个文件不能有多个默认导出。如果您要在不同的文件中导入某些内容，则只需要导出内容。如果您在同一个文件中访问组件，则无需导出任何内容。 【参考方案1】：

多个组件确实有效，但您需要导出带有名称的组件，并且您只能导出一个默认组件。

如下例所示，我将 App 组件导出为默认组件，将其他组件 Home、About、Contact 导出为命名组件。

对于命名组件，您需要使用那里的名称导入它们：

从 './App.jsx' 导入 Home,About,Contact；

导入默认组件：

从 './App.jsx' 导入应用程序；

import React from 'react';
import Link from 'react-router';


class App extends React.Component 
  render() 
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      this.props.children
      </div>
    )
  


export default App;



export class Home extends React.Component 
  render() 
    return (
      <h1>Home Page Content</h1>
    )
  




export class About extends React.Component 
  render() 
    return (
      <h1>About Page Content</h1>
    )
  



export class Contact extends React.Component 
  render()  
    return (
      <h1>Contact Page Content</h1>
    )
  


import React from 'react';
import ReactDOM from 'react-dom';
import Router, Route, browserHistory, IndexRoute from 'react-router';
import App from './App.jsx';
import Home,About,Contact from './App.jsx';

ReactDOM.render((
   <Router history = browserHistory>
      <Route path = "/" component = App>
         <IndexRoute component = Contact />
         <Route path = "home" component = Home />
         <Route path = "about" component = About />
         <Route path = "contact" component = Contact />
      </Route>
   </Router>

	
), document.getElementById('app'));

不要使用名称组件（Home、About、Contact）导入默认组件（App 组件）。如果您使用命名组件导入它们，它们将无法正确呈现。

块引用

【讨论】：

如果人们想知道为什么这不适用于 React Router v 4.0，他们重写了它。欲了解更多信息：github.com/ReactTraining/react-router/issues/4732【参考方案2】： 

import React from 'react';
import Link from 'react-router';


class App extends React.Component 
  render() 
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      this.props.children
      </div>
    )
  


export default App;



export class Home extends React.Component 
  render() 
    return (
      <h1>Home Page Content</h1>
    )
  




export class About extends React.Component 
  render() 
    return (
      <h1>About Page Content</h1>
    )
  



export class Contact extends React.Component 
  render()  
    return (
      <h1>Contact Page Content</h1>
    )

【讨论】：

【参考方案3】：

你只有一行代码：

export default App;

在其他几行之后你有代码：

export default Home;

这就是问题所在！你在一个文件中使用了export default 2 次。您必须更改其中之一才能解决问题。

“你不能在一个文件中多次使用export default”。

【讨论】：

【参考方案4】：

在一行中导出所有组件

export default App, Home, Contacts, About;

【讨论】：

【参考方案5】：

Export Default Home 用于公开任何模块以在其他文件中使用，但只有一个组件是默认的而不是全部。一个模块只能导出一次。您正在使用相同的语句来导出每个不必要的组件。

使用此语句导入组件

import Home,About,Contact from './App.jsx';

【讨论】：

【参考方案6】：

您需要删除 App 和 Home 类中的 default 关键字，如下所示：

export App;
export Home;

default 关键字仅在您要导出 ONE 类时使用。

【讨论】：

text每个模块只允许一次默认导出(代码片段)

查看详情

导出默认不工作的webpack，reactjs

】导出默认不工作的webpack，reactjs【英文标题】：exportdefaultnotworkingwebpack,reactjs【发布时间】：2016-12-2715:29:08【问题描述】：我是webpack的新手，我开始使用webpack和react15构建一个应用程序，但是好像导出默认值无法正常工作，因... 查看详情

一个模块不能有多个默认导出

...ault行。但是，在带有Typescript的WebStorm中，我得到了这个TS错误：Ts2528：代码如下：tsimportModelCreatorfrom\'entities/model-creator\'expo 查看详情

Gmail 推送通知错误（每个开发人员只允许一个用户推送通知客户端）

】Gmail推送通知错误（每个开发人员只允许一个用户推送通知客户端）【英文标题】：Gmailpushnotificationerror(Onlyoneuserpushnotificationclientallowedperdeveloper)【发布时间】：2015-10-2108:35:54【问题描述】：我尝试在我的两个gmail帐户上执行gma... 查看详情

笑话：当同一个模块也有命名导出时，如何模拟默认导出组件？

】笑话：当同一个模块也有命名导出时，如何模拟默认导出组件？【英文标题】：Jest:HowtomockdefaultexportComponentwhensamemodulealsohasnamedexport?【发布时间】：2018-07-2715:41:23【问题描述】：我有一个ES6模块，它默认导出一个React组件类，... 查看详情

将 CommonJS 默认导出导入为命名导出/无法加载 ES 模块

...scord.js的机器人，但在尝试运行生成的JavaScript时出现以下错误。importClient,FriendlyError, 查看详情

带默认参数的模块导出

】带默认参数的模块导出【英文标题】：Moduleexportwithdefaultparameters【发布时间】：2021-05-2819:29:02【问题描述】：我正在尝试在Node.js中导出一个包含一些功能的模块。其中一个函数具有包含默认值的可选参数。module.exports=foo=(a,b=2,... 查看详情

[解决]通常每个套接字地址只允许使用一次

我们在做socket的开发的时候，经常会遇到这个错误：通常每个套接字地址(协议/网络地址/端口)只允许使用一次错误指示很明确：通信端口被占用了，导致通信无法进行。但为什么端口被占用了呢？什么端口被占用了？这里其实... 查看详情

es6export

一、默认导出（defaultexport）//1.一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。<!----page.js---->exportdefaultfunction() return‘默认导出‘exportfunctionsetName() r... 查看详情

Laravel：每个用户一次只允许一个会话

】Laravel：每个用户一次只允许一个会话【英文标题】：Laravel:Onlyallowingonesessionperuseratatime【发布时间】：2015-03-1208:32:36【问题描述】：在Laravel4中是否可以一次只允许每个用户一个会话？例如，如果用户登录并且已经有其他会话... 查看详情

找不到模块：错误：无法解析模块“组件/应用程序”。 webpack + reactjs 问题

...到模块：错误：无法解析模块“组件/应用程序”。webpack+reactjs问题【英文标题】：Modulenotfound:Error:Cannotresolvemodule\'components/app\'.webpack+reactjsissue【发布时间】：2017-03-0418:03:35【问题描述】：我是webpack的新手并做出反应。希望你能... 查看详情

如何修复错误“每个套接字地址（协议/网络地址/端口）通常只允许使用一次”？

】如何修复错误“每个套接字地址（协议/网络地址/端口）通常只允许使用一次”？【英文标题】：HowdoIfixtheerror"Onlyoneusageofeachsocketaddress(protocol/networkaddress/port)isnormallypermitted"?【发布时间】：2013-01-1706:41:38【问题描述】... 查看详情

模块没有默认导出 vue/ts/webpack

...vuejs3组合编写的代码时遇到问题。[tsl].../index.ts(5,8)中的错误TS1192：模块“Application.vue”没有默认导出。这是我的引导文件。import 查看详情

为什么每个jvm只允许一个sparkcontext？(代码片段)

在采访中询问了这个问题，每个JVM允许创建多少个sparkcontexts，为什么？我知道每个jvm只允许一个sparkContext，但是无法理解为什么？有谁请帮助我理解“每个jvm一个sparkcontext”背后的原因？答案答案很简单-它没有设计用于多个上... 查看详情

Sql Server 只允许每个用户使用一个活动图像

】SqlServer只允许每个用户使用一个活动图像【英文标题】：SqlServeronlyallowoneactiveimageperuser【发布时间】：2013-07-1301:33:51【问题描述】：我正在尝试添加到我们有tblUsers表的现有数据库中。截至目前，我们将用户图像存储在文件系... 查看详情

为默认导出模块编写声明文件

】为默认导出模块编写声明文件【英文标题】：Writeadeclarationfileforadefaultexportmodule【发布时间】：2016-12-3017:54:06【问题描述】：我有一个名为RiveScript的npm模块，通常（在Javascript中）以这种方式实例化：varRiveScript=require(\'rivescript\... 查看详情

每个套接字地址（协议/网络地址/端口）通常只允许使用一次？

...这些东西甚至与我的问题无关。由于某种原因，我收到此错误， 查看详情

MySQL/PHP 错误：[2002] 每个套接字地址（协议/网络地址/端口）通常只允许使用一次

】MySQL/PHP错误：[2002]每个套接字地址（协议/网络地址/端口）通常只允许使用一次【英文标题】：MySQL/PHPError:[2002]Onlyoneusageofeachsocketaddress(protocol/networkaddress/port)isnormallypermitted【发布时间】：2012-05-0606:34:35【问题描述】：我已经... 查看详情