Babel minification impossible: Cannot read property 'add' of undefined

[ahansson]

[REQUIRED] Describe your environment

• Operating System version: macOS Big Sur 11.5.2
• Browser version: ---
• Firebase SDK version: 9.6.1
• Firebase Product: auth
• Node.js version: 14.17.3
• Babel-minify version: 0.5.1

[REQUIRED] Describe the problem

Steps to reproduce:

This issue is isolated to minification with babel-minify in an 11ty project. Everything works fine without minification, but I can't make a production build without it.

My build command minifies both inlined JS in head and my production bundle after dom has loaded. Firebase code fails to minify in either case.

The error:

TypeError: unknown: Cannot read property 'add' of undefined ERROR: "minify:js" exited with 1.

minify script is "minify ./_public/assets/js/dev/deferred/bundle.js --out-file ./_public/assets/js/bundle.min.js --mangle.keepClassName"

The same error occurs withouth mangle.

When running the same minifier through an 11ty filter I get a more comprehensive error message:

Minify error:  TypeError: unknown: Cannot read property 'add' of undefined
    at ScopeTracker.addReference (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/scope-tracker.js:47:34)
    at ReferencedIdentifier (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/index.js:196:26)
    at newFn (/Users/<snip>/node_modules/@babel/traverse/lib/visitors.js:218:17)
    at bfsTraverse (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/bfs-traverse.js:32:43)
    at Mangler.collect (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/index.js:229:7)
    at Mangler.run (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/index.js:54:12)
    at PluginPass.exit (/Users/<snip>/node_modules/babel-plugin-minify-mangle-names/lib/index.js:558:19)
    at newFn (/Users/<snip>/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/Users/<snip>/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/<snip>/node_modules/@babel/traverse/lib/path/context.js:40:17) {
  code: 'BABEL_TRANSFORM_ERROR'
}

Relevant Code:

Initialize app:

import { initializeApp } from 'firebase/app'
import { getAuth, onAuthStateChanged } from 'firebase/auth'

const firebaseApp = initializeApp({
  apiKey: ".....",
  authDomain: ".....",
  projectId: ".....",
  storageBucket: ".....",
  messagingSenderId: ".....",
  appId: "xxxxx"
})

const auth = getAuth(firebaseApp)

const checkAuthStatus = onAuthStateChanged(auth, user => {
  if (user !== null) {
    console.log('User logged in!')
  } else {
    console.log('No user')
  }
})

export { checkAuthStatus, auth }

Test login (works without minification):

import {
  emailInput, 
  passwordInput,
  submitLogin,
  loginForm,
  errorMsg,
  displayErrorMsg
} from './../ui/app/loginForm.js'

import { auth } from '../../auth/initializeAuth.js'
import { signInWithEmailAndPassword } from 'firebase/auth'

let message = errorMsg

const loginEmailPassword = async (e) => {
  if (!loginForm.checkValidity()) {
    return
    
  } else {

    e.preventDefault()
    message.innerText = ''

    try {

      const loginEmail = emailInput.value
      const loginPassword = passwordInput.value
      const userCredentials = await signInWithEmailAndPassword(auth, loginEmail, loginPassword)
      console.log(userCredentials.user)

    } catch (err) {

      displayErrorMsg(err)

    }
  }

  return false
}

submitLogin.addEventListener('click', loginEmailPassword)

[sam-gc]

I suspect this is an issue with the babel-minify package. There's this issue babel/minify#974, though I see someone does say that setting "mangle" to false is a workaround. Do you have reason to suspect the issue is due to the Firebase library instead?

[ahansson]

Thanks a lot @sam-gc – you're right, it is indeed a problem with babel-minify. I am able to make it work with --mangle false and Terser with --compress and --mangle. Closing this issue.