Not clear what the module should return

[robations]

• Operating System: MacOS
• Node Version: 12.18.3
• NPM Version: 6.14.6
• webpack Version: 5.35.0
• remark-loader Version: 4.0.0

Expected Behavior

The examples in readme show console.log() but not what might be returned.

This might also be a bug, but I can't tell at the moment.

Do we expect...

1. Importing a markdown doc returns module.default that is raw html content?

OR

2. Importing a markdown doc returns module.default that is a path/URL to a compiled markdown file (e.g. raw as html, when using RemarkHTML). The path can then be returned using something like fetch() ?

Actual Behavior

Importing a markdown doc returns a path to a compiled JS file, so accessing the raw html requires a double import. Though webpack IIRC won't handle double imports (too dynamic to know what the path will be).

Code

// webpack.config.js
            {
                test: /\.md$/,
                use: [
                    {
                        loader: require.resolve("html-loader"),
                    },
                    {
                        loader: require.resolve("remark-loader"),
                        options: {
                            remarkOptions: {
                               plugins: [RemarkHTML],
                            },
                        },
                     },
                 ],
            },

// currently trying to do something like this, except this displays JS code instead of HTML:
    const Body = React.lazy(() =>
        import("../../assets/documents/" + doc + ".md")
            .then((url) => fetch(url.default))
            .then((res) => res.text())
            .then((content) => {
                console.log(content); // 1
                return ({
                    default: () => (
                        <div dangerouslySetInnerHTML={{__html: content}}/>
                    ),
                });
            }),

// content string at 1 looks like:
// module
var code = "<h1>lorem ipsum....";
export default code;

NB There are some other webpack module rules applied (fairly standard rules for handling images, css, JS), but at the moment I can't see how/if they impact on the remark-loader behaviour.

[alexander-akait]

Can you provide full configuration? I can't reproduce, example from README works fine

[robations]

Hi @alexander-akait, thanks very much for your reply. My main point was that it's unclear from the docs what should be happening. Can you clarify what I should get when importing a .md module (let's say with the RemarkHTML plugin)?

But my guess is that what I'm seeing is not correct, for whatever reason (wrong dependency versions? conflict with webpack ecosystem?).

But if I can create a minimal reproduction of what I'm seeing, I will post — maybe won't have time until the weekend.

[alexander-akait]

@robations You should get html in your case

[alexander-akait]

You don't need fetch here, because your content will be inlined in files, if you want to use fetch you need to using assets modules (resource)

[robations]

Thanks, yes I was expecting to see html at first.

What I'm seeing is more like what happens if you import a .jpg file, you get an image URL that can be passed to (e.g.) <img src={theImage}/>. The other webpack rules have file extension tests that should exclude markdown, but something must be converting the import to return a URL. I'll do some more digging.