Compilation errors when building with webpack 5

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',
      ],
    },
  },
}

1. 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): https://github.com/graphql/graphql-js/issues/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';

[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]

Sorry for the delayed solution for this. I’ve added a task to have the .js extensions in the built files. This should work fine with the latest release v2.4.1