search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.03k stars 32.3k forks source link

ES6 is not converted to ES5 after packaging #35419

Open zzzhim opened 1 year ago

zzzhim commented 1 year ago

Duplicates

Latest version

Steps to reproduce 🕹

No response

Current behavior 😯

Sorry my English is not very good After I use nextjs to package, only @ material ui code has not been compiled into es5, which makes my code unable to run in IE. I tried many configurations but couldn't solve them. I like to use @ material ui. I hope you can help me.

抱歉我的英语不是很好

我使用nextjs 打包过后，只有 @material-ui 的代码并没有编译成es5，这使我的代码无法运行在IE中。 我尝试了很多配置都无法解决，我很喜欢使用 @material-ui，希望大家能够帮助我。

Expected behavior 🤔

Capable of running in IE

Context 🔦

No response

Your environment 🌎

TypeScript ``` { "compilerOptions": { "baseUrl": ".", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "paths": { "@/*": ["./*"], } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"], } ```
package.json ``` { "version": "0.1.0", "private": true, "scripts": { "local": "cross-env WEB_NODE_ENV=local next dev -p 3000", "dev": "cross-env WEB_NODE_ENV=dev next dev -p 3000", "test": "cross-env WEB_NODE_ENV=test next dev -p 3000", "prev": "cross-env WEB_NODE_ENV=prev next dev -p 3000", "prod": "cross-env WEB_NODE_ENV=prod next dev -p 3000", "dev_build": "cross-env WEB_NODE_ENV=dev next build", "test_build": "cross-env WEB_NODE_ENV=test next build", "prep_build": "cross-env WEB_NODE_ENV=prep next build", "prod_build": "cross-env WEB_NODE_ENV=prod next build", "build": "npm run prod_build", "dev_build_export": "npm run dev_build && cross-env WEB_NODE_ENV=dev next export", "test_build_export": "npm run test_build && cross-env WEB_NODE_ENV=test next export", "prep_build_export": "npm run prep_build && cross-env WEB_NODE_ENV=prep next export", "prod_build_export": "npm run prod_build && cross-env WEB_NODE_ENV=prod next export", "build_export": "npm run prod_build && cross-env WEB_NODE_ENV=prod next export", "start": "npm run dev", "serve": "npm run dev", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.10.5", "@emotion/server": "^11.10.0", "@emotion/styled": "^11.10.5", "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "@types/node": "18.11.9", "@types/react": "18.0.24", "@types/react-dom": "18.0.8", "axios": "^1.1.3", "classnames": "^2.3.2", "cross-env": "^7.0.3", "dayjs": "^1.11.6", "intercept-stdout": "^0.1.2", "js-cookie": "^3.0.1", "lottie-web": "^5.9.6", "next": "13.0.1", "next-transpile-modules": "^10.0.0", "qrcode.react": "^3.1.0", "rc-notification": "^4.6.1", "react": "18.2.0", "react-dom": "18.2.0", "react-intl-universal": "^2.6.10", "recoil": "^0.7.6", "sass": "^1.55.0", "use-force-update": "^1.0.10", "yup": "^0.32.11" }, "devDependencies": { "@babel/plugin-external-helpers": "^7.18.6", "@babel/plugin-transform-arrow-functions": "^7.18.6", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@svgr/webpack": "^6.5.1", "@types/js-cookie": "^3.0.2", "@types/mockjs": "^1.0.7", "babel-plugin-import": "^1.13.5", "mockjs": "^1.1.0", "postcss-loader": "^7.0.1", "postcss-px-to-viewport": "^1.1.1", "typescript": "^4.8.4" } } ```
.babelrc ``` { "presets": [ "next/babel", [ "@babel/preset-env", { "useBuiltIns": "entry", "corejs": "3.22" } ] // "@babel/preset-react" ], "plugins": [ "@babel/plugin-transform-arrow-functions" // "@babel/plugin-external-helpers" // [ // "babel-plugin-import", // { // "libraryName": "@material-ui/core", // "libraryDirectory": "", // "camel2DashComponentName": false // }, // "core" // ], // [ // "babel-plugin-import", // { // "libraryName": "@mui/icons-material", // "libraryDirectory": "", // "camel2DashComponentName": false // }, // "icons" // ] ] } ```
_app.tsx ``` import * as React from 'react' import { useState } from 'react' // import localFont from '@next/font/local' import { AppProps, NextWebVitalsMetric } from 'next/app' import { ThemeProvider } from '@material-ui/core/styles' import CssBaseline from '@material-ui/core/CssBaseline' import { CacheProvider, EmotionCache } from '@emotion/react' import theme from '../config/theme.config' import createEmotionCache from '../config/createEmotionCache.config' import Recoil, { MutableSnapshot, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import PropTypes from 'prop-types' import service from '@/utils/request' import { useMyLayoutEffect } from '@/utils/hooks' import { WEB_NODE_ENV } from '@/config' import classNames from 'classnames' import { GlobalData, globalData, globalState as globalStateStore } from '@/store/global' import { setToken } from '@/utils/auth' import { ButtonCustom } from '@/components/Button' import { Language } from '@/types/common' import { LoginDialogCustom } from '@/components/LoginDialog' import { useRouter } from 'next/router' import styles from "./_app.module.scss" import '../styles/globals.scss' // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache() interface MyAppProps extends AppProps { emotionCache?: EmotionCache } if(WEB_NODE_ENV === "local") { // 模拟接口 require("@/mock/index") } function MyApp(props: MyAppProps) { // const router = useMyRouter() const { Component, emotionCache = clientSideEmotionCache, pageProps, } = props const router = useRouter() // 初始化 const handleRecoilInit = ({ set, }: MutableSnapshot) => { const language = router.query.language ?? 'en' set(globalStateStore, { ...globalData, language: language as Language }) } React.useEffect(() => { console.log(WEB_NODE_ENV) }, []) return ( <>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
) } MyApp.propTypes = { Component: PropTypes.elementType.isRequired, pageProps: PropTypes.object.isRequired, } MyApp.getInitialProps = async (ctx: any) => { try { } catch (error) { console.log(error) } return { pageProps: {}, } } export default MyApp ```
siriwatknp commented 1 year ago

Is it working fine on other browsers?

siriwatknp commented 1 year ago

~For IE 11, could you first check if https://mui.com/material-ui/getting-started/supported-platforms/#ie-11 helps?~ It looks like you are using v4. I recommend migrating to v5.

zzzhim commented 1 year ago

~对于 IE 11，您能否先检查https://mui.com/material-ui/getting-started/supported-platforms/#ie-11是否有帮助？~看起来您正在使用 v4。我建议迁移到 v5。

Hello, using this solution does not solve my problem 你好，使用此方案并不能解决我的问题

I temporarily solved the problem by translating dependencies to ES5 through babel-loader, but it made my packaging code very slow. 我通过 babel-loader 使依赖转译为ES5暂时解决了问题，但这样会让我打包代码变得很慢。

zzzhim commented 1 year ago

Is it working fine on other browsers?

Can run normally except IE 除了IE 都可以正常运行

pereriksson commented 1 year ago

We are running next.js 12 with @mui/material 5.0.6. We transpile modules with next-transpile-modules which has worked for our other modules. It appears arrow functions from material-ui.production.min.js still appear in our transpiled output. Not sure why though...

siriwatknp commented 1 year ago

We are running next.js 12 with @mui/material 5.0.6. We transpile modules with next-transpile-modules which has worked for our other modules. It appears arrow functions from material-ui.production.min.js still appear in our transpiled output. Not sure why though...

I am pretty sure that the underlying problems are not from Material UI. We don't produce any complications regarding packaging and publishing to npm.

To be honest, I don't know how to help without seeing the code, project structure, and tools that you are using.

zzzhim commented 1 year ago

We are running next.js 12 with @mui/material 5.0.6. We transpile modules with next-transpile-modules which has worked for our other modules. It appears arrow functions from material-ui.production.min.js still appear in our transpiled output. Not sure why though...

Later, I checked the packaged code and found some untranspiled ES6 methods. I converted them one by one to solve the issue. However, this caused slow packaging every time.

我后来把打包后的代码检查了一下，然后找到了没有转化的ES6方法，逐个转化解决了这个问题。但是这样做导致我每次打包都很缓慢。

pereriksson commented 1 year ago

I am pretty sure that the underlying problems are not from Material UI. We don't produce any complications regarding packaging and publishing to npm.

To be honest, I don't know how to help without seeing the code, project structure, and tools that you are using.

Maybe the issue is that @mui provides already packaged js-files that are not imported as ESM modules? Because this is a requirement for the transpiler (next-transpile-modules) we are using.