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

nethusan commented 6 months ago

Steps to reproduce

Link to live example: (required)

Steps:

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 commented 6 months ago

@nethusan, could you check https://github.com/mui/mui-x/issues/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 commented 6 months ago

@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 commented 6 months ago

@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 commented 6 months ago

@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[bot] commented 6 months ago

:warning: 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.

mui / mui-x