找不到模塊：錯誤：無法解析“/home/user/Desktop/my_app/src”中的“./app”

Question

我開始創建我的應用程序，所以我使用 webpack 實現了項目配置。 項目結構為：

node_modules
public
|----bundle.js
|----index.html
src
|----app.jsx
|----index.jsx
|----components
     |-----appBar.jsx

webpack.config.jsx：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.jsx'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        port: 9000
    }
}

應用程序.jsx：

import ButtonAppBar  from './components/appBar';
import React from 'react';


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

export default App;

索引.html：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'


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

包.json：

    "dependencies": {
    "@material-ui/core": "^1.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

我運行這個指令：

webpack --display-error-details

我收到此錯誤：

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'
resolve './app' in '/home/user/Desktop/my_app/src'
  using description file: /home/user/Desktop/my_app/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/Desktop/my_app/package.json (relative path: ./src/app)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.json doesn't exist
      as directory
        /home/user/Desktop/my_app/src/app doesn't exist
[/home/user/Desktop/my_app/src/app]
[/home/user/Desktop/my_app/src/app.wasm]
[/home/user/Desktop/my_app/src/app.mjs]
[/home/user/Desktop/my_app/src/app.js]
[/home/user/Desktop/my_app/src/app.json]
 @ ./src/index.jsx 11:11-27

我發現了類似的問題，例如webpack: Module not found: Error: Can't resolve (with relative path)和Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

Answer 1

為了解決您的問題，將擴展添加到您的webpack.config.js 。

    module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

有關更多信息，請查看resolve.extensions

Answer 2

在index.js中將文件擴展名添加到app 。

import App from './app.jsx'

這是必需的，因為您沒有在 webpack 配置中添加resovle.extensions選項，因此它會搜索名為“app”的文件夾，其中包含index.js 。

Webpack 解析文檔

Answer 3

確保來自同一文件夾的導入以./

例子：

import component from './component';

Answer 4

我有類似的問題，我能夠使用以下步驟解決它；

1. 獲取有關錯誤類型webpack --display-error-details

此輸出類似於：“字段瀏覽器不包含有效的別名配置”

2. 我編輯我的package.json

main: "./js/script.js"這是我的 js 文件的路徑

3.我編輯我的settings.js

exports.themeLocation = './wp-content/themes/fictional-university-theme'

4. 我編輯了我的webpack.config.js - 我將此行添加到 module.exports

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