Webpack 无法解析 MUI 组件，除非将 '/index.js' 添加到 import 语句中

Question

我正在使用 React 18、Webpack 5 和 Material UI 5。我以前只使用过所有这些的旧版本，并且配置大部分是由同事处理的，所以我感觉我做了一些愚蠢的事情错误。

我已经按照他们的文档中所述使用

npm install @mui/material @emotion/react @emotion/styled

安装了 MUI。当我尝试导入例如

Box

组件时，我使用

import Box from '@mui/material/Box'

进行导入；模块路径已经与我熟悉的不同，但这或多或少是我总是导入其组件的方式。但是，这会在 Webpack 编译器中引发

Can't resolve '@mui/material/Box'

错误。

如果我将

/index.js

添加到导入语句的末尾，它就可以工作。为什么我必须添加

index.js

？是配置问题吗？我怎样才能让它自己找到它？

package.json

：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server .",
    "build": "webpack ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.5",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unicorn": "^51.0.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.8",
    "@mui/material": "^5.15.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "eslintConfig": {
    "ignorePatterns": [
      "/dist"
    ],
    "env": {
      "browser": true,
      "es2024": true
    },
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "plugins": [
      "unicorn"
    ],
    "extends": "plugin:unicorn/recommended",
    "rules": {
      "unicorn/better-regex": "warn",
      "unicorn/filename-case": [
        "error",
        {
          "cases": {
            "kebabCase": true,
            "pascalCase": true
          }
        }
      ]
    }
  }
}

webpack.config.js

：

import HtmlWebpackPlugin from 'html-webpack-plugin'
import path from 'node:path'
import { fileURLToPath } from 'node:url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  entry: 'index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index-bundle.js',
  },
  target: 'web',
  devServer: {
    port: '5000',
    static: {
      directory: path.join(__dirname, 'public'),
    },
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
  ],
}

Answer 1

看来较新版本的 Webpack 要求您指定完整的模块路径。您可以通过将特定模块规则的

fullySpecified

字段设置为

false

来禁用此行为。这是文档链接，其中包含如何操作的示例：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false, // disable the behaviour
        },
      },
    ],
  },
};