ERROR in ./node_modules/formik-mui/dist/Autocomplete.js

[dhawebadmin]

I have used formik-mui in a project. i m facing the following errors.

Compiled with problems:

ERROR in ./node_modules/formik-mui/dist/Autocomplete.js 2:0-57
Module not found: Error: Can't resolve '@mui/material/Autocomplete' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Autocomplete' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Checkbox.js 2:0-49
Module not found: Error: Can't resolve '@mui/material/Checkbox' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Checkbox' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/CheckboxWithLabel.js 2:0-49
Module not found: Error: Can't resolve '@mui/material/Checkbox' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Checkbox' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/CheckboxWithLabel.js 3:0-62
Module not found: Error: Can't resolve '@mui/material/FormControlLabel' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/FormControlLabel' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/InputBase.js 2:0-51
Module not found: Error: Can't resolve '@mui/material/InputBase' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/InputBase' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/RadioGroup.js 2:0-53
Module not found: Error: Can't resolve '@mui/material/RadioGroup' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/RadioGroup' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Select.js 2:0-52
Module not found: Error: Can't resolve '@mui/material/FormControl' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/FormControl' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Select.js 3:0-58
Module not found: Error: Can't resolve '@mui/material/FormHelperText' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/FormHelperText' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Select.js 4:0-50
Module not found: Error: Can't resolve '@mui/material/InputLabel' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/InputLabel' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Select.js 5:0-45
Module not found: Error: Can't resolve '@mui/material/Select' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Select' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/SimpleFileUpload.js 3:0-52
Module not found: Error: Can't resolve '@mui/material/FormControl' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/FormControl' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/SimpleFileUpload.js 4:0-50
Module not found: Error: Can't resolve '@mui/material/InputLabel' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/InputLabel' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/SimpleFileUpload.js 5:0-40
Module not found: Error: Can't resolve '@mui/material/Input' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Input' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/SimpleFileUpload.js 6:0-58
Module not found: Error: Can't resolve '@mui/material/FormHelperText' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/FormHelperText' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/Switch.js 2:0-45
Module not found: Error: Can't resolve '@mui/material/Switch' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/Switch' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/TextField.js 2:0-51
Module not found: Error: Can't resolve '@mui/material/TextField' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/TextField' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/formik-mui/dist/ToggleButtonGroup.js 2:0-67
Module not found: Error: Can't resolve '@mui/material/ToggleButtonGroup' in 'C:\Users\User\Documents\React\membership\node_modules\formik-mui\dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/ToggleButtonGroup' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

following is my package.json
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.1.4",
"@mui/lab": "^6.0.0-beta.12",
"@mui/material": "^6.1.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"date-fns": "^4.1.0",
"formik": "^2.4.6",
"formik-material-ui": "^4.0.0-alpha.2",
"formik-mui": "^5.0.0-alpha.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"yup": "^1.4.0"

the same project with same packagae.json is working fine in codesandbox, but as i run it from vs code it give error. Any help will be highly appreciated.

[cliedeman]

Hi @dhawebadmin

If you create a minimal reproduction I can take a look

It's probably a build tool issue maybe related to esm

Ciaran

[dhawebadmin]

Thanks for your reply. I have added you to the codesandbox. However i have resolved it with a temp workaround by adding following

webpack.config.js
module -> rules -> oneOf
add this:

{
test: /.m?js/, // fix:issue: webpack/webpack#11467
resolve: {
fullySpecified: false,
},
},

as mentioned in webpack/webpack#16660

[kornicameister]

With CRA of react it is not easy to make a chance for this.
Is there a plan to address it properly?

[cliedeman]

I tested with CRA v5 and it works with 4.0.0 and you get the above error with 5.0.0-alpha.0.

The only change is the switch to esm which breaks CRA.

[nathan-owen]

Are there any plans or information on how to resolve this? I'm trying to upgrade to material UI 6 and my nextjs app is failing to run with this error.