Options to use for an html-only loader rule

[orazdow]

Hello, I would like to load and import .html files as I am doing with mdx but I noticed that the behavior to parse html inside markdown is more strict and sensitive to indentation. If I where to make a separate rule in webpack, are there options for @mdx-js/loader that would change this behavior do html files can be imported as components without adhering to any markdown indentation?

Thanks I hope the question makes sense.

[wooorm]

In v2+, use an .md extension for markdown (which includes HTML). Use an .mdx extension for MDX (which includes JSX).

[orazdow]

Using v2 I can only replicate the problem with very messy html, ie the opening element and inner content on one line and the closing tag on another. I think rehype-raw would cover these cases, but I also noticed the error reporting from the mdx loader is is actually quite good there. To use html files I think a separate webpack rule with options.mdExtensions set to use .html, and allowdangeroushtml would be enough.

[wooorm]

I remains hard to guess your problem because I don’t have enough information. But yes, MDX 2 is good. Though no, MDX is not an HTML parser.

[orazdow]

It seems I can't use rehype-raw in a commonjs webpack config, so maybe I will have to keep looking for a way to import html as a component. That was my goal though.

[wooorm]

• You can perhaps turn the CJS webpack config into an MJS webpack config?
• You can turn HTML into React components with unified, rehype-parse, and rehype-react, you could make your own loader to do that!
• There was a similar discussion in xdm a couple months ago: Adding compilation from HTML wooorm/xdm#101

[orazdow]

Yes I agree to import html into react making a loader is the way to do it. The simple way would be to use 'dangerouslySetInnerHTML' in the loader, but using rehype would be more correct, so it would be a loader for rehype-parse and rehype-react. I keep forgetting that JSX and HTML are not the same thing so trying to make the mdx-loader do all that isn't the right thing.