找不到模块- webpack ts-loader @material-ui

Question

在将@material-ui导入到我的React组件时，我得到了一个错误。找不到模块:错误:无法解析'./utils。我可以导入其他的库，比如lodash，但是使用@material-ui就有问题了。我尝试重新安装node_modules，但仍然出现错误。

import React, { useEffect } from "react";
import _ from "lodash";
import Button from "@material-ui/core";

export default function Dashboard() {

  useEffect(() => {
    console.log("Test");
    const testVar = "test";
    console.log(_.split(testVar));
    return () => {
      // cleanup;
    };
  }, []);
  return (
    <div>
      <Button>Login</Button>
    </div>
  );

package.json

{
  "name": "views",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "lodash": "^4.17.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.157",
    "@types/react": "^16.9.38",
    "@types/react-dom": "^16.9.8",
    "source-map-loader": "^1.0.0",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development --watch --progress",
    "dev:nowatch": "webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

var path = require("path");

module.exports = {
  mode: "development",

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",
  entry: {
    dashboard: "./Dashboard/index",
    // creator: "./Creator/index",
  },

  output: {
    path: path.resolve(__dirname, ""),
    filename: "./[name]/dist/index.js",
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx"],
    modules: [path.resolve(__dirname, "./"), "node_modules"],
  },

  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
    ],
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es6", "dom"],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

示例错误

    ERROR in ./node_modules/@material-ui/core/esm/index.js
    Module not found: Error: Can't resolve './withMobileDialog' in 'C:\Users\user\Documents\Code\calendarapp\UI\Client\views\node_modules\@material-ui\core\esm'
     @ ./node_modules/@material-ui/core/esm/index.js 240:0-65 240:0-65 241:0-35 241:0-35
     @ ./Dashboard/Dashboard.tsx
     @ ./Dashboard/App.tsx
     @ ./Dashboard/index.tsx
    
    ERROR in ./node_modules/@material-ui/core/esm/index.js
    Module not found: Error: Can't resolve './withWidth' in 'C:\Users\user\Documents\Code\calendarapp\UI\Client\views\node_modules\@material-ui\core\esm'
     @ ./node_modules/@material-ui/core/esm/index.js 242:0-51 242:0-51 243:0-28 243:0-28
     @ ./Dashboard/Dashboard.tsx
     @ ./Dashboard/App.tsx
     @ ./Dashboard/index.tsx

Answer 1

找到解决方案了。

在webpack.config.js中添加".js“、".jsx”进行解析。

 resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    
  },

Answer 2

如果我可以添加一些东西，如果我没记错的话，按钮应该像import {Button} from "@material-ui/core";一样用大括号括起来

Answer 3

首先创建您的react应用程序，然后安装material ui核心和图标模块，然后转到package.json并检查依赖项如果找到material ui核心和图标，则首先复制图标行，然后粘贴到您喜欢用作index.js的文件上，然后U仅添加图标名称例如：-导入从@material添加-ui/图标您仅添加@material-ui/ /icon / add?%已通过校样解决