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

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 })

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

react-markdown import error with nextjs 11.1 and typescript

typescript

es6-modules

next.js

react-markdown