Auth0-spa-js: Unable to build 1.7.0 in parcel

Created on 17 Apr 2020  路  11Comments  路  Source: auth0/auth0-spa-js

I am using parcel js as my bundler. I ran npm install @auth0/auth0-spa-js which gets me the latest 1.7.0 build. However, when I try to build and serve my app using parcel locally in development mode, I get this error:

Could not load existing sourcemap of "../node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js".
... /node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js:15:44448: Unexpected token, expected ":" (15:44448)

If I use version 1.6.5, I do not get this error.

picture dinoc
👍7 👀2

Most helpful comment

If you want a horrible, no-good, very bad workaround, you can add this to your package.json's scripts block, and it will rewrite the offending line of code into something that Parcel doesn't choke on:

{ 
   "postinstall": "sed -i.bak 's_\"//# sourceMappingURL=\"_\"//# source\"+\"MappingURL=\"_' node_modules/@auth0/auth0-spa-js/dist/*.js"
}
picture schmod on 11 Jun 2020
🎉4 🚀1

All 11 comments

Here are 3 files for easy setup. Just run npm install and npm start

src/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Parcel</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>

</html>

src/index.js

import React from 'react';
import { render } from 'react-dom';
import { Auth0Client } from '@auth0/auth0-spa-js';

render(
  <div>
    <h1>Parcel</h1>
  </div>,
  document.getElementById("root"));

package.json

{
  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=development parcel ./src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^1.7.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
dinoc picture dinoc on 17 Apr 2020

I'm experiencing the same behavior getting a this error:

鈿狅笍  Could not load existing sourcemap of "../node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js".
馃毃  / ... /node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js:15:44448: Unexpected token, expected ":" (15:44448)
tylerbmcsilva picture tylerbmcsilva on 17 Apr 2020

Legit issue. Looks like either a rollup update issue and/or something related to the changes made in the src/errors.ts

paulfalgout picture paulfalgout on 17 Apr 2020

It's related to https://github.com/parcel-bundler/parcel/issues/2408

Parcel doesn't like the sourceMappingURL specified in the Web Worker loader we introduced in 1.7.0 https://github.com/darionco/rollup-plugin-web-worker-loader/blob/master/src/WorkerLoaderHelper.js#L62

You can workaround it by using parcel with --no-source-maps as described in https://github.com/parcel-bundler/parcel/issues/2408#issuecomment-537000667 or using parcel@2

We'll have a chat about this internally and see if there's anything we should do to resolve the issue from our end.

adamjmcgrath picture adamjmcgrath on 20 Apr 2020

I'd like to not disable sourcemaps though since they are providing us with the ability to see stack traces in our sentry error logs. Is there any other proposed workaround besides using --no-source-maps?

dinoc picture dinoc on 21 Apr 2020

Other than upgrading to Parcel 2.0, no. I see that you've queried them to find out about other options; let's see what the upgrade path to 2.0 looks like.

We have identified that it could be the Rollup plugin we're using to generate our worker module wrapper but even if we were to rewrite that and included sourcemaps support, that probably wouldn't fix your issue anyway.

stevehobbsdev picture stevehobbsdev on 24 Apr 2020

Closing this for now - if the situation progresses with Parcel and there's a way we can get involved, please feel free to continue the discussion.

stevehobbsdev picture stevehobbsdev on 24 Apr 2020

is there any way to provide a build that doesn't include sourcemaps? even if there was a way to import the client directly out of the node_modules folder

dinoc picture dinoc on 29 Apr 2020

If you want a horrible, no-good, very bad workaround, you can add this to your package.json's scripts block, and it will rewrite the offending line of code into something that Parcel doesn't choke on:

{ 
   "postinstall": "sed -i.bak 's_\"//# sourceMappingURL=\"_\"//# source\"+\"MappingURL=\"_' node_modules/@auth0/auth0-spa-js/dist/*.js"
}
schmod picture schmod on 11 Jun 2020
🎉4 🚀1

I'm seeing the same thing with auth0-react and parcel:

鈿狅笍  Could not load existing sourcemap of "../node_modules/@auth0/auth0-react/dist/auth0-react.esm.js".
鈿狅笍  Could not load existing sourcemap of "../node_modules/@auth0/auth0-react/dist/auth0-react.esm.js".
馃毃  /[...]/node_modules/@auth0/auth0-react/dist/auth0-react.esm.js:107:53103: Unexpected token, expected ":" (107:53103)
...

Hopefully a stable version of parcel@2 is released soon! The above hack also works for auth0-react (just need to tweak the path):

{
    "postinstall": "sed -i.bak 's_\"//# sourceMappingURL=\"_\"//# source\"+\"MappingURL=\"_' node_modules/@auth0/auth0-react/dist/*.js"
}
skipjack picture skipjack on 12 Oct 2020
👍2

I'm having a similar problem in Vite 2.3.4 but the above sed hack doesn't fix it for me

My error was that I had defined global in my vite config. Removing that fixed the error

mellson picture mellson on 28 May 2021
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jackoliver picture jackoliver  路  5Comments
Dig-Doug picture Dig-Doug  路  5Comments
devuxer picture devuxer  路  7Comments
philipp-tailor picture philipp-tailor  路  4Comments
Hawxy picture Hawxy  路  7Comments