Potential problem with Typescript ES module in `v4.0.0.rc.1`

[akphi]

A little bit of context: I have a monorepo using Typescript. One of the workspace is the entry to the web application which uses Webpack an webpack-dev-server, the rest just uses Typescript to compile TS into JS files. (For more details, see https://github.com/finos/legend-studio). When I upgraded to v4.0.0.rc.1, I got an error message complaining that some exports are not found (more details below). I see in the changelog you mentioned the change in #3550, so perhaps that has to do with this since this is the first time I got this.

• This is a bug
• This is a modification request

Code

Our webpack config is a bit long so I'll link the file here - https://github.com/finos/legend-studio/blob/master/packages/legend-studio-dev-utils/WebpackConfigUtils.js

I remember a while back I have to change webpack setting fullySpecified: false to make it work for my setup, so I will just put that snippet here

// webpack.config

...
module: {
      rules: [
        {
          test: /\.(?:mjs|js|ts|tsx)$/,
          resolve: {
            // Since we use ES modules, the import path must be fully specified. But this is not something Typescript
            // support, so the workaround is to not require extension in import path.
            // See https://github.com/webpack/webpack/issues/11467
            // See https://github.com/microsoft/TypeScript/issues/16577
            fullySpecified: false,
          },
...

Please paste the results of webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.5.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 1.82 GB / 16.00 GB
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 3.0.0-rc.2 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Edge: 92.0.902.73
    Firefox: 87.0
    Safari: 14.1.2
  Monorepos:
    Yarn Workspaces: 3.0.0-rc.2

Expected Behavior

We expect the web page getting served fine

Actual Behavior

We start seeing errors like

export 'ENTITY_PATH_DELIMITER' (imported as 'ENTITY_PATH_DELIMITER') was not found in '@finos/legend-model-storage' (module has no exports)

Module not found: Error: Can't resolve './Entity' in '/Users/blacksteed232/Developer/legend/studio/packages/legend-model-storage/lib'
Did you mean 'Entity.js'?
BREAKING CHANGE: The request './Entity' 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.

I understand what this means, but Typescript has made it clear that when they compile TS -> JS, they will not add the extension in the import statements - See microsoft/TypeScript#16577. So I really don't know what I can do here.

For Bugs; How can we reproduce the behavior?

I will try to give a simplified repo later, but I felt like my setup is pretty common and some other folks might bump into it sooner or later so I will file this issue first to give you a heads up (or maybe I just miss some key config here ...)

The workspace that causes the error is https://github.com/finos/legend-studio/tree/master/packages/legend-model-storage
The webapp workspace is https://github.com/finos/legend-studio/tree/master/packages/legend-studio-app

---

Could it be because webpack-dev-server@v4.0.0.rc.1 does not take fullySpecified flag into account here?

[akphi]

I think I made a mistake on my end. Really sorry. Will reopen if I can confirm this.