ChiaJune
commented
3 years ago same here.
Closed matchatype closed 3 years ago
ChiaJune
commented
3 years ago same here.
mnajdova
commented
3 years ago @matchatype I managed to successfully run & build our nextjs example - https://github.com/mui-org/material-ui/tree/next/examples/nextjs
I added usage to the adaptV4Theme as well, and it still worked as expected. Can you please share small reproduction, github repo could be perfect.
mnajdova
commented
3 years ago @matchatype sorry I saw now that you use typescript. Let me try the example of nextjs with typescript and will give more feedback.
mnajdova
commented
3 years ago It seems emotion style loaded in the wrong order and override the jss style,
@xs9627 you need to use the <StylesProvider injectFirst> from @material-ui/core in order for emotion to be injected first. See issue https://github.com/mui-org/material-ui/issues/24186
You can see more info on the docs - https://next.material-ui.com/guides/interoperability/#css-injection-order
xs9627
commented
3 years ago @mnajdova Sorry, I comment in the wrong thread. Just post it in #24203.
And StylesProvider works well, thanks a lot!
matchatype
commented
3 years ago Unfortunately I cannot provide you with a minimal repro, I'm really sorry @mnajdova! However, as you already noticed, my app does compile correctly. I also don't think it has to do with adaptV4, in fact I don't even use it. Being a syntax error, I wonder if it has to do with transpilation. I'm using the default nextjs config with no custom .babelrc file. Additionally, I exclude my issue is related with @xs9627 example. I ported my app from v5.0.0-alpha.19 to v5.0.0-alpha.20 and already took care of styling injection. Here is my custom _app if that can help:
import NoOp from '@/components/core/no-op'
import RouteGuard from '@/components/core/route-guard'
import type {DocumentRoute, ModuleRoute} from '@/config/routes'
import routes from '@/config/routes'
import {defaultSettings} from '@/config/settings'
import {AuthProvider} from '@/contexts/auth'
import {DocumentProvider} from '@/contexts/document'
import {ModuleProvider} from '@/contexts/module'
import {SettingsProvider} from '@/contexts/settings'
import Theme from '@/contexts/theme'
import appMachine, {AppEventType} from '@/machines/app/app-machine'
import type {ModuleContext, ModuleEvent} from '@/machines/module/module-machine'
import createCache, {StylisPlugin} from '@emotion/cache'
import {CacheProvider} from '@emotion/react'
import CssBaseline from '@material-ui/core/CssBaseline'
import {StylesProvider as CoreStylesProvider} from '@material-ui/core/styles'
import {jssPreset, StylesProvider} from '@material-ui/styles'
import {useMachine} from '@xstate/react'
import {create} from 'jss'
import rtl from 'jss-rtl'
import find from 'lodash/find'
import isEmpty from 'lodash/isEmpty'
import type {NextComponentType} from 'next'
import type {AppProps} from 'next/app'
import Head from 'next/head'
import {useRouter} from 'next/router'
import type {ComponentType} from 'react'
import {StrictMode, useEffect} from 'react'
import 'react-perfect-scrollbar/dist/css/styles.css'
import {prefixer} from 'stylis'
import rtlPlugin from 'stylis-plugin-rtl'
import type {Actor} from 'xstate'
export const cache = createCache({
key: 'css',
prepend: true,
stylisPlugins: [prefixer, rtlPlugin] as StylisPlugin[],
})
// Configure JSS
const jss = create({
plugins: [...jssPreset().plugins, rtl()],
})
type LayoutProps = {
module?: Actor<ModuleContext, ModuleEvent>
}
type AppPropsWithLayout = AppProps & {
Component: NextComponentType & {Layout: ComponentType<LayoutProps>}
}
const CustomApp = ({Component, pageProps}: AppPropsWithLayout) => {
const Layout = Component?.Layout ?? NoOp
const router = useRouter()
const [current, send] = useMachine(appMachine)
const {auth, doc, module} = current.context
useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles)
}
}, [])
useEffect(() => {
if (router.pathname.startsWith('/app/')) {
const route = find(routes, route => route.path === router.pathname) as ModuleRoute
// Load the selected app module in state
const module = route.module ? route.module : {name: '__empty', collection: null}
send({type: AppEventType.SELECT_MODULE, module})
}
}, [router.pathname])
useEffect(() => {
if (router.query.doc_id) {
const route = find(routes, route => route.path === router.pathname) as DocumentRoute
// Load the selected document in state
const doc = {
path: route.collection,
id: router.query.doc_id as string,
}
send({type: AppEventType.SELECT_DOCUMENT, doc})
}
}, [router.query])
return (
<StrictMode>
<CacheProvider value={cache}>
<Head>
<title>IWB Contest Admin</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<SettingsProvider settings={defaultSettings}>
<AuthProvider value={auth}>
<ModuleProvider value={module}>
<DocumentProvider value={doc}>
<Theme>
<CoreStylesProvider injectFirst>
<StylesProvider jss={jss}>
<CssBaseline />
<RouteGuardLayout={Layout}>
<Component {...pageProps} />
</RouteGuard>
</StylesProvider>
</CoreStylesProvider>
</Theme>
</DocumentProvider>
</ModuleProvider>
</AuthProvider>
</SettingsProvider>
</CacheProvider>
</StrictMode>
)
}
// noinspection JSUnusedGlobalSymbols
export default CustomApp@matchatype I've tried just now locally the https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-typescript and it builds and runs successfully. Would recommend comparing the config between your project and that one to see if something is different. It's hard/impossible for us to debug the issue when we don't have a clear repro.
lednhatkhanh
commented
3 years ago I'm also having the exact same problem, tried deleting node_modules and reinstalled without success, I'm using npm 7 and I don't think my app uses adaptV4Theme.
flpvsk
commented
3 years ago @mnajdova hello! I was just having the same issue. Here's a minimal reproduction based on the next npx create-next-app -e with-typescript repo:
https://github.com/flpvsk/mui-alpha-21-issue-24206
This is where MUI is imported: https://github.com/flpvsk/mui-alpha-21-issue-24206/blob/main/pages/_app.tsx
node -v # v15.5.0
npm -v # 7.3.0
oliviertassinari
commented
3 years ago @flpvsk Perfect, thanks for the reproduction. I took some time to explore it further (~10 minutes), especially making it as dead simple as possible while still reproducing the issue. I have found one problem, that might be enough to fix.
{
"sideEffects": false,
"module": "./index.js",
"main": "../node/styles/index.js",
"types": "./index.d.ts"
}https://unpkg.com/browse/@material-ui/core@5.0.0-alpha.20/styles/package.json
{
"sideEffects": false,
"module": "./index.js",
"main": "..\\node\\styles\\index.js",
"types": "./index.d.ts"
}https://unpkg.com/browse/@material-ui/core@5.0.0-alpha.21/styles/package.json
It's the first time we make a release from a Windows machine.
oliviertassinari
commented
3 years ago Would the following be enough for fixing it in the next time we release it from a Windows machine?
diff --git a/scripts/copy-files.js b/scripts/copy-files.js
index 146adead04..229b21d7da 100644
--- a/scripts/copy-files.js
+++ b/scripts/copy-files.js
@@ -31,7 +31,7 @@ async function createModulePackages({ from, to }) {
const packageJson = {
sideEffects: false,
module: './index.js',
- main: path.join('../node', directoryPackage, 'index.js'),
+ main: `../node/${directoryPackage}/index.js`,
types: './index.d.ts',
};In anycase, we round-robin releases, the next release (v5.0.0-alpha.22) won't happen from a Windows machine, but we still need to fix it for the next time.
mainfraame
commented
3 years ago I'm also seeing a build issue when using v5.0.0-alpha.21
This only occurs when importing the following:
import {createSvgIcon} from '@material-ui/core';
this imports from:
node_modules/@material-ui/icons/utils/createSvgIcon.js
which has a require statement that is referencing an esm file:
var _utils = require("@material-ui/core/utils"); // <-- culpritError [ERR_REQUIRE_ESM]: Must use import to load ES Module: /node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.require() of /node_modules/@babel/runtime/helpers/esm/extends.js from /node_modules/@material-ui/core/utils/createSvgIcon.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /node_modules/@babel/runtime/helpers/esm/package.json.
seyedasfar
commented
3 years ago When this going to solve?
oliviertassinari
commented
3 years ago When this going to solve?
@usama-asfar As soon as we make a new release. Maybe tomorrow so that developers coming back from holidays can have a working environment with the latest changes.
LucaNerlich
commented
3 years ago I am experiencing the same issue, since ive upgraded once to Alpha 21. Even after reverting my package.json and cleaning the npm cache, the problem persists.
oliviertassinari
commented
3 years ago v5.0.0-alpha.22 was released
samkelleher
commented
3 years ago I'm on @mui/core@5.0.0-alpha.47 and still have this issue.
/node_modules/@mui/material/styles/index.js:1
export { default as adaptV4Theme } from './adaptV4Theme';
^^^^^^
SyntaxError: Unexpected token 'export'
at compileFunction (<anonymous>)
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:94:18)
at Object.@mui/material/styles/index.js (/dist/webpack:/project/external commonjs "@mui/material/styles/index.js":1:1)
After updating the following dependencies, the project fails at build time:
Building the app produces the following error. I went through the release changes, but I couldn't find the reason.
Current Behavior 😯
Expected Behavior 🤔
Steps to Reproduce 🕹
Steps:
1. 2. 3. 4.
Context 🔦
Your Environment 🌎
`npx @material-ui/envinfo`
``` System: OS: macOS 11.1 Binaries: Node: 12.20.0 - ~/.asdf/installs/nodejs/12.20.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.8 - ~/.asdf/installs/nodejs/12.20.0/bin/npm Browsers: Chrome: 87.0.4280.88 Edge: Not Found Firefox: 83.0 Safari: 14.0.2 npmPackages: @emotion/react: 11.1.4 => 11.1.4 @emotion/styled: 11.0.0 => 11.0.0 @material-ui/core: 5.0.0-alpha.21 => 5.0.0-alpha.21 @material-ui/icons: 5.0.0-alpha.21 => 5.0.0-alpha.21 @material-ui/lab: 5.0.0-alpha.21 => 5.0.0-alpha.21 @material-ui/styled-engine: 5.0.0-alpha.21 @material-ui/styles: 5.0.0-alpha.21 @material-ui/system: 5.0.0-alpha.21 @material-ui/types: 5.1.3 @material-ui/unstyled: 5.0.0-alpha.21 @material-ui/utils: 5.0.0-alpha.21 @types/react: 17.0.0 => 17.0.0 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1 typescript: 4.1.3 => 4.1.3 ```