Closed Kyhaiu closed 2 years ago
Any updates on this issue? Is this a babel problem?
Any updates on this issue? Is this a babel problem?
I solve this error with a work-arround. Basicly I copy the entire code of usePagination and paste in my project. Also I change the transpiler engine from Babel
to SWC
. That solves my problem, but it's a terrible work-arround.
Observation: I'm not sure about changing the transpiler engine.
π Thanks for using MUI Core!
We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.
For support, please check out https://mui.com/getting-started/support/. Thanks!
If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
I'm getting the same error when using MUI in NextJS. I'm experiencing it with createTheme
instead of usePagination
@Kyhaiu did you get any closer to solving this?
I'm getting the same error when using MUI in NextJS. I'm experiencing it with
createTheme
instead ofusePagination
@Kyhaiu did you get any closer to solving this?
Unfortunately I don't know how to solve this without copying the entire code of usePagination
in my case. But, maybe I can help you, if you provide an example with error on codesandbox
I also get this error while using Mui Joy...
It appears to be an error inside the @mui/joy/styles/extendTheme (in my case). There seems to be an import outside of the module -> Babel Error? Why? I don't know. Maybe it is some error appearing only in combination with NextJS and Mui (Joy) (In my case).
Working with NextJS and Mui Joy
My current Work-around is (as stupid as it sounds) to:
Voila it works again - Like Black magic πͺ
Hope this error gets fixed at some point π€«
I believe this error is still happening.
Simple reproduction repo: https://github.com/TurtIeSocks/nextjs-mui-5.11
@siriwatknp apologies if you're not the correct person to tag, just noticed that you're answering a lot of the MUI issues these days. Should I open a separate issue with the reproduction repo I posted above or keep it to this one?
I'm facing the same problem as @Jonathan-Hofmann mentions but with Vite/SSR. Their workaround is not a valid solution to me.
I apologize for the delay in responding. But so far, I am still using my workaround mentioned in my response to @daniel-boll. The last time I worked on this issue, I discovered that it may be related to the way Next 12 transpiles monorepos. However, even after migrating to version 13 and configuring external dependencies correctly (https://nextjs.org/docs/advanced-features/compiler#module-transpilation), I was unable to get rid of the error. However, as I mentioned earlier, the way I found to solve this problem was by copying the entire usePagination into the project. Below are the copied codes:
... I know the implications of doing this terrible work around, but idk how to solve this ;-; I hope that someday some good samaritan help us with this.
usePagination.js
usePagination.d.ts
I was facing the same issue while using the MUI Joy library in Next.js
I tried adding the transpilePackages: ['@mui/muiComponentPackage']
config option in next.config.js but this didn't help.
What solved the issue for me was making sure I am importing the MUI components as named imports from the general @mui/joy
package and not do default exports from e.g. @mui/joy/Select/Select
Guess the component packages (CommonJS) are exposed as ES modules in the higher packages and this removes the need for Babel to compile to older syntax which seems problematic here
Duplicates
Latest version
Current behavior π―
When I create a DataGrid component using a custom pagination with the
usePagination
hook and run with storybook everything seems ok, and work as I expected. But when I try to use into my code. Things dosen't work fine. I get this annoying error.Screen error stack
Console error stack
Terminal error stack
Expected behavior π€
Work similarly to the behavior that we achieve on storybook.
Steps to reproduce πΉ
I've tried to reproduce it on blitzstack, but unsuccessfully. Because when I trying to replicate the structure that we have on storybook an different error appears and I couldn't solve it.
Context π¦
We are working with MFE (Microfrontend) structure using webpack module federation, thus we believe the error might be on the transpilation process as the babel error suggest.
```json { "name": "@clinical/ui", "version": "1.0.0", "main": "dist/index", "types": "dist/index.d.ts", "license": "MIT", "private": true, "scripts": { "build": "babel --root-mode upward src/ --extensions '.tsx,.ts' --out-dir dist && tsc", "build-storybook": "build-storybook", "clean": "rm -fr dist", "clean:all": "yarn workspace @clinical/ui clean && rm -fr node_modules", "storybook": "start-storybook -p 6006", "test": "jest --config=../../../jest.config.js" }, "dependencies": { "@clinical/core": "1.0.0", "@date-io/dayjs": "^2.14.0", "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/material": "^5.9.0", "@mui/x-data-grid": "^5.12.1", "@mui/x-date-pickers": "^5.0.0-alpha.5", "grommet": "^2.24.0", "grommet-icons": "^4.7.0", "react-feather": "^2.0.10" }, "devDependencies": { "@storybook/addon-essentials": "^6.4.22", "@storybook/react": "^6.4.22" } } ```package.json
```json { "compileOnSave": true, "compilerOptions": { // Extendends start here "baseUrl": ".", "target": "es2017", "module": "commonjs", "lib": ["es6", "dom", "es2016", "es2017"], "jsx": "react", "removeComments": true, "esModuleInterop": true, "resolveJsonModule": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "declaration": true, "allowJs": true, "moduleResolution": "node", "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "allowSyntheticDefaultImports": true, // Extends end here "module": "ESNext", "declarationMap": true, "outDir": "dist", "baseUrl": "./src", "typeRoots": ["node_modules/@types", "src/@types", "../../../node_modules/@types"], "jsx": "preserve" }, "include": ["src/**/*.tsx", "src/**/*.ts"], "exclude": [ "node_modules", ".storybook", "dist", "*.tsbuildinfo", "**/*.stories.tsx", "**/*.test.tsx", "test-helpers" ] } ```tsconfig.json
Observation: The tsconfig is extended from another one.
Your environment π
``` System: OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa) CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz Memory: 16.37 GB / 31.19 GB Container: Yes Shell: 5.8 - /bin/zsh Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm Managers: Apt: 2.0.9 - /bin/apt Utilities: CMake: 3.16.3 - /bin/cmake Make: 4.2.1 - /bin/make GCC: 9.4.0 - /bin/gcc Git: 2.25.1 - /bin/git Ninja: 1.10.0 - /bin/ninja Servers: Nginx: 1.18.0 - /usr/sbin/nginx Virtualization: Docker: 20.10.17 - /bin/docker IDEs: Emacs: 26.3 - /bin/emacs Nano: 4.8 - /bin/nano VSCode: 1.69.1 - /snap/bin/code Vim: 8.1 - /bin/vim Languages: Bash: 5.0.17 - /bin/bash Java: 17.0.3 - /bin/javac Perl: 5.30.0 - /bin/perl Python: 2.7.18 - /bin/python Python3: 3.8.10 - /bin/python3 Browsers: Chrome: 103.0.5060.114 Firefox: 102.0 Vivaldi 5.3.2679.68 stable Brave 103.1.40.113 Monorepos: Yarn Workspaces: 1.22.19 ```npx @mui/envinfo