vanilla app created with npx @backstage/create-app fails to load on Safari

[cowboyd]

Expected Behavior

The application created by npx @backstage/create-app should bundle and run in Safari.

Current Behavior

blank screens, but console fails, with this error

[Error] SyntaxError: Invalid regular expression: invalid group specifier name
	__webpack_require__ (runtime.js:39)
	__webpack_exec__ (main.js:122)
	(anonymous function) (main.js:123:505)
	(anonymous function) (runtime.js:97)
	(anonymous function) (main.js:124)
	webpackJsonpCallback (runtime.js:1243)
	webpackJsonpCallback
	Global Code (main.js:9)

Possible Solution

Could be related to https://exerror.com/invalid-regular-expression-invalid-group-specifier-name-in-safari/

Steps to Reproduce

1. follow tutorial to this point https://backstage.io/docs/getting-started/create-an-app#run-the-app
2. open in Safari

Your Environment

Safari Version 15.2 (17612.3.6.1.6)

[freben]

Hi! This is most likely a duplicate of #6039. Closing for now just to focus the discussion in one place, but do please add any findings there and bump it, so it gets as much visibility as possible. There's some context in there regarding how this was a complex fix in a third party dependency-of-a-dependency library which since then has been migrated to ESM in such a way that the first party dependency can't bump it :(

See you in the other ticket!

[freben]

Let me just add - it would be interesting to see if you could try out the mentioned fix here

"resolutions": {
  "**/normalize-url": "^7.0.1"
}

in your package.json and see if that fixes anything. Do report in the other ticket if it does!

[cowboyd]

Oops! Thanks for that @freben!

[cowboyd]

It does produce a different error, but doesn't seem to work. It appears that the CJS require logic is incompatible with how it's being used 😢

$ yarn start-backend
yarn run v1.22.17
$ yarn workspace backend start
$ backstage-cli backend:dev
Build succeeded
/Users/cowboyd/Code/@frontside/backstage/node_modules/parse-url/lib/index.js:6
    normalizeUrl = require("normalize-url");
                   ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/cowboyd/Code/@frontside/backstage/node_modules/normalize-url/index.js from /Users/cowboyd/Code/@frontside/backstage/node_modules/parse-url/lib/index.js not supported.
Instead change the require of /Users/cowboyd/Code/@frontside/backstage/node_modules/normalize-url/index.js in /Users/cowboyd/Code/@frontside/backstage/node_modules/parse-url/lib/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/node_modules/parse-url/lib/index.js:6:20)
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/node_modules/git-up/lib/index.js:5:16)
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/node_modules/git-url-parse/lib/index.js:3:13)
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/node_modules/@backstage/integration/dist/index.cjs.js:5:19)
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/node_modules/@backstage/backend-common/dist/index.cjs.js:29:19)
    at Object.@backstage/backend-common (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:137:18)
    at __webpack_require__ (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:298:33)
    at fn (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:457:21)
    at eval (webpack-internal:///./src/index.ts:4:83)
    at Module../src/index.ts (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:19:1)
    at __webpack_require__ (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:298:33)
    at /Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:1261:37
    at Object.<anonymous> (/Users/cowboyd/Code/@frontside/backstage/packages/backend/dist/main.js:1263:12) {
  code: 'ERR_REQUIRE_ESM'
}