reactjs - 未找到模块 : Error: Can't resolve './components/PropTest1' - React JS

我的REACTJS应用程序具有以下目录结构

/ReactJs
-dist
--app
-node_modules
-src
--app
--app/Hello.jsx
----components
----components/PropTest1.jsx
-src/main.html
package.json
webpack.config.js

我的 Hello.jsx 代码是:

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

import PropTest1  from "./components/PropTest1"



var dest = document.querySelector('#container');

class Hello extends Component {
    render() {
        return (
        <div>
        <h1>Hello World</h1>
        <PropTest1 />
        </div>

        );

    }

}

render(<div><Hello /></div>, dest);

和 PropTest1.jsx 代码是

import React, { Component } from 'react';



class PropTest1 extends Component {
    render() {
        return (
            <div>
              <p>  My name is no one</p>
            </div>
        );
    }
}

export default PropTest1;

我的 webpack.config.js 是

var webpack = require('webpack');
var path = require('path')

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + "/app/Hello.jsx",
  output: {
    path: path.resolve(__dirname, 'dist') + "/app",
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
          rules: [{
            test: /\.jsx?/,
            include: path.resolve(__dirname,'src'),
            loader:'babel-loader'
          }]
  },
  resolve: {
    extensions: ['*', '.js', '*.jsx']
}
};

当我在做



我正进入(状态
模块未找到:错误:无法解析 './components/PropTest1'

上述项目看起来有什么问题，请检查。

编辑:我在 webpack.config.js 中添加了解析配置

最佳答案

这里的问题是您在导入组件 ( .jsx ) 时没有指定文件扩展名 ( import PropTest1 from "./components/PropTest1" )

要解决此问题，您需要更新 Webpack 配置并添加 resolve 属性，这将使 Webpack 查找名为(在您的示例中) PropTest1.js 、 PropTest1.jsx 的文件，直到找到正确的...

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + "/app/Hello.jsx",
  ...,
  resolve: {
      extensions: ['', '.js', '.jsx']
  }
};

关于reactjs - 未找到模块 : Error: Can't resolve './components/PropTest1' - React JS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50256134/