CRLF breaks importing components when used with front matter
j1mie opened this issue · comments
Hi there, great project!
When I try to import a component below front matter like so:
---
title: Example
description: This is an example
---
import { MDXBreadboard } from 'mdx-breadboard'
It sometimes throws an error:
Uncaught ReferenceError: MDXBreadboard is not defined
When I remove the front matter, the component seems to work just fine.
Any suggestions?
Do you need to import the MDXBreadboard package? If not, just remove that last line - the demo uses it, but you probably don't need it in your own site.
If that doesn't solve the problem, feel free to reopen this.
Hi @jamesknelson this issue isn't relating to MDXBreadboard but any component that's imported this way, below front matter. Are you able to replicate this issue?
Is the error appearing during compilation, or once you run the result? Are you using the loader?
Does the error appear when you paste your content into http://mdxc.reactarmory.com/?
Seems to work fine with your example, I'm using an ejected CRA - so could be a dependency issue. I'll test and get back to you!
Hey there @jamesknelson - tried this again on a fresh CRA instance and getting the same effect.
Error (missing component):
Seems to be putting import statement within <p> tags
The markdown
I'm following the Create React App instructions and rendering out a <DocumentComponent /> in my App.js:
/* eslint-disable import/no-webpack-loader-syntax */
import DocumentComponent from '!babel-loader!mdx-loader!../pages/index.md'
...
render() {
<DocumentComponent />
}It's worth noting that this issue only seems to happen intermittently, on some markdown files. I've yet to figure out why.
The p({}, "import... is interesting - for some reason, the import statement is being treated as raw text.
Any chance you could make a pastebin of one of the source files with the issue?
I've figured this out. It doesn't work for files using CRLF line separators.
Don't think I've permission to re-open @jamesknelson
Thanks for figuring that out. If you can do a PR I'd be happy to merge it, otherwise I'll try and put a fix together once I have some time.
Closing this issue as I've deprecated mdxc in favor of https://github.com/mdx-js/mdx