尝试导入错误：“ ./ components”不包含默认导出（导入为“ App”）

Question

我具有以下ReactJS项目结构，并且出现以下错误：

./ src / index.js

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

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

是什么原因？我该怎么解决？

有类似的线程，但是我已经通过{/ {1}}在./components/App/index.jsx中将其导出。也许是.jsx扩展名的原因？

• index.js

export default App;

• components / index.js

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();

• components / App / index.jsx

export App from './App';

• components / App / style.css

我尝试过的事情：

我尝试过以下操作，就像人们在此线程中所说的：Attempted import error: 'App' is not exported from './App'。

• components / index.js

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;

但是我得到了：

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

Answer 1

似乎您对ES6 export / import语法有些困惑。 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软件包。

Answer 2

确保您没有在 {componentA} 中使用导出的值 componentA

remove `{}` and check