javascript - React - 导入无状态组件导致错误

Question

我尝试将无状态组件导入到我的应用程序中，但收到以下错误:

App.jsx:13 Uncaught Error: Cannot find module "./components/test"

和

Module not found: Error: Can't resolve './components/test'

这是我的代码:

App.jsx

import React, {Component} from 'react';
import Username from './components/test';

class App extends Component {
  render() {
    return (
      <h1>Hello React :)</h1>
    );
  }
}
export default App;

test.jsx

import React from 'react';

const Username = function(props) {
  return (
    <p>The logged in user is: </p>
  )
}
export default Username;

无法理解为什么会出现此错误？

Answer 1

如果您希望能够导入 jsx 文件而不指定扩展名，您需要稍微修改您的 webpack 配置。

您需要将 .jsx 添加到 resolve.extensions 数组中(默认为 [".js", ".json"] 因此您应该将其设置为 [".js", ".json", ".jsx"] 并确保将 resolve.enforceExtension 设置为 false(这是默认值。)