Open HereOrCode opened 11 months ago
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+dwn-sdk-js@0.2.1/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!
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).
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.
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"
@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/react-markdown@9.0.1\_@types+react@18.2.21\_react@18.2.0/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!
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'
I hope this can be helpful to you all
@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/react-markdown@9.0.1\_@types+react@18.2.21\_react@18.2.0/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.
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 ofimport 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
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 ofimport 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.
I'm also getting the following error while using react-markdown
.
Failed to resolve '#minpath' from './node\_modules/.pnpm/vfile@6.0.2/node\_modules/vfile/lib/index.js'
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 :)
@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
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.
What happened?
When I use react-markdown, it gives me the error message:
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
Code of Conduct