Question

我的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']
}
};

我在做什么时

npm run build

我到了 找不到模块：错误：无法解析＆。39./ components / PropTest1＆＃39;

上述项目出现问题，请检查。

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

Answer 1

Webpack并不知道您正在寻找PropTest1.jsx中定义的组件，因为您在导入时没有指定扩展名（import PropTest1 from "./components/PropTest1"）

您需要将此添加到您的Webpack配置：

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

resolve属性将告诉它查找名为（在您的示例中）PropTest1.js，PropTest1.jsx，...

的文件

Answer 2

目前，它正在寻找app目录中的组件目录，因此，您需要使用..

import PropTest1  from "../components/PropTest1"

Answer 3

我发现了文件名问题。在导入时，我有

从“ ./login”导入登录名；

文件名为Login.js

在本地计算机上运行并没有给出错误，但是当我在Linux上运行时，却出现了与上述类似的错误。

找不到模块：错误：无法解析＆＃39; ./ components / PropTest1＆＃39; - React JS

3 个答案: