Compilation errors when building with webpack 5

[vanbasten17]

Hi @fernandopasik, thanks for your project, it's pretty useful. We are using your code in order to traverse React trees in runtime and do some stuff to adapt dynamically how a chat must be shown depending on a messaging provider (Facebook, Whatsapp, ...).

Expected behavior

It should work correctly with Webpack 5.9.0. Maybe transpiled lib should preserve the file extension in order to not break with webpack.

Current behavior

We are now trying to migrate our projects to Webpack 5 and we have experienced the following kind of errors:

ERROR in ./node_modules/react-children-utilities/react-children-utilities.js 10:0-38
Module not found: Error: Can't resolve './lib/onlyText' in '/.../.../.../.../botonic-examples/blank/node_modules/react-children-utilities'
Did you mean 'onlyText.js'?
BREAKING CHANGE: The request './lib/onlyText' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Steps to reproduce

1. Init a project with Webpack 5.9.0.
2. Configure babel (for example):

const babelLoaderConfig = {
  exclude: /node_modules[\/\\](?!(@botonic)[\/\\])/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['@babel/preset-env', '@babel/react'],
      plugins: [
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-class-properties',
        'babel-plugin-add-module-exports',
        '@babel/plugin-transform-runtime',
      ],
    },
  },
}

3. Try to compile the project with webpack.

Device information

• OS: MacOs
• Version: Node v12.20.0

Possible solution

If not fully necessary, do not specify type module in package.json. Otherwise, publish lib with it's corresponding extensions.
Related issues (solutions proposed didn't work for me): graphql/graphql-js#2721

In fact, changing manually the following code inside node_modules fixed the issue:

import { Children, isValidElement } from 'react';
import hasChildren from './hasChildren';

to

import { Children, isValidElement } from 'react';
import hasChildren from './hasChildren.js';

[fernandopasik]

interesting, this brings something to my memory microsoft/TypeScript#16577

I think your suggestion hits the nail

[fernandopasik]

this one could be related too webpack/webpack#12093

[vanbasten17]

Have you tried to just run babel before publishing the lib with this babel plugin? I managed to have this working by just applying this rule, but I think that the code must be shipped in order to be used without having problems.
https://www.npmjs.com/package/babel-plugin-add-import-extension
Example:

const babelLoaderConfig = {
  test: /\.?js/,
  exclude: /node_modules[\/\\](?!(react-children-utilities)[\/\\])/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['@babel/preset-env', '@babel/react'],
      plugins: ['babel-plugin-add-import-extension'],
    },
  },
}

[fernandopasik]

I actually would like to use the imports with js files as it is recommended in microsoft/TypeScript#16577 (comment)

I'm having a problem with eslint import plugin as it doesn't resolve the imports. I'm looking for a solution with maybe import/alias in eslint config

[vanbasten17]

okay, thanks for the response @fernandopasik , let me know if you need a helping hand

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.