You may need an appropriate loader to handle this file type

[SabareeswaranC]

Steps to reproduce

No response

Current behavior

There are two projects.
-> One Main Project
-> One NPM Package Project

In the NPM project, i am using material ui components and implementing custom components.
Whenever i am trying to use the npm package in my main project, just after installing the npm package, when i do npm run start i am facing following issues

Executing post-build scripts
(directory for my local mainproject)/node_modules/antd/es/layout/layout.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use node --trace-warnings ... to show where the warning was created)
node:internal/process/promises:394
triggerUncaughtException(err, true /* fromPromise */);
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '(directory for my local mainproject)/node_modules/rc-util/es/omit' imported from (directory for my local mainproject)/node_modules/antd/es/layout/layout.js
Did you mean to import "rc-util/es/omit.js"?
at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1056:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.getModuleJobForRequire (node:internal/modules/esm/loader:349:53)
at new ModuleJobSync (node:internal/modules/esm/module_job:338:34)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:322:11)
at loadESMFromCJS (node:internal/modules/cjs/loader:1396:24)
at Module._compile (node:internal/modules/cjs/loader:1529:5) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:(directory for my local mainproject)/node_modules/rc-util/es/omit'
}

Node.js v23.1.0

ERROR in ./node_modules/@mui/material/DefaultPropsProvider/DefaultPropsProvider.js
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
| function DefaultPropsProvider(props) {
| return /#PURE/_jsx(SystemDefaultPropsProvider, {
| ...props
| });
| }
@ ./node_modules/@mui/material/DefaultPropsProvider/index.js 1:0-69
@ ./node_modules/@mui/material/Stack/Stack.js
@ ./node_modules/@mui/material/Stack/index.js
@ ./node_modules/@mui/material/index.js
@ ./node_modules/(my npm project name)/dist/components/MaterialUIInput/index.js
@ ./node_modules/(my npm project name)/dist/components/index.js
@ ./node_modules/(my npm project namet)t/dist/constants/RoutesConstants/index.js
@ ./node_modules/(my npm project name)/dist/constants/index.js
@ ./node_modules/(my npm project name)/dist/App.js
@ ./node_modules/(my npm project name)/dist/index.js
@ ./client/containers/LoginPage/index.js
@ ./client/containers/LoginPage/Login/index.jsx
@ ./client/containers/LoginPage/Login/Loadable.js
@ ./client/routes.js
@ ./client/ClientRoot.js
@ ./client/app.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true ./client/app.js
ℹ ｢wdm｣: Failed to compile.

Expected behavior

Need to implement the components from npm package in my main project without any issues.

Context

NPM Project:
package.json
"dependencies": {
"@babel/plugin-transform-object-rest-spread": "^7.25.9",
"@babel/polyfill": "^7.12.1",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.5",
"@mui/material": "^6.1.5",
"@mui/x-date-pickers": "^7.21.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^5.13.1",
"autoprefixer": "^10.4.20",
"date-fns": "^4.1.0",
"postcss": "^8.4.45",
"react": "^18.2.0",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.1",
"react-scripts": "5.0.1",
"styled-components": "6.1.12",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@babel/cli": "^7.22.10",
"@babel/core": "^7.22.11",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-transform-arrow-functions": "^7.25.9",
"@babel/plugin-transform-async-to-generator": "^7.25.9",
"@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.22.10",
"babel-loader": "^9.2.1",
"tailwindcss": "^3.4.10"
},

My main project:
package.json

"dependencies": {
"@azure/msal-browser": "2.23.0",
"@fortawesome/fontawesome": "1.1.3",
"@loadable/component": "^5.16.4",
"@loadable/server": "^5.16.5",
"@rebass/grid": "6.1.0",
"@my npm package": "0.0.28",
"airbrake-js": "1.4.4",
"antd": "3.26.0",
"axios": "^0.26.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-runtime": "6.26.0",
"better-npm-run": "0.1.0",
"body-parser": "1.18.2",
"chalk": "2.3.0",
"cookie-parser": "1.4.3",
"core-js": "3.38.1",
"dotenv": "5.0.0",
"express": "4.16.2",
"express-http-proxy": "1.1.0",
"html-minifier": "3.5.8",
"immutable": "3.8.2",
"inr-words": "1.0.4",
"ip": "1.1.5",
"moment": "2.29.1",
"morgan": "1.9.0",
"msal": "1.4.16",
"multer": "1.4.2",
"nodemailer": "^6.7.2",
"normalize.css": "8.0.1",
"npm-run-all": "4.1.2",
"prop-types": "15.8.1",
"qs": "6.5.2",
"rc-util": "^5.43.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-drag-listview": "0.2.2",
"react-freshchat": "1.0.11",
"react-google-charts": "4.0.1",
"react-helmet": "6.1.0",
"react-loadable": "5.3.1",
"react-otp-input": "3.1.1",
"react-quill": "2.0.0",
"react-redux": "7.2.9",
"react-router-config": "1.0.0-beta.4",
"react-router-dom": "4.2.2",
"react-scripts": "5.0.1",
"react-styled-carousel": "0.3.8",
"react-zoom-pan-pinch": "2.6.1",
"redux": "3.7.2",
"redux-saga": "0.15.6",
"reselect": "3.0.1",
"serialize-javascript": "1.4.0",
"styled-components": "5.3.6",
"webpack": "3.10.0"
},

"devDependencies": {
"babel-core": "6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "22.1.0",
"babel-loader": "7.1.2",
"babel-plugin-dynamic-import-node": "1.2.0",
"babel-plugin-styled-components": "1.5.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.12",
"babel-plugin-transform-require-ignore": "0.1.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.24.1",
"circular-dependency-plugin": "4.4.0",
"css-loader": "0.28.9",
"enzyme": "3.3.0",
"enzyme-to-json": "3.3.1",
"eslint": "4.16.0",
"eslint-config-airbnb": "16.1.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.5.1",
"eventsource-polyfill": "0.9.6",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"identity-obj-proxy": "3.0.0",
"install": "0.10.2",
"jest": "22.1.4",
"lodash": "^4.17.21",
"nodemon": "1.14.11",
"npm": "5.6.0",
"offline-plugin": "4.9.0",
"plop": "1.9.1",
"react-test-renderer": "18.2.0",
"style-loader": "0.20.1",
"uglifyjs-webpack-plugin": "1.1.6",
"webpack": "3.10.0",
"webpack-dev-middleware": "2.0.4",
"webpack-hot-middleware": "2.21.0",
"webpack-node-externals": "1.6.0",
"webpack-shell-plugin": "0.5.0",
"webpack-stats-plugin": "0.1.5"
},

Please help me!

Your environment

NPM Project:
System:
OS: macOS 14.5
Binaries:
Node: 23.1.0 - ~/.nvm/versions/node/v23.1.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v23.1.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 130.0.6723.117
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.5
@mui/icons-material: ^6.1.5 => 6.1.5
@mui/material: ^6.1.5 => 6.1.5
@mui/private-theming: 6.1.5
@mui/styled-engine: 6.1.5
@mui/system: 6.1.5
@mui/types: 7.2.18
@mui/utils: 6.1.5
@mui/x-date-pickers: ^7.21.0 => 7.22.0
@mui/x-internals: 7.21.0
@types/react: 18.2.21
react: ^18.2.0 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: 6.1.12 => 6.1.12
typescript: 4.9.5

My Main project:
System:
OS: macOS 14.5
Binaries:
Node: 23.1.0 - ~/.nvm/versions/node/v23.1.0/bin/node
npm: 5.6.0 - ~/Downloads/mymainproject/node_modules/.bin/npm
pnpm: Not Found
Browsers:
Chrome: 130.0.6723.117
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: 11.13.3
@emotion/styled: 11.13.0
@mui/core-downloads-tracker: 6.1.6
@mui/icons-material: 6.1.6
@mui/material: 6.1.6
@mui/private-theming: 6.1.6
@mui/styled-engine: 6.1.6
@mui/system: 6.1.6
@mui/types: 7.2.19
@mui/utils: 6.1.6
@mui/x-internals: 7.21.0
@types/react: 18.3.12
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
styled-components: 5.3.6 => 5.3.6
typescript: 4.9.5

Search keywords: MUI: You may need an appropriate loader to handle this file type. , Module parse failed: Unexpected token (9:12)

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '(directory for my local mainproject)/node_modules/rc-util/es/omit' imported from (directory for my local mainproject)/node_modules/antd/es/layout/layout.js
Did you mean to import "rc-util/es/omit.js"?

This is Ant Design related, we won't cover this here.

ERROR in ./node_modules/@mui/material/DefaultPropsProvider/DefaultPropsProvider.js
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
| function DefaultPropsProvider(props) {
| return /#PURE/_jsx(SystemDefaultPropsProvider, {
| ...props
| });
| }
@ ./node_modules/@mui/material/DefaultPropsProvider/index.js 1:0-69

So it fails on the spreading:

material-ui/packages/mui-material/src/DefaultPropsProvider/DefaultPropsProvider.tsx

Line 14 in 00eadaf

return <SystemDefaultPropsProvider {...props} />;

Looks like you are using an outdated version of webpack, to upgrade. It seems that you use this version https://www.npmjs.com/package/webpack?activeTab=versions

[SabareeswaranC]

Thanks @oliviertassinari
Can you please let me know which webpack version should i need to use?

[SabareeswaranC]

@oliviertassinari Could you please help on this?