Could not work with nextjs v13 appdir

[taoqf]

描述这个Bug

could not preview mermaid.

版本号

nodejs v18 nextjs v13

问题重现链接

No response

[imzbf]

'use client'; may need to be set in your page.

[taoqf]

Maybe it's not 'use client' cause this issue.
I do have 'use client' in my page.
I find when refresh preview, the image would show for a very shot time, after that, seems like something clear mermaid and the chart would disappear.

And, there is a warning

- warn ./node_modules/.pnpm/md-editor-rt@4.4.0_@codemirror+state@6.2.1_@codemirror+view@6.17.0_@lezer+common@1.0.4_react-dom@18.2.0_react@18.2.0/node_modules/md-editor-rt/lib/cjs/chunks/Editor.cjs
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/.pnpm/md-editor-rt@4.4.0_@codemirror+state@6.2.1_@codemirror+view@6.17.0_@lezer+common@1.0.4_react-dom@18.2.0_react@18.2.0/node_modules/md-editor-rt/lib/cjs/chunks/Editor.cjs
./node_modules/.pnpm/md-editor-rt@4.4.0_@codemirror+state@6.2.1_@codemirror+view@6.17.0_@lezer+common@1.0.4_react-dom@18.2.0_react@18.2.0/node_modules/md-editor-rt/lib/cjs/index.cjs
./src/app/page.tsx

this is my test code

src/app/page.tsx

'use client';

import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
import { useState } from 'react';
import styles from '../styles/Home.module.css';

export default function Page() {
	const [text, setText] = useState('# md-editor-v3');

	return (
		<div className={styles.container}>
			<main className={styles.main}>
				<h1 className={styles.title}>
					Welcome to <a href="https://nextjs.org">Next.js!</a>
				</h1>

				<p className={styles.description}>
					Get started by editing <code className={styles.code}>pages/index.js</code>
				</p>

				<MdEditor modelValue={text} onChange={setText} />
			</main>
		</div>
	);
}

I just change the example code, and using with next@latest and react@latest

[taoqf]

这个问题的原因我找到并且验证了，但我没找到最优美的解决办法。@imzbf 能否给出更好的解决办法呢？原因如下：
在useMarkdownIt中replaceMermaid的调用过早了，因为html的变化会导致replaceMermaid的调用，但html的变化同样会导致ContentPreview中html的变化，而html的变化会导致在预览中将replaceMermaid生成的图被替换掉。我现在的解决办法是在useMarkdownIt中将replaceMermaid的调用推迟10毫秒。但是你知道，这个10毫秒它不是一个理想值，因为你不可能确定在不同的电脑上这个值是否可靠。

[imzbf]

这个问题的原因我找到并且验证了，但我没找到最优美的解决办法。@imzbf 能否给出更好的解决办法呢？原因如下： 在useMarkdownIt中replaceMermaid的调用过早了，因为html的变化会导致replaceMermaid的调用，但html的变化同样会导致ContentPreview中html的变化，而html的变化会导致在预览中将replaceMermaid生成的图被替换掉。我现在的解决办法是在useMarkdownIt中将replaceMermaid的调用推迟10毫秒。但是你知道，这个10毫秒它不是一个理想值，因为你不可能确定在不同的电脑上这个值是否可靠。

这里确实有个问题，作者没注意到，它在正常的单页应用中没有影响，但是在next中有问题，我尝试修复看看

不过我刚刚没有能还原你这边报错的问题，可能需要这边修复后通过测试版这边协助验证一下

[taoqf]

https://github.com/taoqf/test-md-editor-rt
就这样就可以，很容易复现的呀

[imzbf]

https://github.com/taoqf/test-md-editor-rt 就这样就可以，很容易复现的呀

我忘记我的next13环境解决过这个问题了，所以没复现，这个问题是因为动态的import导致的，需要对next进行一点配置

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          fs: false,
        },
      };
    }
    config.module = {
      ...config.module,
      exprContextCritical: false,
    };
    return config;
  },
};

module.exports = nextConfig;

[imzbf]

这个问题的原因我找到并且验证了，但我没找到最优美的解决办法。@imzbf 能否给出更好的解决办法呢？原因如下： 在useMarkdownIt中replaceMermaid的调用过早了，因为html的变化会导致replaceMermaid的调用，但html的变化同样会导致ContentPreview中html的变化，而html的变化会导致在预览中将replaceMermaid生成的图被替换掉。我现在的解决办法是在useMarkdownIt中将replaceMermaid的调用推迟10毫秒。但是你知道，这个10毫秒它不是一个理想值，因为你不可能确定在不同的电脑上这个值是否可靠。

另外，我在4.5.0-beta.1中修复了这个问题，你可以通过下面的方式安装，4.5的文档没有发布，可以暂时忽略新增的功能

pnpm i md-editor-rt@beta

[imzbf]

Latest version has been released

[gorgulenkozxc]

encountered an issue with the page simply refusing to load after the build
quite curious that I didn't have such a problem with run dev
I tried everything (react-markdown, md-editor-rt@beta, 'use client', webpack config), but nextjs upgrade from 13.4.9 to the latest version (13.5.6) helped

npm i next@13