Auth0.webauth class error on webpack prod build

[carlosrojas1]

Hello community,
I am using webpack via GatsbyJS and Auth0.
When trying to make a prod build after including Auth0, I am getting this error:

“WebpackError: TypeError: auth0_js__WEBPACK_IMPORTED_MODULE_3___default.a.WebAuth is not a constructor”

The error is generated by the following code:

8 |
9 | const auth = isBrowser

10 | ? new auth0.WebAuth({
| ^
11 | domain: process.env.AUTH0_DOMAIN,
12 | clientID: process.env.AUTH0_CLIENTID,
13 | redirectUri: process.env.AUTH0_CALLBACK,

I saw some similar thread in Github (WebAuth is not a constructor - Gatsby v2 · Issue #888 · auth0/auth0.js · GitHub) about this, but the Auth0 answer that time was to contact support, but the answer was never posted.

Anyone that faced a similar issue?

[James.Morrison]

Hey there @carlosrojas1, welcome to the Auth0 Community!

After investigating this challenge I found that you had already opened a support case and solved this issue with a work around. I’m going to share the work around here for benefit others as well.

In the end it was related to some Babel/Webpack optimizations that are conducted during the production build of GatsbyJS V2. This optimizations left the auth.js library in a weird state. Carlos found the work around was to disable the webpack optimization and reduce the babel backward compatibility level so the AuthJS library doesn’t break. The compatibility levels used for babel were the GatsbyJS default ones.

Please let us know if you have any additional questions we can assist with!