react-markdown导入错误与nextjs 11.1和typescript

Question

这是一个next.js SSG项目，但在npm run dev上，我在尝试import react-markdown时得到以下错误。我不能通过这个步骤来测试next export

我知道react-markdown是一个esm包，但我不清楚如何将esm导入到我的非esm项目中。我丢了什么包裹吗?我没有使用顺风css

如果有任何帮助，我将不胜感激。

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ReactDOMServerRenderer.render

package.json

{
"browserslist": [
...
],
"dependencies": {
"autoprefixer": "^10.3.6",
"axios": "^0.21.4",
"next": "^11.1.2",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^6.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-markdown": "^7.1.0",
"swr": "^1.0.1"
},
"devDependencies": {
"@types/jest": "^27.0.2",
"@types/react": "^17.0.25",
"babel-jest": "^27.2.4",
"express": "^4.17.1",
"jest": "^27.3.1",
"typescript": "^4.4.2"
},
"engines": {
"node": ">=14.17.6",
"npm": ">=6.14.15"
},
"name": "...",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' NODE_ENV='development' node server.js",
"export": "next export",
"start": "next start",
"test": "jest",
},
"version": "0.1.0"
}

next.config.js

module.exports = {
...
experimental: {
esmExternals: true, //also tried 'loose'
}
...
};

tsconfig.json

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "preserve",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"downlevelIteration": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "es5"
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

组件

import React from 'react';
import ReactMarkdown from 'react-markdown';
type TestComponentProps = {
summaryTitle: string;
markdownString: string;
};
export const TestComponent = ({ summaryTitle, markdownString }: TestComponentProps): JSX.Element => {
return (
<div className="container">
<h2 id="ratingsId">
{summaryTitle}
</h2>
<p>{markdownString}</p>
<ReactMarkdown>{markdownString}</ReactMarkdown>
</div>
);
};

Answer 1

你需要强制ReactMarkdown在客户端运行

const ReactMarkdown= dynamic(() => import('react-markdown'),{ ssr: false })