Bug: @stencil/core/internal/client not found from custom-elements with Webpack 5

[ssylvia]

Actual Behavior

I receive the following error when trying to include this package in a Webpack 5 bundle with StorybookJS

ModuleNotFoundError: Module not found: Error: Can't resolve '@stencil/core/internal/client' in '.../node_modules/@esri/calcite-components/dist/custom-elements'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@stencil/core/internal/client' 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.
   at...

...

resolve '@stencil/core/internal/client' in '.../node_modules/@esri/calcite-components/dist/custom-elements'
  Parsed request is a module
  using description file: /.../node_modules/@esri/calcite-components/package.json (relative path: ./dist/custom-elements)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

Expected Behavior

Bundle without error

Relevant Info

It looks like it is related to this PR: https://github.com/Esri/calcite-components/pull/781 where the dist/custom-elements/index.js is copied to dist/custom-elements/index.mjs for rollup support.

If I remove dist/custom-elements/index.mjs from my node_modules folder, everything resolves correctly

Adding a browser ignore to the package.json also seems to work:

  "browser": {
    "dist/custom-elements/index.mjs": "dist/custom-elements/index.js"
  },

[jcfranco]

@ssylvia https://github.com/Esri/calcite-components/pull/3224 got rid of index.mjs, so this may no longer be an issue. Could you try testing with @next?

[Biboba]

@jcfranco, it is a bit of an annoying issue: I cannot install @arcgis/core higher than 4.19 using Webpack 5 because of this issue. Since 4.20, in '@arcgis/core/widgets/support/componentsUtils.js', an import is made to your package

import{commitAssetPath as s}from"@esri/calcite-components/dist/custom-elements/utils.js"

which fails with the following stacktrace:

ERROR in ./node_modules/@esri/calcite-components/dist/custom-elements/index.mjs 1:0-147
Module not found: Error: Can't resolve '@stencil/core/internal/client' in '/Users/nicolas/Workspace/myapp/node_modules/@esri/calcite-components/dist/custom-elements'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@stencil/core/internal/client' 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 '@stencil/core/internal/client' in '/Users/foo/Workspace/myapp/node_modules/@esri/calcite-components/dist/custom-elements'
  Parsed request is a module
  using description file: /Users/foo/Workspace/myapp/node_modules/@esri/calcite-components/package.json (relative path: ./dist/custom-elements)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /src
        /src/@stencil/core doesn't exist
      looking for modules in /Users/foo/Workspace/myapp/node_modules
        existing directory /Users/foo/Workspace/myapp/node_modules/@stencil/core
          using description file: /Users/foo/Workspace/myapp/node_modules/@stencil/core/package.json (relative path: .)
            using description file: /Users/foo/Workspace/myapp/node_modules/@stencil/core/internal/package.json (relative path: ./client)
              Field 'browser' doesn't contain a valid alias configuration
              /Users/foo/Workspace/myapp/node_modules/@stencil/core/internal/client is not a file
 @ ./node_modules/@esri/calcite-components/dist/custom-elements/utils.js 1:0-39 3:4-16
 @ ./node_modules/@arcgis/core/widgets/support/componentsUtils.js 5:0-89 5:234-235
 @ ./node_modules/@arcgis/core/widgets/Widget.js 5:1038-1101 5:2949-2950
 @ ./src/widgets/App.tsx 41:39-77
 @ ./src/index.ts 24:36-60

Thanks

[andygup]

Hi @Biboba can we get a basic github repo that reproduces this issue? I wasn't able to reproduce this on our end using our ESM webpack example as the starter app: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/webpack. Note that our sample is using ArcGIS JS API 4.21.

[Biboba]

Hi @andygup,

Thanks for your reply. I just built a simplified version of my app failing here: https://github.com/Biboba/webpack-esri-core-issue

Thanks !

[andygup]

@Biboba your repo doesn't have a calcite component? I also couldn't get it to build, it threw a babel error.

/cc @benelan any thoughts?

[Biboba]

@andygup, there is no calcite component. It seems like it is a dependency from the Widget module starting at 4.20. Also I fixed the babel error in case you want to retry. Thanks !

[andygup]

@Biboba I was able to get a clean build when I commented out ArcGISPlugin in webpack.config.js. Is there a reason you needed that plugin? In general, it's not needed anymore.

    plugins: [
      new CleanWebpackPlugin(),
      // new ArcGISPlugin({ locales: ['fr, en'] }),

[benelan]

Since 4.20, in '@arcgis/core/widgets/support/componentsUtils.js', an import is made to your package

import{commitAssetPath as s}from"@esri/calcite-components/dist/custom-elements/utils.js"

For future reference, that method has been deprecated in the PR Franco mentioned (#3224). It sounds like Andy was able to get a version working. I will work on adding an ArcGIS JSAPI sample to our examples repo as well.

[Biboba]

Thanks for your help @andygup but I am confused: I tried your suggestion and removed @arcgis/webpack-plugin dependency and I still face the same issue (in both my project and the sample I provided). I tried cleaning "node_modules" and deleting "package-lock.json" file: same result. Strange... You sure you did not do anything else ? Thanks. !

[andygup]

Oops! Note, this is not an ArcGIS JS API issue. Try adding this new rule to webpack.config.js as a potential fix.

 module: {
    rules: [
        // add this new rule
        {
            test: /\.m?js/,
            resolve: {
                fullySpecified: false
            }
        },

The ERROR: Module note found...can't resolve...did you mean index.js message is commonly related to babel + Webpack 5. Something in your set up is triggering these errors. Here is a discussion thread with more information: https://github.com/webpack/webpack/issues/11467

[jcfranco]

@andygup Could you try testing with @arcgis/core@next? I believe this error will go away with the next JS API release since it picked up beta.68, which removed the troublesome .mjs file.

[andygup]

Could you try testing with @arcgis/core@next?

@jcfranco yes, the error did go away. 🎉

[Biboba]

Oops! Note, this is not an ArcGIS JS API issue. Try adding this new rule to webpack.config.js as a potential fix.

 module: {
    rules: [
        // add this new rule
        {
            test: /\.m?js/,
            resolve: {
                fullySpecified: false
            }
        },

The ERROR: Module note found...can't resolve...did you mean index.js message is commonly related to babel + Webpack 5. Something in your set up is triggering these errors. Here is a discussion thread with more information: webpack/webpack#11467

Thanks @andygup ! I confirm your fix works.

[jcfranco]

[belated] closing as verified based on ☝🏼.