Create-react-app: Export * syntax not supported

[bsdis]

When trying to use bokehjs together with npm and create-react-app the compiler gives an error.
This can be easily reproduced by building the following dockerfile and running it after

FROM node:12
WORKDIR /usr/src/app
RUN npx create-react-app bokehbug --template typescript
WORKDIR /usr/src/app/bokehbug/src
RUN wget https://gist.githubusercontent.com/bsdis/415a77d017c32d2678cefd9a0a23fb22/raw/83a7a91fb82420a550b8ad66f8001034fc1dab69/App.tsx -O App.tsx
WORKDIR /usr/src/app/bokehbug
RUN wget https://gist.githubusercontent.com/bsdis/415a77d017c32d2678cefd9a0a23fb22/raw/83a7a91fb82420a550b8ad66f8001034fc1dab69/package.json -O package.json
RUN npm install
CMD npm start

Build this dockerfile by first installing docker and then use docker build -t bbug ..
To see the error after building, run:

docker run -it --name bokehbug -p 3000:3000 bbug bash

and when in the container run

npm start

The observed error is:

zuifrontend_1  | Failed to compile.
zuifrontend_1  |
zuifrontend_1  | ./node_modules/@bokeh/bokehjs/build/js/lib/index.js 3:9
zuifrontend_1  | Module parse failed: Unexpected token (3:9)
zuifrontend_1  | File was processed with these loaders:
zuifrontend_1  |  * ./node_modules/babel-loader/lib/index.js
zuifrontend_1  | You may need an additional loader to handle the result of these loaders.
zuifrontend_1  | | export { version } from "./version";
zuifrontend_1  | | export { index } from "./embed";
zuifrontend_1  | > export * as embed from "./embed";
zuifrontend_1  | | export * as protocol from "./protocol";
zuifrontend_1  | | export * as _testing from "./testing";

The problem is not with node (12.x or whichever), because bokehjs is not a node library, but it’s web browser library. So bokehjs’ code is not run in node at any point in time, it’s just being processed by node libraries like babel-loader, which apparently doesn’t recognize this pretty new ES export star syntax.
Is it possible to upgrade the babel library in CRA so that it can support libraries in node_modules that uses this export * syntax?

[petetnt]

Pretty interesting, exportNamespaceFrom was enabled by default in https://github.com/babel/babel/pull/10521 by default and released in 7.7.0 which we have been using for more than five month now (since https://github.com/facebook/create-react-app/blame/82009f570d5aa7a85310fb00b6ecff6c752a1135/packages/react-scripts/package.json) 🤔

[bsdis]

So what you are saying is that this should actually be working already?

[bsdis]

@petetnt Is that because the error stems from an external module in node_modules?
I think the problem here is that the external module cannot be imported and CRA babel loader does not transpile it... Does that make sense?

[strothj]

I'm getting the following:

Failed to compile.

./src/types/types.ts 1:9
Module parse failed: Unexpected token (1:9)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export * as artists from "./artists";
| export * as auth from "./auth";
| export * as collections from "./collections";

These are just barrels exporting stuff from ts-io.

If I use craco to add the following, then things work as expected:

module.exports = {
  babel: {
    plugins: ["@babel/plugin-proposal-export-namespace-from"],
  },
};

I've added a reproduction here: https://github.com/strothj/cra-bug-export-star-not-supported
In the reproduction, there's a file: /src/types/index.ts
In this file, if you rename export * as types2 to export * as types you'll also encounter a bug in @babel/[email protected] where you get a syntax error for attempting to export a namespace named types. That was fixed in a later version.

[bsdis]

Great reproduction! That demonstrates the same problem.
So this is indeed a bug in create-react-app?

[existentialism]

FYI, we enabled support for parsing export * as ns from "foo" by default to @babel/parser (in #10521) but not to @babel/preset-env.

We'll have a fix for this shortly, feel free to follow: https://github.com/babel/babel/issues/11363

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.