aarongarciah
commented
2 months ago @gaetansnl can you provide a sandbox or repository so we can properly check?
Closed gaetansnl closed 1 month ago
aarongarciah
commented
2 months ago @gaetansnl can you provide a sandbox or repository so we can properly check?
gaetansnl
commented
2 months ago @aarongarciah here is a minimal reproduction https://codesandbox.io/p/devbox/peaceful-estrela-5qtqsj
aarongarciah
commented
2 months ago Just tested your sandbox locally and I reproduced the issue. Here's the full error output:
cc @brijeshb42 @siriwatknp
siriwatknp
commented
2 months ago 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.
rkurbatov
commented
2 months ago 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.
samuelgoldenbaum
commented
1 month ago 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.
brijeshb42
commented
1 month ago 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.
siriwatknp
commented
1 month ago 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.
aleksandrjet
commented
1 month ago 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/linkin 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/envinfoSearch keywords: next/link pigmentcss
Search keywords: