时间戳

首页 > 解决方案 > 尝试导入错误：“./components”不包含默认导出（导入为“应用程序”）

javascript - 尝试导入错误：“./components”不包含默认导出（导入为“应用程序”）

问题描述

我有以下 ReactJS 项目结构，我收到以下错误：

./src/index.js

尝试导入错误：“./components”不包含默认导出（导入为“应用程序”）。

我的目标是导入这样的组件：（import { App, Navbar } from 'components';注意“组件”）而不是 like ./components/App，./components/App/index或者这样。为此，我需要在 components 目录中添加 index.js。我尝试通过以下代码执行此操作，但我收到了上面的错误。

什么原因？我该如何解决？

有类似的线程，但我已经export default App;在 ./components/App/index.jsx 中导出它。也许原因是 .jsx 扩展名？

在此处输入图像描述

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();


export App from './App';

import React, { Fragment } from 'react';
import './style.css';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import NotAuthorizedRoute from '../../common/NotAuthorizedRoute';
import { Navbar, Home, User, Login } from 'components';

const App = () => {
  return (
    <Fragment>
      <Router>
        <Navbar />

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/users" component={User} />
          <NotAuthorizedRoute path="/sign-in" component={Login} />
          <Redirect from="*" to="/" />
        </Switch>

      </Router>
    </Fragment>
  );
};

export default App;

我尝试了什么：

我尝试执行以下操作，就像人们在此线程中所说的那样：尝试导入错误：'App' is not export from './App'。

export { App } from './App'; // note the brackets

但后来我得到：

./src/components/index.js
Attempted import error: 'App' is not exported from './App'.

标签： javascriptreactjsjsx

解决方案

您似乎对 ES6导出/导入语法有些困惑。MDN 文档非常详细，我建议您查看它。

最重要的是记住默认和命名导出/导入之间的区别。（提示：当您在导出/导入语句中看到括号时，您正在处理命名的语句）

在您的具体情况下，您必须执行以下操作：

  • ./components/component-a.jsx
const ComponentA = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentA};
  • ./components/component-b.jsx
const ComponentB = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentB};
  • ./components/index.js
import {componentA} from './component-a.jsx';
import {componentB} from './component-b.jsx';

export {componentA, componentB};
  • ./some-file.jsx
import {componentA, componentB} from './components';
  • ./some-other-file.jsx
import {componentA} from './components';

这是为逻辑模块分类创建虚拟导出/导入命名空间的典型模式。

请注意，我没有使用默认导出。对此有几种意见，但我建议不要使用它们以避免像您遇到的错误一样。

另请注意，您始终必须指定components目录的完整相对路径。从中导入内容的唯一方法是在您的目录中安装'components'一个components包。node_modules

推荐阅读