'Uncaught ReferenceError: regeneratorRuntime is not defined' makes added external packages and importing fonts in css not working in dockerized production build of feature/apollo-pure branch

[Filip Cornell]

Hello,

I am not sure whether this is due to my inexperience, but I have tried to find a solution but have been unable to find it so far.

My issues are two:

1. The external packages I use, which I add using yarn add @types/PACKAGE_NAME or yarn add PACKAGE_NAME do not function inside the dockerized production build. Using yarn start to host a local version makes everything work, but these packages do not work in the dockerized build I get by running yarn run build -- --release --docker.
2. In the same dockerized build, import fonts by using @import url('https://fonts.googleapis.com/css?family=Varela+Round:regular,bold,italic&subset=latin,latin-ext'); does not seem to work; the font resolves to the regular font.

If somebody knows what the problem is, I would very much appreciate your answer :)

Thanks!

[Filip Cornell]

I can update the issue, and say that in the production build, I get the error:

client.tsx:49 Uncaught ReferenceError: regeneratorRuntime is not defined
    at F (client.tsx:49)
    at Module.63 (client.tsx:158)
    at i (bootstrap:84)
    at Object.38 (client.733b49ff.js:1)
    at i (bootstrap:84)
    at n (bootstrap:45)
    at bootstrap:221
    at client.733b49ff.js:1

This, I do not get in the dev-build, so I suspect this is the problem. Does anyone know how to solve this problem?

[Mátyás Angyal]

Hi,
regeneratorRuntime errors usually come out when something messed up with babel so it is not
transpiles your async code. Double check your configs for @babel/polyfill and give it a try with the @babel/plugin-transform-regenerator.

[Filip Cornell]

Hello @amatyas001

Thank you very much for your reply! I have tried to fix this using comments from issues posted in babel (here) but no luck so far. The strange thing about this problem is how it works in development mode, but not in the docker image produced by yarn -- --release --docker.

In babel.config.js, I have:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
          esmodules: true,
        },
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-runtime',
  ],
  ignore: ['node_modules', 'build'],
};

In my package.json, the related ones I have are:

  "dependencies": {
    "@babel/plugin-transform-regenerator": "^7.8.7",
    "@babel/plugin-transform-runtime": "^7.10.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/runtime": "^7.10.0",

[Filip Cornell]

I now managed to solve it, using solution 2 in this guide.

Note that I changed (starting from line 314) in tools/webpack.config.ts to

const clientConfig = {
  ...config,

  name: 'client',
  target: 'web',

  entry: {
    client: ["babel-polyfill",'./src/client'],
  },

However, for a split second, it does not render it, which is kind of ugly. I would like it to be rendered immediately, so if anyone has a better solution I would be happy to hear it!

[Mátyás Angyal]

Check out this article from Risan Bagja.

There are also three ways of including this regeneratorRuntime module in your bundle:

• Import the module explicitly: regenerator-runtime.
• Use the Babel plugin: @babel/plugin-transform-runtime.
• Or if you use @babel/preset-env, you can simply set the useBuiltIns option to usage."

[Filip Cornell]

Closing this now, my solution is good enough :) Thank you!