module not found - webpack ts-loader @material-ui

Question

I get an error when importing @material-ui to my React component. Module not found: Error: Can't resolve './utils. I can import other libraries like lodash but with @material-ui there's issue. I tried reinstall node_modules but error still occur.

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
  }
}

Example errors

    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

miuosh · Accepted Answer · 2020-06-28 21:04:41Z

1

Found solution.

In webpack.config.js add ".js", ".jsx" to resolve.

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

answered Jun 28, 2020 at 21:04

miuosh

9363 gold badges14 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2021-10-25 03:53:03Z

0

If I can add something and if I remember correctly, the import Button from "@material-ui/core"; should have curly brackets around "Button" like so import {Button} from "@material-ui/core";

answered Oct 25, 2021 at 3:53

Alex

116 bronze badges

Comments

General Grievance · Accepted Answer · 2023-04-13 17:13:15Z

0

First create your react app Then Install material ui core and icons modules Then Go package.json and check dependencies if found material ui core and icons then first copy icons line Then paste on file which u use like as index.js Then U only add /icon name For example:- Import add from @material-ui/icons You add only @material-ui/icons/add

edited Apr 13, 2023 at 17:13

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Nov 13, 2021 at 4:46

Triumph

1

Collectives™ on Stack Overflow

module not found - webpack ts-loader @material-ui

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related