Importing next/link in async component produces error
#204
Comments
gaetansnl
added
the
status: waiting for maintainer
|
@gaetansnl can you provide a sandbox or repository so we can properly check? |
aarongarciah
added
status: waiting for author
|
@aarongarciah here is a minimal reproduction https://codesandbox.io/p/devbox/peaceful-estrela-5qtqsj |
github-actions
bot
added
status: waiting for maintainer
|
Just tested your sandbox locally and I reproduced the issue. Here's the full error output: Error |
aarongarciah
added
bug 🐛
aarongarciah
changed the title
aarongarciah
changed the title
siriwatknp
changed the title
|
Found that the error occur when the component is 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. |
siriwatknp
changed the title
async component produces error
siriwatknp
removed
the
status: waiting for maintainer
|
#206 - interesting, I just reported the very same error that happens on NextJS v12 when I use |
|
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:
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. |
1 task
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 #228, but the problem still keeps. I got to reproduce this in I used Is there any understanding when it will fix? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Steps to reproduce
Link to live example: (required)
Steps:
Do PigmentCSS migration on new nextjs project with MUI V6
Use
next/linkin async componentCurrent behavior
Expected behavior
No error
Context
No response
Your environment
npx @mui/envinfoSearch keywords: next/link pigmentcss
Search keywords:
The text was updated successfully, but these errors were encountered: