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

HereOrCode · 2023-09-29T02:41:43Z

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

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

moisesja · 2023-09-29T17:52:20Z

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/@TBD54566975 [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 · 2023-09-29T20:14:07Z

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 · 2023-10-25T20:53:11Z

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 · 2023-10-25T22:23:36Z

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 · 2023-10-26T00:33:10Z

@WilliamKeating

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

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

edmund-io · 2023-12-02T22:24:29Z

@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 · 2023-12-11T03:07:17Z

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 · 2024-03-31T00:18:38Z

@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 · 2024-04-08T10:06:20Z

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 · 2024-04-17T07:13:05Z

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 · 2024-08-05T12:06:22Z

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 · 2024-08-06T08:20:36Z

It seems like upgrading Parcel (#786) should fix the issue.
A gentle ping to @louisgv about the open PR :)

louisgv · 2024-08-07T04:53:07Z

@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 · 2024-08-10T04:56:33Z

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.

HereOrCode added the bug Something isn't working label Sep 29, 2023

WilliamKeating mentioned this issue Oct 26, 2023

Failed to resolve 'svelte-french-toast' kbrgl/svelte-french-toast#57

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

HereOrCode commented Sep 29, 2023

moisesja commented Sep 29, 2023

louisgv commented Sep 29, 2023

WilliamKeating commented Oct 25, 2023

WilliamKeating commented Oct 25, 2023

HereOrCode commented Oct 26, 2023

edmund-io commented Dec 2, 2023

hzeyuan commented Dec 11, 2023 •

edited

Loading

meekr commented Mar 31, 2024 •

edited

Loading

AlphaDu commented Apr 8, 2024 •

edited

Loading

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

zhenghan2017 commented Apr 17, 2024

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

arnab710 commented Aug 5, 2024

GorvGoyl commented Aug 6, 2024

louisgv commented Aug 7, 2024

WynterDing commented Aug 10, 2024 •

edited

Loading

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

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

Comments

HereOrCode commented Sep 29, 2023

What happened?

Version

What OS are you seeing the problem on?

What browsers are you seeing the problem on?

Relevant log output

(OPTIONAL) Contribution

Code of Conduct

moisesja commented Sep 29, 2023

louisgv commented Sep 29, 2023

WilliamKeating commented Oct 25, 2023

WilliamKeating commented Oct 25, 2023

HereOrCode commented Oct 26, 2023

edmund-io commented Dec 2, 2023

hzeyuan commented Dec 11, 2023 • edited Loading

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

meekr commented Mar 31, 2024 • edited Loading

AlphaDu commented Apr 8, 2024 • edited Loading

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

zhenghan2017 commented Apr 17, 2024

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

arnab710 commented Aug 5, 2024

GorvGoyl commented Aug 6, 2024

louisgv commented Aug 7, 2024

WynterDing commented Aug 10, 2024 • edited Loading

hzeyuan commented Dec 11, 2023 •

edited

Loading

meekr commented Mar 31, 2024 •

edited

Loading

AlphaDu commented Apr 8, 2024 •

edited

Loading

WynterDing commented Aug 10, 2024 •

edited

Loading