search

stackworx / formik-mui

Bindings for using Formik with Material-UI
https://stackworx.github.io/formik-mui
MIT License
974 stars 142 forks source link

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

Open dhawebadmin opened 1 month ago

dhawebadmin commented 1 month ago

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 commented 1 month ago

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 commented 4 weeks ago

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: https://github.com/webpack/webpack/issues/11467 resolve: { fullySpecified: false, }, },

as mentioned in https://github.com/webpack/webpack/issues/16660