Support new export * as ns syntax

[OliverJAsh]

Feature request

There is new export syntax: export * as ns (stage 4).

https://github.com/tc39/proposal-export-ns-from

export * as ns from './test';

Currently this will error:

ERROR in ./src/proxy.js 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export * as ns from './test';
 @ ./src/index.js 1:0-29 2:12-14

FWIW, TypeScript recently added support for this: https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/#export-star-as-namespace-syntax

What is the expected behavior?

What is motivation or use case for adding/changing the behavior?

How should this be implemented in your opinion?

Are you willing to work on this yourself?
yes

[sokra]

Does acorn already support it?

[OliverJAsh]

Sounds like it's implemented inside a plugin: acornjs/acorn#742 (comment)

https://github.com/acornjs/acorn-export-ns-from

[sokra]

acorn PR: acornjs/acorn#889

[guillaume86]

I have this issue with typescript/ts-loader, is it a webpack issue or a ts-loader issue?

[alexander-akait]

@guillaume86 ts-loader

[ooyyloo]

@guillaume86 ts-loader

It's not a ts-loader issue. It happens because webpack 4 haven't used the newest acornjs version.

[guillaume86]

@ooyyloo thanks I'll just for a webpack update then

[appzuka]

Is this the same issue as TypeStrong/ts-loader#1121?

If you use a module target lower than es2020 then typescript will transpile the new export * syntax down to a version webpack can understand.

[jun-sheaf]

A current workaround is to use Babel and its @babel/plugin-proposal-export-namespace-from plugin. You can set is up like so for bare-minimum babel:

For dependencies,

npm i -D @babel/core babel-loader @babel/plugin-proposal-export-namespace-from

In your webpack.config.js,

...
{
    test: /\.tsx?$/,
    use: [{
         loader: "babel-loader", // This should be the last loader of course
         options: {
              plugins: ["@babel/plugin-proposal-export-namespace-from"]
         }
    }, ...other loaders]
}
...

[OnurGvnc]

as a temporary solution;
https://github.com/OnurGvnc/acorn-with-stage3

package.json:

{
  ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  },
  "dependencies": {

[jun-sheaf]

as a temporary solution;
https://github.com/OnurGvnc/acorn-with-stage3

package.json:

{
  ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  },
  "dependencies": {

A lot of packages rely on acorn. This can potentially break them. It is advisable to build on top rather than directly patch.

[noinkling]

A lot of packages rely on acorn. This can potentially break them.

Scoping it to Webpack only would help:

"resolutions": {
  "webpack/acorn": "npm:acorn-with-stage3"
},

[jun-sheaf]

Scoping it to Webpack only would help

This only works on yarn.

[OnurGvnc]

Scoping it to Webpack only would help

This only works on yarn.

https://www.npmjs.com/package/npm-force-resolutions

[jun-sheaf]

https://www.npmjs.com/package/npm-force-resolutions

npm-force-resolutions doesn't support that behavior.

[TheColorRed]

@appzuka I had to also change module to a version less than es2020

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015"
  }
}