Webpack workaround no longer working from 1.4.6

[robmaas]

The workaround for Webpack warnings described in the REAMDE.md no longer seems to be working for projects using html-react-parser version 1.4.6 and later.
(described in #213 )

We use the workaround in our webpack.config:

module.exports = {
  ...
  resolve: {
    ..
    mainFields: ['main', 'module'],
  }
}

When upgrading the html-react-parser package from 1.4.5 to 1.4.6 the same error comes up again:

export 'default' (imported as 'parse') was not found in 'html-react-parser' (module has no exports)

I guess it is caused by the index.mjs export change in 03bb4d9

This issue persist up to the latest version 4.2.2.

Expected Behavior

Build completes succesfully.

Actual Behavior

Webpack builds fails with an error.

Steps to Reproduce

Reproducible Demo

Our project is very complex, it is not very easy to create a repro. If that is necessary I'll see what I can do.

Environment

• Version: 1.4.6
• Platform: Node18, webpack 5.88.2
• Browser: -
• OS: Mac/Windows

Keywords

[remarkablemark]

Thanks for opening this issue @robmaas! Do you have a suggestion on what the fix would be?

[robmaas]

@remarkablemark not really, I'm not very familiar with ES exports etc.
I'll try to take a look at it in the next couple of days, bit I'm a bit busy so might take a while.
Since nobody reported this earlier I don't think a lot of people encounter this issue so might not have the highest priority.

[remarkablemark]

@robmaas Thanks for the update! I'll also try to see if I can reproduce this locally in my spare time.

[MaxTwentythree]

I encountered a Probably similar issue:
"Cannot read properties of undefined (reading 'default')"
I had to downgrade from version 4.2.5 to 4.2.1 (npm) for it to work again

[robmaas]

@MaxTwentythree That's probably an unrelated other issue. My original problem also occurs on 4.2.1 with the same error I described earlier. It's not the same error you're encountering.

[robmaas]

@MaxTwentythree Sorry for the delayed response, been very busy lately.
Will try to take a look at it soon, or ask one of my colleague's to do so.

[remarkablemark]

All good @robmaas, thanks for the update

[MaxTwentythree]

@robmaas: same :)
Should I open a new issue with the problem I'm encountering?

[remarkablemark]

@MaxTwentythree can you provide a reproducible example?

[robmaas]

Hi @remarkablemark, the issue is definitely related the exports config introduced in #434

When removing the exports config from package.json the warnings dissapear even in 5.0.11 (which has a more advanced exports config).
I'm not very familiar with webpack and module exports etc. so it's a bit hard for me to understand what is really going on here.

I think this is somewhat related, because we do use moduleResolution: node.

[remarkablemark]

@robmaas Thanks for the update. Unfortunately, I can't remove exports from package.json since it will break ESM support. I wonder if there's something that can be done on Webpack side.

[robmaas]

@remarkablemark Obviously, just reporting that it is related.

Been struggling a bit to isolate the issue to a reproducible project, but will try again sometime soon (not really a big priority at the moment).

[robmaas]

@remarkablemark Finally got it.
I was able to reproduce the issue in a small project by gradually adding configuration.

Turns out we have some webpack loader configuration with patterns that incorrectly match for *.mjs files.

For example:

{
  // anything in node_modules that isn't js,
  // we load as null - e.g. imported css from a module,
  // that is not needed for SSR
  test: /\.(?!js|html$)[^.]+$/,
  include: /node_modules/,
    use: {
      loader: 'null-loader'
    }
  }

This pattern allows *.js, *.jsx etc. but not *.mjs.
Obviously that strips the files completely, so errors start appearing.

Before #434 our solution used the exported index.js file, which was fine.
Bit of a stupid issue after all, but even in our complex solution never ran into this before.

Updating the regex to include *.mjs/*.cjs files seems to fix our issue.
Feel free to close this one. You can consider creating a FAQ for this, but it is not at all related to your package (apart from *.mjs files not being used that much out there).

Repro

Filename: package.json

{
  "name": "html-react-parser-repo-1071",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "html-react-parser": "1.4.6",
    "null-loader": "4.0.1",
    "webpack": "5.76.1",
    "webpack-cli": "5.0.1"
  },
  "scripts": {
    "build": "webpack --config webpack.config.cjs",
    "start": "cd src && node index"
  }
}

Filename: webpack.config.cjs

module.exports = {
  mode: 'development',
  resolve: {
    mainFields: ['main', 'module']
  },
  module: {
    rules: [
      {
        test: /\.(?!js|html$)[^.]+$/,
        include: /node_modules/,
        use: {
          loader: 'null-loader',
        }
      }
    ]
  }
};

Filename: src/index.js

import parse from 'html-react-parser';

console.log('parsed: ' + parse('<p>test</p>'));

Output

ERROR in ./src/index.js 3:25-30
export 'default' (imported as 'parse') was not found in 'html-react-parser' (module has no exports)

[remarkablemark]

Amazing @robmaas, thanks for the reproduction! If you'd like, feel free to open a PR to improve the README.md. Otherwise, I can close this issue and convert it to a discussion.