SyntaxError: The keyword 'let' is reserved

[baptisteArno]

• [x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• [x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? npm package: firebase (v9.0.0-beta.2)

Describe the bug I'm using firebase package and it says SyntaxError: The keyword 'let' is reserved when check the es syntax using es-check package.

I tried transpiling the package but it still compiles the code with reserved words const, let, class

To Reproduce

1. New Next.js project
2. yarn add firebase@9.0.0-beta.2 es-check,
3. Create a firebase.ts file with this:

   
   import { getApps, initializeApp } from "firebase/app";
   import { initializeFirestore } from "firebase/firestore";

const firebaseProdConfig = {};

export const initFirebase = () => { if (getApps().length > 0) return; const firebaseApp = initializeApp(firebaseProdConfig); let firestoreSettings; if (typeof window !== "undefined") { firestoreSettings = { ignoreUndefinedProperties: true, }; } initializeFirestore(firebaseApp, firestoreSettings ?? {}); };

4. Call the `initFirebase` in the `_app.js`
3. Add this script to `package.json`: `"check:es:build": "es-check es5 './.next/static/**/*.js' -v"`,
4. Add transpilation in next.config.js:

const withTM = require("next-transpile-modules")(["firebase"]);

module.exports = withTM({ reactStrictMode: true, });

7. Run `yarn build && yarn check:es:build`

**Expected behavior**
Shouldn't have reserved keywords

**Setup**
- Next.js version: 11.0.1
- `next-transpile-modules` version: 8.0.0
- Node.js version: 14
- Operating System: MacOS
- Webpack 4 or 5: 5

[martpie]

Have you tried this? https://github.com/martpie/next-transpile-modules#how-do-i-find-out-which-package-is-causing-a-runtime-exception

[baptisteArno]

Well, I'm doing this procedure with es-check, not a runtime environment (since the problem happens on IE11 and I have a Mac). Is this different?

Here is the ES-Check output:

ES-Check: Going to check files using version 5
ES-Check: checking ./.next/static/b2DyBfmOskaUbPdLa78CL/_buildManifest.js
ES-Check: checking ./.next/static/b2DyBfmOskaUbPdLa78CL/_ssgManifest.js
ES-Check: checking ./.next/static/chunks/framework-64eb7138163e04c228e4.js
ES-Check: checking ./.next/static/chunks/main-655ad0ce567efa01caa9.js
ES-Check: checking ./.next/static/chunks/pages/_app-e3fe806f1e9b644b6907.js
ES-Check: failed to parse file: ./.next/static/chunks/pages/_app-e3fe806f1e9b644b6907.js 
 - error: SyntaxError: The keyword 'class' is reserved (1:16457)
ES-Check: checking ./.next/static/chunks/pages/_error-9faf4177fb4e528b4124.js
ES-Check: checking ./.next/static/chunks/pages/index-12657f910ba2a5bf6c82.js
ES-Check: checking ./.next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js
ES-Check: checking ./.next/static/chunks/webpack-61095c13c5984b221292.js

I'm sure it's firebase that does this because it's the only package I got

[martpie]

Still, you should do it because the problem most probably come from a dependency of firebase and not firebase itself.

• disable code uglification
• build the app
• run es-check
• - error: SyntaxError: The keyword 'class' is reserved (1:16457) => check 1:16457 to see the error
• See the webpack comment telling you which package is responsible for this ES code

[baptisteArno]

Thank you for taking the time. I really appreciate it! Is there something else to disable for code uglification?

Here is my next config:

const withTM = require("next-transpile-modules")(["firebase"]);

module.exports = withTM({
  reactStrictMode: true,
  optimization: {
    minimize: false,
  },
});

It still produces minimized files

[martpie]

Maybe try with https://github.com/vercel/next.js/issues/7494 :)

[baptisteArno]

Ok I had the wrong syntax. Here is the valid one:

const withTM = require("next-transpile-modules")(["firebase"]);

module.exports = withTM({
  reactStrictMode: true,
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
});

Thank you @martpie

The module I had to transpile were: @firebase/app and @firebase/firestore

[drewhoffer]

Hey, I'm currently on hour 15 here trying to figure out what is causing this issue. As a last ditch effort here. Do you guys have ANY idea where I could continue looking to solve this?

My jest.config.js is:

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  testEnvironment: "jest-environment-jsdom",
  verbose: true,

  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  // moduleDirectories: ["node_modules", "<rootDir>/src/", "<rootDir>/test-utils"],

  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },

  testPathIgnorePatterns: ["/node_modules/", "/.next/"], // Don't test any next tests or tests in the modules
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

My next.config.js is:

const withTM = require("next-transpile-modules")(["firebase"]);

module.exports = withTM({
  reactStrictMode: true,
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
});

And my jest output runs all my tests until it hits my components that require my firebase.ts setup file...

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { registerVersion } from '@firebase/app';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import { initializeApp } from "firebase/app";
        |                                             ^
      2 | import { EmailAuthProvider, getAuth } from "firebase/auth";
      3 | import { getFirestore } from "firebase/firestore";