Closed gaetansnl closed 1 month ago
@gaetansnl can you provide a sandbox or repository so we can properly check?
@aarongarciah here is a minimal reproduction https://codesandbox.io/p/devbox/peaceful-estrela-5qtqsj
Just tested your sandbox locally and I reproduced the issue. Here's the full error output:
cc @brijeshb42 @siriwatknp
Found that the error occur when the component is async
.
This is the before transformation that wyw-in-js tries to evaluate:
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__wywPreval = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _jsxDevRuntime = require("react/jsx-dev-runtime");
var _material = require("__barrel_optimize__?names=List,ListItemButton,ListItemText!=!@mui/material");
var _link = _interopRequireDefault(require("next/link"));
var _exp = /*#__PURE__*/function _exp() {
return {
width: "100%",
height: "100%",
overflowY: "scroll"
};
};
var _exp2 = /*#__PURE__*/function _exp2() {
return _material.List;
};
function _Home() {
_Home = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
return _context.abrupt("return", /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_material.List, {
sx: "s1bdmy7h",
children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_material.ListItemButton, {
href: {
pathname: "/documents"
},
component: _link["default"],
children: /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_material.ListItemText, {
primary: "gg"
}, void 0, false, {
fileName: "/Users/siriwatknp/practice-repos/material-ui-v6-nextjs-pigment/src/app/page.tsx",
lineNumber: 8,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: "/Users/siriwatknp/practice-repos/material-ui-v6-nextjs-pigment/src/app/page.tsx",
lineNumber: 7,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: "/Users/siriwatknp/practice-repos/material-ui-v6-nextjs-pigment/src/app/page.tsx",
lineNumber: 6,
columnNumber: 5
}, this));
case 1:
case "end":
return _context.stop();
}
}, _callee, this);
}));
return _Home.apply(this, arguments);
}
var __wywPreval = exports.__wywPreval = {
_exp: _exp,
_exp2: _exp2
};
A lot of modules are not necessary to be evaluated. I am not sure if Pigment CSS supports async component already.
https://github.com/mui/pigment-css/issues/206 - interesting, I just reported the very same error that happens on NextJS v12 when I use next-i18next
useTranslate()
hook.
I am finding it challenging to stay positive and take this library seriously in its current state, with so many issues with elementary requirements like this, which was reported more than a month ago. Yet, docs are saying:
...it is recommended to fully migrate to Pigment CSS in the end.
I've been using mui for many years at the enterprise level, but this is just painful.
Apologies for the delay. This particular issue went completely out of my radar. I'll post an update when I have a fix. Note that this is an alpha release right now and we are trying to fix as much issues as we can before a stable release.
I am finding it challenging to stay positive and take this library seriously in its current state, with so many issues with elementary requirements like this, which was reported more than a month ago
Sorry for the confusion, what the docs trying to say is to have one styling solution at the end (either Emotion or Pigment CSS).
If you don't have any problem using Emotion as a styling engine, I don't see any reason for you to migrate to Pigment CSS.
I saw that it has https://github.com/mui/pigment-css/pull/228, but the problem still keeps. I got to reproduce this in curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-nextjs-ts
by addingimport NextLink from 'next/link'
and make the page is async
I used next@14.2.11
and @pigment-css/nextjs-plugin@0.0.22
Is there any understanding when it will fix?
Steps to reproduce
Link to live example: (required)
Steps:
Use
next/link
in async componentCurrent behavior
Expected behavior
No error
Context
No response
Your environment
``` System: OS: macOS 14.3.1 Binaries: Node: 22.5.1 - /opt/homebrew/bin/node npm: 10.8.2 - /opt/homebrew/bin/npm pnpm: 9.6.0 - /opt/homebrew/bin/pnpm Browsers: Chrome: 127.0.6533.100 Edge: Not Found Safari: 17.3.1 npmPackages: @emotion/react: 11.13.0 @emotion/styled: 11.13.0 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/icons-material: next => 6.0.0-beta.5 @mui/material: next => 6.0.0-beta.5 @mui/material-pigment-css: next => 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 @mui/private-theming: 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 @mui/styled-engine: 6.0.0-beta.5 @mui/system: 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 @mui/types: 7.2.15 @mui/utils: 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 @types/react: ^18 => 18.3.3 react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 typescript: ^5 => 5.5.4 ```npx @mui/envinfo
Search keywords: next/link pigmentcss
Search keywords: