React не удалось импортировать компонентный модуль не найден

Я только начал с React.js, и я не могу импортировать компонент.

У меня есть эта структура, за которой следует этот учебник (ссылка YouTube):

-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js

Это мой index.js:

import React from 'react';
import { render } from 'react-dom';

import { MyCompontent } from "./components/MyCompontent";

class App extends React.Component {
    render() {
        return (
            <div>
              <h1>Foo</h1>
              <MyCompontent/>
            </div>
        );
    }
}

render(<App />, window.document.getElementById('app'));

Это MyComponent.js:

import React from "react";

export class MyCompontent extends React.Component {
  render(){
    return(
      <div>MyCompontent</div>
    );
  }
}

Я использую этот файл веб-пакета (ссылка GitHub).

Однако, когда я запускаю это, мой модуль не загружается.

Я получаю эту ошибку в консоли браузера:

Ошибка: не удается найти модуль "./components/MyCompontent" 

[WDS] Hot Module Replacement enabled.  bundle.js:631:11
[WDS] Errors while compiling.  bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
 @ ./src/app/index.js 11:20-56  bundle.js:669:5

Не могу понять, что здесь не так.

Ответы

Ответ 1

У вас есть опечатка в вашем импорте. Вы запрашиваете MyCompontent. Изменить на:

import MyComponent from "./components/MyComponent";

И все опечатки.

Ответ 2

Для тех, кто придет сюда без, опечатки и использует Webpack, обязательно проверьте предложение следующим образом:

resolve: {
    extensions: [".jsx", ".js"]
},

в webpack.config.js.

Это говорит, что ваш транспилятор разрешает такие утверждения, как:

import Setup from './components/Setup'

к

import Setup from './components/Setup.jsx'

Таким образом вам не требуется расширение.

Ответ 3

Вы можете попробовать импортировать MyCompontent из "./components/MyCompontent.js"

как это

import MyCompontent from "./components/MyCompontent.js";

Ответ 4

Вы написали, что имя файла MyComponent.js.

Таким образом, ваш импорт должен выглядеть как

import { MyCompontent } from './components/MyComponent.js'

Ответ 5

Проблема для меня заключалась в том, что строка импорта не была сгенерирована правильно. У меня есть этот сценарий:

--src
----elements
-----myCustomText.tsx

это файл myCustomText.tsx:

export interface Props {
  text: string;
}

const MyCustomText = ({ text }: Props) => (
  <Text>{text}</Text>
);

export default MyCustomText

И сгенерированный импорт был такой:

import MyCustomText from '../../elements/MyCustomText';

и я изменил это на это:

import MyCustomText from '../../elements/myCustomText'

Я не знаю, почему сгенерированная строка импорта была сгенерирована автоматически неправильно.