Safari IOS and MacOS. Unexpected private name #validate.

[timmeade]

I am getting the following on safari IOS and MacOS

Unhandled Runtime Error
SyntaxError: Unexpected private name #validate. Cannot parse class method with private name.

./node_modules/vcard4/src/esm/values.js

file:///Users/tim/src/active/.next/static/chunks/pages/v1/%5Bsource%5D/%5Btapid%5D.js (4525:5)

NextJS 11. Works fine on Chrome and Firefox.

Any ideas?

Thanks

Tim

[timmeade]

i removed the .next folder and let it rebuild.

No changes. still same error.

[kelseykm]

Hello Tim,

I would like to help, but you haven't provided enough information.
Could you post the entire stack trace of the error you're getting?

[timmeade]

Full stack from safari on macos

Unhandled Runtime Error
SyntaxError: Unexpected private name #validate. Cannot parse class method with private name.

Call Stack
eval

[native code]
./node_modules/vcard4/src/esm/values.js

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/pages/v1/%5Bsource%5D/%5Btapid%5D.js (4525:5)
<unknown>

/_next/static/chunks/webpack.js (685:35)
__webpack_require__

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/webpack.js (37:37)
eval

[native code]
./node_modules/vcard4/index.js

/_next/static/chunks/pages/v1/%5Bsource%5D/%5Btapid%5D.js (4459:5)
<unknown>

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/webpack.js (685:35)
__webpack_require__

/_next/static/chunks/webpack.js (37:37)
eval

[native code]
./components/LandingPage/index.tsx

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/pages/v1/%5Bsource%5D/%5Btapid%5D.js (3219:5)
<unknown>

/_next/static/chunks/webpack.js (685:35)
__webpack_require__

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/webpack.js (37:37)
eval

[native code]
./pages/v1/[source]/[tapid].tsx

/_next/static/chunks/pages/v1/%5Bsource%5D/%5Btapid%5D.js (3593:5)
<unknown>

file:///Users/tim/src/active/do.dev/app.contacts.dev/.next/static/chunks/webpack.js (685:35)
__webpack_require__

/_next/static/chunks/webpack.js (37:37)
promiseReactionJob

[native code]

[kelseykm]

https://caniuse.com/?search=private%20class

🤦 Apparently, Safari supports private class fields but not private class methods. Gonna put a warning on the README...

I recommend using Babel

[timmeade]

Ok i have a fix....

using this npm next-transpile-modules. it can transpile this code to work.

Also need to add to next.config.js for nextjs. here is mine.

const withTM = require('next-transpile-modules')(['vcard4']); // pass the modules you would like to see transpiled

const withPlugins = require('next-compose-plugins');
const nextConfig = {
  images: {
    domains: ['firebasestorage.googleapis.com', 'res.cloudinary.com'],
  },
};

module.exports = withPlugins([withTM], nextConfig);

Appears to work after all this. Onwards.