Module parse failed: Unexpected token (107:28)

[minzunim]

Steps to reproduce

I ran yarn build as usual, but I encountered the following error:

./node_modules/@mui/base/unstable_useModal/useModal.js 107:28
Module parse failed: Unexpected token (107:28)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|   const createHandleKeyDown = otherHandlers => event => {
>     otherHandlers.onKeyDown?.(event);
|
|     // The handler doesn't take event.defaultPrevented into account:

I didn't install any additional libraries before running the build, and I ran yarn install --ignore-engines (this isn't the first time I used --ignore-engines, I’ve used the same option for builds before). Could you suggest a potential solution?

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

node.js 16.14.1
react 17.0.2

"@mui/lab": "^5.0.0-alpha.143",
"@mui/material": "^5.14.8",
"@mui/x-tree-view": "^6.0.0-beta.0",

Search keywords: Module parse failed, useModal

Search keywords:

[naaa760]

Hello @minzunim :)

I would suggest, your Babel configuration supports modern JavaScript features. First, check that the @babel/preset-env is installed and included in your Babel config. If optional chaining is still not recognized, install the @babel/plugin-proposal-optional-chaining plugin and add it to your Babel configuration. After updating the configuration, clear the cache, reinstall dependencies, and run the build again. This should allow the build to process optional chaining correctly.

[mnajdova]

It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[akravchukabto]

For me this issue was related to using webpack 4.
Upgrading to webpack 5 as mentioned in the docs
https://mui.com/material-ui/getting-started/supported-platforms/#webpack

• fixed the error.

[minzunim]

@akravchukabto

Thank you for your advice! ❤️

Actually, I had resolved the issue by downgrading the version of @mui/base and installing the package. So the current resolutions option in my package.json looks like this:

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2",
  "react-error-overlay": "6.0.9",
  "@typescript-eslint/utils": "^5.0.0",
  "@mui/types": "7.2.17",
  "@mui/base": "5.0.0-beta.40"
},

However, instead of this approach, I want to resolve the issue by upgrading the webpack version to 5, as you suggested.

So I looked into my package.json and found that webpack isn’t explicitly installed.

Then, when I checked by running the command yarn list --pattern "webpack", I got the following dependency tree.

yarn list v1.22.19
├─ @pmmmwh/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  └─ [email protected]       
├─ @storybook/[email protected]
├─ @storybook/[email protected]      
│  └─ [email protected]
├─ @storybook/[email protected]
│  ├─ @pmmmwh/[email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  └─ [email protected]
├─ @svgr/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @webpack-contrib/[email protected]    
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  └─ [email protected]
│     └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
Done in 1.05s.

What should I do to successfully install webpack version 5?

[minzunim]

@akravchukabto
I've solved this problem!
As I mentioned in the previous comments, in my project, webpack was not explicitly installed in package.json.
Before installing webpack on package.json, I installed the version globally using the npm install -g [email protected] command.
And then, I deleted the following options in resolutions field:

"@mui/types": "7.2.17",
"@mui/base": "5.0.0-beta.40"

after that,

yarn install
yarn build

As a result, we succeeded in building!
Therefore, I could see that it was a problem with the webpack version,
In the future, I will explicitly install the webpack 5 version on package.json. Thank you 😃

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@minzunim How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.