Build error with create-react-app / Babel

App Development
1

I’m working on a an app which uses the create-react-app tool to manage the configuration of Babel and webpack. The front-end code runs fine both in development (react-scripts start) and production (react-scripts build). Adding in remotestorage.js works fine in development. However, after running react-scripts build, the built app fails to start, with the error:

Uncaught TypeError: Cannot call a class as a function
    at e.exports (classCallCheck.js:3)
    at new e (cachinglayer.ts:26)
    at o.<anonymous> (createSuper.js:15)
    at new o (indexeddb.ts:60)
    at e.featuresLoaded (features.ts:204)

I’m pulling Remote Storage with import RemoteStorage from 'remotestoragejs'; so I believe Babel is transpiling the code.

Can anyone suggest an approach to resolving this? I could run react-scripts eject, and tinker with the Babel config, but I’m loathe to increase the time I spend on admin work.

2

I’d love to help, but I’m not familiar with create-react-app tbh.

As it works in development, but seems to have issues with additional transpilation being done on the already-transpiled source, I would try to find out how you can prevent the transpilation of imported modules in general.

Maybe someone else reading this has more experience with create-react-app?

1 Like
3

I think I got the same error with an Ember app once. Ember has a config option to define the Browsers that should be supported by the build. It is using Browserslist for that.

Removing IE11 support for the production build fixed the error for me.

I’m not familiar with create-react-app, but maybe it has a similar config option.

EDIT: Looks like create-react-app has indeed the same option: Supported Browsers and Features | Create React App

Adding "not IE 11" to the production config should hopefully fix the build error.

1 Like
4

(Sorry to not reply earlier; I was on vacation.)

That’s an excellent idea! Thanks!

Unfortunately, it doesn’t fix the issue. I’m currently pursuing the hypothesis that Babel doesn’t compile some aspects of TypeScript correctly, as there are several reported bugs along those lines.

5

I think it shouldn’t compile TypeScript at all, and it also shouldn’t re-compile our compiled JS release.

6

FWIW, I’ve gone with including Remote Storage as static scripts, to prevent create-react-app/Babel from processing them:

    <script type="text/javascript" src="remotestorage.js"></script>
    <script type="text/javascript" src="remotestorage-widget.js"></script>
1 Like
7

Including Remote Storage as static scripts did get the production build to run, but tests would not. So, I ejected from create-react-app after all, and set Webpack to not use babel-loader on remotestorage:

              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime|remotestorage/,
              loader: require.resolve('babel-loader'),

So, create-react-app is pessimistic about 3rd-party modules being compiled to the correct dialect of JS, and optimistic about Babel.