[BUG] Cannot load file './index' from module "xxx"

[HereOrCode]

What happened?

When I use react-markdown, it gives me the error message:

Cannot load file './index' from module 'devlop'

https://github.com/remarkjs/react-markdown

---

Other packages will also show this error, for example: openai-streams

https://github.com/SpellcraftAI/openai-streams

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• [ ] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[moisesja]

I get a similar error after I run "plasmo dev":

Plasmo v0.83.0 🔴 The Browser Extension Framework 🔵 INFO | Starting the extension development server... 🔵 INFO | Loaded environment variables from: [] 🔴 ERROR | Build failed. To debug, run plasmo dev --verbose. 🔴 ERROR | Failed to resolve '@ipld/dag-cbor' from './node_modules/.pnpm/@[email protected]/node_modules/@tbd54566975/dwn-sdk-js/dist/esm/src/utils/cid.js' 🔴 ERROR | Cannot load file './index' from module '@ipld/dag-cbor'

---

I figure the internal bundling process cannot find the npm package, so I explicitly added this package dependency. The package.json now contains it, as well as the node_modules directory. This did not help at all!

[louisgv]

https://github.com/remarkjs/react-markdown/blob/main/package.json

https://github.com/TBD54566975/dwn-sdk-js/blob/main/package.json

This is related to the parcel package resolver in the current version - it's not resolving these ESM packages properly because their package.json is an edge case (their exports property does not expose all files).

[WilliamKeating]

https://github.com/remarkjs/react-markdown/blob/main/package.json

https://github.com/TBD54566975/dwn-sdk-js/blob/main/package.json

This is related to the parcel package resolver in the current version - it's not resolving these ESM packages properly because their package.json is an edge case (their exports property does not expose all files).

Is there a way to modify the package.json to expose all files or downgrade the parcel package resolver? I have been running into this issue with many packages such as "svelte-french-toast", and "@steeze-ui/svelte-icon". Any help would be appreciated.

[WilliamKeating]

https://github.com/remarkjs/react-markdown/blob/main/package.json https://github.com/TBD54566975/dwn-sdk-js/blob/main/package.json This is related to the parcel package resolver in the current version - it's not resolving these ESM packages properly because their package.json is an edge case (their exports property does not expose all files).

Is there a way to modify the package.json to expose all files or downgrade the parcel package resolver? I have been running into this issue with many packages such as "svelte-french-toast", and "@steeze-ui/svelte-icon". Any help would be appreciated.

My problem was fixed by referencing the index.js file in the node_module directly e.g. import toast, { Toaster } from "~node_modules/svelte-french-toast/dist/index.js"

[HereOrCode]

@WilliamKeating

I'm using wxt now. You can try it.

https://github.com/wxt-dev/wxt

[edmund-io]

@WilliamKeating @louisgv

I am also getting the same issue with react-markdown

> plasmo dev

🟣 Plasmo v0.84.0
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Loaded environment variables from: [ '.env' ]
🔴 ERROR  | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR  | Failed to resolve 'devlop' from './node\_modules/.pnpm/[email protected]\_@[email protected]\[email protected]/node\_modules/react-markdown/lib/index.js'
🔴 ERROR  | Cannot load file './index' from module 'devlop'

I have tried importing the index.js in various ways as @WilliamKeating suggested:

// Tried this
import Markdown from "react-markdown"
// Tried this
import { Markdown } from "~../node_modules/react-markdown/lib/index"
// Tried this
import Markdown from "~../node_modules/react-markdown"

Would like to get this working somehow as there aren't many good alternatives out there for rendering markdown

Thanks!

[hzeyuan]

I've been looking at this issue for a whole day, and I feel like I have a good understanding of it. If you install the latest version of react-markdown, 9.0.0, it will throw an error: 'Cannot load file './index' from module "xxx". However, if you install version 8.0.7, it runs successfully. But when you try to parse code, markdown throws an error 'Uncaught TypeError: Cannot convert undefined or null to object'. Here is my code:

    <ReactMarkdown
     remarkPlugins={[remarkMath, remarkBreaks, remarkGfm]}
     rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
     className={`markdown-body markdown-custom-styles !text-base font-normal`}
     linkTarget="_blank"
     components={{
       a: ({ node, ...props }) => {
         if (!props.title) {
           return <a {...props} />
         }
         return (
           <a {...props} title={undefined} />
         )
       },
       code: ({ node, inline, className, children, ...props }) => {
         if (inline) {
           return (
             <code className={className} {...props}>
               {children}
             </code>
           )
         }
         return <CustomCode className={className}>{children}</CustomCode>
       },
     }}
   >
     {children}
   </ReactMarkdown>

This issue has been troubling me for a long time. The eventual solution was to directly reference the bundled JS file like this: import ReactMarkdown from '~lib/react-markdown.min.js' instead of import ReactMarkdown from 'react-markdown'

when parsing code, such as ```python, it can be parsed correctly。

I hope this can be helpful to you all

[meekr]

@WilliamKeating @louisgv

I am also getting the same issue with react-markdown

> plasmo dev

🟣 Plasmo v0.84.0
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Loaded environment variables from: [ '.env' ]
🔴 ERROR  | Build failed. To debug, run plasmo dev --verbose.
🔴 ERROR  | Failed to resolve 'devlop' from './node\_modules/.pnpm/[email protected]\_@[email protected]\[email protected]/node\_modules/react-markdown/lib/index.js'
🔴 ERROR  | Cannot load file './index' from module 'devlop'

I have tried importing the index.js in various ways as @WilliamKeating suggested:

// Tried this
import Markdown from "react-markdown"
// Tried this
import { Markdown } from "~../node_modules/react-markdown/lib/index"
// Tried this
import Markdown from "~../node_modules/react-markdown"

Would like to get this working somehow as there aren't many good alternatives out there for rendering markdown

Thanks!

Hi munjyong, Any luck with the react-markdown problem? I came across this problem, have spent days searching for fixes but found nothing.

[AlphaDu]

I've been looking at this issue for a whole day, and I feel like I have a good understanding of it. If you install the latest version of react-markdown, 9.0.0, it will throw an error: 'Cannot load file './index' from module "xxx". However, if you install version 8.0.7, it runs successfully. But when you try to parse code, markdown throws an error 'Uncaught TypeError: Cannot convert undefined or null to object'. Here is my code:

    <ReactMarkdown
     remarkPlugins={[remarkMath, remarkBreaks, remarkGfm]}
     rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
     className={`markdown-body markdown-custom-styles !text-base font-normal`}
     linkTarget="_blank"
     components={{
       a: ({ node, ...props }) => {
         if (!props.title) {
           return <a {...props} />
         }
         return (
           <a {...props} title={undefined} />
         )
       },
       code: ({ node, inline, className, children, ...props }) => {
         if (inline) {
           return (
             <code className={className} {...props}>
               {children}
             </code>
           )
         }
         return <CustomCode className={className}>{children}</CustomCode>
       },
     }}
   >
     {children}
   </ReactMarkdown>

This issue has been troubling me for a long time. The eventual solution was to directly reference the bundled JS file like this: import ReactMarkdown from '~lib/react-markdown.min.js' instead of import ReactMarkdown from 'react-markdown'

when parsing code, such as ```python, it can be parsed correctly。

I hope this can be helpful to you all

Could you explain it in more detail? I went your way and it didn't work out . what's the '~lib/react-markdown.min.js mean ? it means 'node_modules/react-markdown/react-markdown.min.js I tryed but didn't work

[zhenghan2017]

I've been looking at this issue for a whole day, and I feel like I have a good understanding of it. If you install the latest version of react-markdown, 9.0.0, it will throw an error: 'Cannot load file './index' from module "xxx". However, if you install version 8.0.7, it runs successfully. But when you try to parse code, markdown throws an error 'Uncaught TypeError: Cannot convert undefined or null to object'. Here is my code:

    <ReactMarkdown
     remarkPlugins={[remarkMath, remarkBreaks, remarkGfm]}
     rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
     className={`markdown-body markdown-custom-styles !text-base font-normal`}
     linkTarget="_blank"
     components={{
       a: ({ node, ...props }) => {
         if (!props.title) {
           return <a {...props} />
         }
         return (
           <a {...props} title={undefined} />
         )
       },
       code: ({ node, inline, className, children, ...props }) => {
         if (inline) {
           return (
             <code className={className} {...props}>
               {children}
             </code>
           )
         }
         return <CustomCode className={className}>{children}</CustomCode>
       },
     }}
   >
     {children}
   </ReactMarkdown>

This issue has been troubling me for a long time. The eventual solution was to directly reference the bundled JS file like this: import ReactMarkdown from '~lib/react-markdown.min.js' instead of import ReactMarkdown from 'react-markdown'

when parsing code, such as ```python, it can be parsed correctly。

I hope this can be helpful to you all

Could you explain it in more detail? I went your way and it didn't work out . what's the '~lib/react-markdown.min.js mean ? it means 'node_modules/react-markdown/react-markdown.min.js I tryed but didn't work

This is a building package. You can clone react-markdown and checkout your project dependence version then you need run npm run build.You will get react-markdown.min.js when it's succeed. Finally, you need copy it to your project.

[arnab710]

I'm also getting the following error while using react-markdown.

Failed to resolve '#minpath' from './node\_modules/.pnpm/[email protected]/node\_modules/vfile/lib/index.js'

[GorvGoyl]

It seems like upgrading Parcel (https://github.com/PlasmoHQ/plasmo/issues/786) should fix the issue. A gentle ping to @louisgv about the open PR :)

[louisgv]

@GorvGoyl That PR has been in limbo for a while because I have not been able to find time to redo it xd.... Def need help on that one

[WynterDing]

same issue with @hzeyuan

I understand why 9.x not working, but in react-markdown 8.x it use main rather than exports

any idea on this? @louisgv

more infomation:

hastToReact is a method exported by react-markdown's dependency package property-infomation, it's a very simple lib.

when i run plasmo dev I came up with this problem, but when i change the code in node_modules, eg: console.log('111');

it works. I suspect after i change the code, there are some cache has been override. But at the first time build, hastToReact is undefined.