`ERR_MODULE_NOT_FOUND` When importing from the root in Next.js

[KenzoBenzo]

Hey there 👋

First off, this project is fantastic! I haven't gone looking for a codeblocks lib in a while and had no idea this existed. Well documented and exactly what I needed.

One note, when using with the /pages router in Next.js, there is a ERR_MODULE_NOT_FOUND error unless the import directly points to the code-block file i.e.:

import { CodeBlock, CodeBlockProps } from "react-code-block/dist/code-block";

If it's helpful, this is the full output

⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/makennasmutz/Documents/GitHub/makenna.dev/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-code-block/dist/code-block' imported from /Users/makennasmutz/Documents/GitHub/makenna.dev/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-code-block/dist/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:263:11)
    at moduleResolve (node:internal/modules/esm/resolve:908:10)
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) 

[blenderskool]

Hey @KenzoBenzo, thank you so much for the feedback! This is an interesting case, as the docs for this package runs on Next.js Pages router and the package import seems to work correctly https://github.com/blenderskool/react-code-block/tree/main/packages/docs. Having said that I'm able to reproduce it on a new Next.js project so perhaps something has changed. Thanks for reporting this issue.

[shelcia]

Hi !

Awesome project, love the clean design and documentation.

I am also encountering similar error on nextjs app, when Codeblocks is invoked inside /pages

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/shelciaabi/Documents/code stuff/reactfile/api
docucraft/client/node_modules/react-code-block/dist/code-block' imported from /Users/shelciaabi/Documents/code
stuff/reactfile/api-docucraft/client/node_modules/react-code-block/dist/index.js

[KenzoBenzo]

@shelcia if you direct the import, should work. i.e.

import { CodeBlock, CodeBlockProps } from "react-code-block/dist/code-block";

[Leg3ndary]

Also have this issue but this worked for me

@shelcia if you direct the import, should work. i.e.

import { CodeBlock, CodeBlockProps } from "react-code-block/dist/code-block";