module not found - webpack ts-loader #material-ui - reactjs

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

Answer 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"],
},

Answer 2

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";

Answer 3

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
💯% solved with proof