Not able to install v7 but i can use v6 without issue

[nethusan]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

I am encountering this error but not sure why this happens. FYI: new in react so possible that I am missing something.

This is my package.json

"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.24.4",
"@babel/node": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/plugin-transform-spread": "^7.11.0",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"@babel/register": "^7.11.5",
"@babel/runtime": "^7.14.5",
"@floating-ui/react-dom": "^0.6.3",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"babel-loader": "^8.3.0",
"browser-sync": "2.7.4",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^0.28.11",
"expose-loader": "0.7.3",
"file-loader": "^3.0.1",
"filemanager-webpack-plugin": "^6.1.4",
"html-webpack-plugin": "^4.5.2",
"jsdom": "8.1.0",
"jshint-stylish": "2.0.0",
"json-loader": "^0.5.7",
"moment-locales-webpack-plugin": "^1.2.0",
"node-env-webpack-plugin": "^1.1.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"postcss-loader": "2.0.9",
"react-addons-test-utils": "0.14.7",
"react-refresh": "^0.10.0",
"react-scripts": "0.9.5",
"resolve-url-loader": "2.2.1",
"run-sequence": "1.2.2",
"sass": "^1.50.0",
"sass-loader": "^10.2.1",
"style-loader": "^0.19.1",
"terser-webpack-plugin": "^4.2.3",
"url-loader": "0.6.2",
"webpack": "^4.46.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"@azure/msal-browser": "^2.37.0",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-transform-spread": "^7.11.0",
"@babel/polyfill": "^7.11.5",
"@babel/runtime": "^7.11.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@microsoft/applicationinsights-web": "^2.6.1",
"@microsoft/file-browser": "^1.0.0-preview.0",
"@microsoft/immersive-reader-sdk": "^1.1.0",
"@microsoft/teams-js": "^1.10.0",
"@mui/material": "^5.15.14",
"@mui/x-data-grid": "^7.0.0",
"axios": "^0.24.0",
"bowser": "^2.11.0",
"core-js": "^3.14.0",
"dompurify": "^0.8.9",
"final-form": "^4.20.2",
"ics": "^2.25.0",
"jwt-decode": "^2.2.0",
"katex": "^0.11.1",
"libphonenumber-js": "^1.9.38",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^1.6.0",
"moment": "^2.27.0",
"prop-types": "^15.8.1",
"quill-image-compress": "^1.2.30",
"quill-resize-image": "^1.0.4",
"react": "^17.0.2",
"react-big-calendar": "^0.38.0",
"react-datepicker": "^1.8.0",
"react-dom": "^17.0.2",
"react-dropzone-component": "^3.2.0",
"react-final-form": "^6.5.3",
"react-intersection-observer": "^9.4.3",
"react-joyride": "^2.3.0",
"react-modal": "^3.14.3",
"react-quill": "^2.0.0-beta.4",
"react-redux": "^7.2.6",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-select": "^4.3.1",
"react-window-size-listener": "^1.0.8",
"redux": "^4.1.0",
"redux-form": "^8.3.7",
"redux-promise": "^0.6.0",
"sniffer": "github:watsondg/sniffer",
"sweetalert2": "^11.4.29",
"swipejs": "^2.2.18",
"url-polyfill": "^1.1.10",
"why-did-you-update": "^1.0.8"
}

And I have following in webpack.config

		{
			test: /\.js$|jsx/,
			include: path.resolve(__dirname, '../src'),
			loader: 'babel-loader',
			options: {
				cacheDirectory: true,
				cacheCompression: false,
				sourceMaps: true,
				plugins: [
					require.resolve('react-refresh/babel'),
				].filter(Boolean),
			},
		},

Expected behavior

We want to use DataGrid after installing the package

Context

I tried to install the package and I succeeded with v6 but it does not work with v7.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.123
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/core-downloads-tracker:  5.15.15
    @mui/material: ^5.15.14 => 5.15.15
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid: ^7.0.0 => 7.2.0
    @types/react:  16.14.32
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript:  4.8.4

Search keywords: Unexpected Token

[LukasTy]

@nethusan, could you check #12612 and the suggested workarounds if you are unable to update to webpack 5?
This issue looks a duplicate of that one, if you agree, feel free to close it. 😉

[nethusan]

@LukasTy I tried that but does not resolve anything, same issue,

this my test from webpack.config

rules: [
	{
		test: /\.[jt]sx?$/,
		exclude: [
			{
				test: path.resolve(__dirname, 'node_modules'),
				exclude: [
					path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
					path.resolve(__dirname, 'node_modules/@mui/x-license'),
				],
			},
		],
	},
	{
		test: /\.js$|jsx/,
		include: path.resolve(__dirname, '../src'),
		loader: 'babel-loader',
		exclude: [
			{
				test: path.resolve(__dirname, 'node_modules'),
				exclude: [
					path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
					path.resolve(__dirname, 'node_modules/@mui/x-license'),
				],
			},
		],
		options: {
			cacheDirectory: true,
			cacheCompression: false,
			sourceMaps: true,
			plugins: [
				require.resolve('react-refresh/babel'),
			].filter(Boolean),
		},
	},
	{
		test: /\.(scss|css)$/,
		use: [
			'style-loader',
			'css-loader',
			{
				loader: "sass-loader",
				options: {
					implementation: require("sass"),
				},
			},
		],
		exclude: /node_modules/,
	},
	{
		test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
		loader: 'url-loader',
		options: {
			limit: 10000,
		},
	},
],

Maybe I need to mention that I can see lot more error but similar error message.

[LukasTy]

@nethusan I don't see you using the @babel/preset-env, which would include the necessary transforms (i.e. the optional chaining).
Please check this live example for more details.
If it doesn't help, please provide a complete minimal reproduction example.

In any case, I'd strongly advise firstly updating your development setup, then going for the @mui package bumping.
If you add these workarounds, then it's just additional technical debt that can be avoided by switching priorities. 😉

No offense, but isn't it a bit strange having a development setup that doesn't work with features, that have already been live in all major browsers for 4+ years? 🙈

[nethusan]

@LukasTy, thank you for the information. However, we have been using the syntax (variable.?) throughout the project for quite some time, so I suspect the issue stems from something else. The example I provided earlier is just one of many errors originating from the @mui package. I attempted to resolve these by upgrading to webpack 5 and rebuilding the project, which initially seemed to eliminate the errors. Unfortunately, this upgrade led to new issues related to webpack 5 because of other plugins. So we can close this since this is working with webpack 5

[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.

@nethusan: 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.