Javascript React无法导入组件--找不到模块

我刚开始使用React.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'));

import React from "react";

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

我正在使用

但是，当我运行此命令时，我的模块无法加载

我在浏览器控制台中遇到此错误：

错误：找不到模块“/components/MyComponent”

---

无法找出这里出了什么问题。

您的导入有一个输入错误。您正在请求MyComponent。改为：

import MyComponent from "./components/MyComponent";

---

以及所有输入错误。

您可以尝试从“/components/mycomponent.js”导入mycomponent

像这样

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

---

您已经写入文件名为MyComponent.js

因此，您的导入应该如下所示

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

---

如果任何人来这里没有输入错误，并且正在使用Webpack，请务必检查以下条款：

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

在您的webpack.config.js中

这会告诉transpiler解析如下语句：

import Setup from './components/Setup'

到

---

这样你就不需要分机了

我的问题是没有正确生成导入行。我有这样一个场景：

--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'

---

我不知道为什么生成的导入行自动生成错误。

您有一个输入错误，可能与此相关：

MyComponent

而不是

MyComponent

是，这是一个输入错误。很抱歉。如果问题存在，请确保在更正错误后启动npm。这可能与此情况有关，也可能与此无关，但请注意目录路径中的大小写。我的本地目录是小写的，但在prod中是大写的。我必须完全删除我的本地结构，并从prod中克隆来修复它，否则我将花费大量时间重构目录名。这很有帮助。我在扩展类型中遗漏了一个点，比如扩展：[“jsx”、“.js”]而不是扩展：[“.jsx”、“.js”]

--src
----elements
-----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'