Импорт не работает в подпапке

Question

Когда я использую

import React from 'react';
import ReactDOM from 'react-dom';
require('./styles.css');
import App from './components/App';
import Test from './components/Test';

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

Однако webpack обнаружил тестовый модуль в компоненте приложения:

import React from 'react';
import Test from './components/Test';

export class App extends React.Component {
  render() {
    return (
      <div className='container'>
        <Test />
     </div>
    )
  }
}

Тест импорта не работает, он говорит: ОШИБКА в./src/components/App.js Модуль не найден: Ошибка: Не удается разрешить './components/Test'

это работает, когда я использую требуют, хотя

var Test = require('./Test');

Answer 1

Вы импортируете из неправильного каталога. Посмотрев на свой первый код, вы оба App а также Test В то же самое components каталог. Ошибка возникает потому, что ваш импорт ищет components папка внутри components папка. Поэтому, если вы хотите, чтобы он был импортирован в приложение, вы должны указать относительный путь из текущей папки. то есть) ./

Попробуйте это в своем классе приложения или файле App.js

import Test from './Test';