Specify @suid/utils as strict ES6 module may break package resolving in webpack, if without changing the import statements in it

[thislight]

After updating @suid/material to 0.4.0, I notice multiple errors from webpack:

ERROR in ./node_modules/@suid/utils/merge.js 2:0-36
Module not found: Error: Can't resolve './deepmerge' in '/path/to/project/node_modules/@suid/utils'
Did you mean 'deepmerge.js'?
BREAKING CHANGE: The request './deepmerge' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, 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.
resolve './deepmerge' in '/path/to/project/node_modules/@suid/utils'
  using description file: /path/to/project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /path/to/project/node_modules/@suid/utils/package.json (relative path: ./deepmerge)
      Field 'browser' doesn't contain a valid alias configuration
      /path/to/project/node_modules/@suid/utils/deepmerge doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/CssBaseline/CssBaseline.jsx 10:0-37 87:14-22
 @ ./node_modules/@suid/material/CssBaseline/index.jsx 1:0-40 1:0-40 2:0-30 2:0-30
 @ ./src/App.tsx 4:0-53 19:28-39
 @ ./src/index.tsx 3:0-24 17:35-38

I notice a possible workaround: remove the "type": "module" in the package.json of the @suid/utils, https://github.com/swordev/suid/blame/main/packages/utils/package.json#L5 . Another possible fix is, as the error said, just use the name with the extension in the files of @suid/utils.

My webpack config: https://pastebin.com/LCn5iH1z
My package.json: https://pastebin.com/1NWNAw5A
Complete log: https://pastebin.com/QmWcf7BL

[juanrgm]

Currently the project is designed to works with the new generation tools (Vite, Rollup and esbuild), Webpack is old school.

The problem is that @suid/codemod is a browser and Node.js package and it requires @suid/utils as dependency, so it forces to utils package to be a ESM module (in the near future all packages will be ESM modules).

Vite can resolve the extensions correctly, also I guess that Webpack and babel-loader could do it.

Add the ts/tsx extensions to all imports should be the correct, but it is tedious and TypeScript is not prepared for that, though TS 4.7 is adding partial compatibility.

[thislight]

@juanrgm Thanks for your detailed reply. My problem is solved with Vite. I may take a look further to babel-loader in future, I could not figure a way out these days.

I will leave this issue open since it is not solved (under Webpack).

[boblelot]

Got it to work with webpack.

Set resolve on the rule to {fullySpecified: false} on your loader.
https://webpack.js.org/configuration/module/#resolvefullyspecified

If you only set fullySpecified you might get issues due to jsx in the components not being transpiled, the example below also handles that.

// Example: This one only loads handles files from suid 
// Add this rule near the top of your config.
{
      test: /\.jsx?$/,
      include: /@suid/, 
      resolve: {
        fullySpecified: false
      },
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
          ["@babel/preset-env", { shippedProposals: true }],       
          "solid"
          ]
        }
      }
}

[thislight]

Set resolve on the rule to {fullySpecified: false} on your loader.
https://webpack.js.org/configuration/module/#resolvefullyspecified

Thanks! That solves my question.