Closed arvinxx closed 3 weeks ago
https://github.com/dev-pi2pie/next-v14_2-with-rehype-pretty-code-and-shiki-transformer
I've made a repo which reproducing the similar issue which happened on the build stage. And this repo is a simple editor, which input something like markdown syntax to the text area and get the result back.
And the issue happened in the code:
I think the issue is from the code:
import {
transformerNotationDiff,
transformerNotationWordHighlight,
transformerNotationHighlight,
} from "@shikijs/transformers";
If I do not use the transformers
in the rehype-pretty-code
, and the build will be success.
However, good to see @arvinxx mentioned the issue I encountered too.
i have also faced similar issue. i was using nextra with app router.
this following package is creating problem from nextra: @theguild/remark-mermaid
me too
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
same error here
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
Currently this is the only solution, you can only import in async to ignore errors.
I'm looking at this as well.
Edit:
Top level async/await will get a warning. So we can use use
hook.
Use it in async component or dynamic import this component.
const codeHighlighterPromise = (async () => {
if (isServerSide) return
const [{ getHighlighterCore }, getWasm, { codeHighlighter }] =
await Promise.all([
import('shiki/core'),
import('shiki/wasm').then((m) => m.default),
import('./core'),
])
const core = await getHighlighterCore({
themes: [
import('shiki/themes/github-light.mjs'),
import('shiki/themes/github-dark.mjs'),
],
langs: [],
loadWasm: getWasm,
})
return {
codeHighlighter: core,
fn: (o: { lang: string; attrs: string; code: string }) => {
return codeHighlighter(core, o)
},
}
})()
export const ShikiHighLighter: FC<Props> = (props) => {
const { lang: language, content: value, attrs } = props
const codeHighlighter = use(codeHighlighterPromise)
// ...
}
Good, after I got the solution from @Innei provided --> quick link
I tried this solution in the repo, which I made for reproducing this issue before.
I made a new branch, and tried this solution, and it works.
(with dynamic import
)
The new branch in the repo for reproducing this issue: with-dynamic-import
Key diff code in src/app/page.tsx
:
import { EditorProvider } from "@/components/editor/editorContext";
- import EditorResult from "@/components/editor/editorResult";
import EditorTextArea from "@/components/editor/editorTextArea";
+ import dynamic from "next/dynamic";
export default function Home() {
+ const EditorResult = dynamic(
+ () => import("@/components/editor/editorResult"),
+ { ssr: false }
+ );
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<EditorProvider>
<div className="lg:max-w-[1024px] mx-auto flex flex-col gap-5 mt-10 p-2">
<h1>Editor</h1>
<EditorTextArea className="text-black" />
<article className="prose dark:text-white dark:prose-headings:text-white">
<EditorResult />
</article>
</div>
</EditorProvider>
</main>
);
}
Thanks @Innei pointed out the solution
Let me introduce a more easy way to fix it:
// next.config.mjs
const nextConfig = {
// ... other config
experimental: {
optimizePackageImports: [
// ... other packages
+ 'shiki',
],
// ...
}
// ...
Hi @arvinxx, thanks for sharing, really a good solution, nice! 👍
I add this solution to a new branch in the repo which I made for reproducing this issue.
new branch: with-optimize-package-imports
Adding "shiki" to experimental.optimizePackageImports
didn't work for me. It just gave a different error message: TypeError: Cannot read properties of undefined (reading 'transformers')
on codeToHtml()
calls.
Adding "shiki" to transpilePackages
did fix the issue for me:
next.config.js
:
module.exports = {
transpilePackages: ['components', 'shared', 'shiki'],
};
Cool, @mpereira, thanks for sharing this case.
I added this solution to a new branch in the repo which I made for reproducing this issue.
And also added the new component to demo what happened on while calling codeToHtml()
.
new branch: with-transpile-packages-and-code-to-html
We had mad some module resolution improvements for ESM package on 14.2.8, the original repro branch is gone. Would someone else help check if it's working well now without the above workaround (no pkg optimization, no transpile pkg)? Thanks 🙏 If it's not working please lmk with your reproduction, I'd love to help take a look
Hi @huozhi, good to let me know this good news. I've made a new branch: upgrade-to-v14_2_8 (no pkg optimization, no transpile pkg)
Work as intended, cool 🎉
Amazing, thanks for confirming. I'll close this as resolved!
works well, thx
Let me introduce a more easy way to fix it:
// next.config.mjs const nextConfig = { // ... other config experimental: { optimizePackageImports: [ // ... other packages + 'shiki', ], // ... } // ...
this broke my loading page hahha now loading is not showing anymore!
@FrancescoSaverioZuppichini could you submit a new issue with a repro? It's hard for us to tell if it's some other issue is causing that. We'd like to assist in looking into that case further
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Link to the code that reproduces this issue
https://github.com/lobehub/lobe-chat/tree/arvinxx-patch-1
To Reproduce
Clone Repo
Checkout branch
install deps
run build
Current vs. Expected behavior
with
next@14.1.4
, this can be build success.but with
next@14.2.1
, the build is failed. the console error:Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, Module resolution (CJS / ESM, module resolving)
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
I have check the
Next.js 14.2.1-canary.3
. this issue is still remain