Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues in using react-notion-x in NextJS (app structure). #536

Open
vule20 opened this issue Jan 25, 2024 · 1 comment
Open

Issues in using react-notion-x in NextJS (app structure). #536

vule20 opened this issue Jan 25, 2024 · 1 comment

Comments

@vule20
Copy link

vule20 commented Jan 25, 2024

Description

I keep getting errors while using react-notion-x for my NextJS app. In the app/component/NotionPage.tsx, I did included "use client" at the top of the file, however I still get mistakes like this
image

In addition, import { useRouter } from "next/route"; doesn't work too. When I changed it to import { useRouter } from "next/navigation", I solved the problem, however, the rendered content is not exactly same as Notion. Here's the output for my rendering

image
@Jessie-jzn
Copy link

这是一个常见的 TypeScript 错误,提示 prismjs 模块缺少类型声明。

  1. 安装类型声明文件(如果存在):
npm install --save-dev @types/prismjs
  1. 手动添加模块声明文件:
    在项目的根目录下创建一个global.d.ts文件,并在其中添加以下内容:
declare module "prismjs/components/prism-markup-templating.js";
declare module "prismjs/components/prism-markup.js";
declare module "prismjs/components/prism-bash.js";
declare module "prismjs/components/prism-c.js";
declare module "prismjs/components/prism-cpp.js";
declare module "prismjs/components/prism-csharp.js";
declare module "prismjs/components/prism-docker.js";
declare module "prismjs/components/prism-java.js";
declare module "prismjs/components/prism-js-templates.js";
declare module "prismjs/components/prism-coffeescript.js";
declare module "prismjs/components/prism-diff.js";
declare module "prismjs/components/prism-git.js";
declare module "prismjs/components/prism-go.js";
declare module "prismjs/components/prism-graphql.js";
declare module "prismjs/components/prism-handlebars.js";
declare module "prismjs/components/prism-less.js";
declare module "prismjs/components/prism-makefile.js";
declare module "prismjs/components/prism-markdown.js";
declare module "prismjs/components/prism-objectivec.js";
declare module "prismjs/components/prism-ocaml.js";
declare module "prismjs/components/prism-python.js";
declare module "prismjs/components/prism-reason.js";
declare module "prismjs/components/prism-rust.js";
declare module "prismjs/components/prism-sass.js";
declare module "prismjs/components/prism-scss.js";
declare module "prismjs/components/prism-solidity.js";
declare module "prismjs/components/prism-sql.js";
declare module "prismjs/components/prism-stylus.js";
declare module "prismjs/components/prism-swift.js";
declare module "prismjs/components/prism-wasm.js";
declare module "prismjs/components/prism-yaml.js";
  1. 完成这些步骤后,再次运行 npm run build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants