CODEWITHSUNDEEP
next.jsbabeljsswc-compiler
Jim Jin
Jim Jin

Reputation: 1489

transpile private property/method in node_modules

We import @tanstack/react-query and we need to let our web app work on Android Chrome v83. So we use the following lines in next.config.js:

transpilePackages: [
    '@tanstack/react-query',
    '@tanstack/query-core',
    '@tanstack/react-query-devtools',
],

But when we open it on Chrome v83, it complains:

Uncaught SyntaxError: Unexpected token '('

And the error location is:

 async #initMqtt() {

Obviously, it does not support private method on Chrome v83. So we need to transpile private method/property.

We tried babel:

// .babelrc
{
    "presets": ["next/babel"],
    "plugins": ["@babel/plugin-transform-private-methods"]
}

But something wrong happens:

./node_modules/.pnpm/@[email protected]/node_modules/@nextui-org/shared-utils/dist/index.mjs
export 'capitalize' (reexported as 'capitalize') was not found in './chunk-RFEIBVIG.mjs' (module has no exports)     

Import trace for requested module:
./node_modules/.pnpm/@[email protected]/node_modules/@nextui-org/shared-utils/dist/index.mjs
./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_t_u6jr3cbuynuihebz6yqiwlfy3i/node_modules/@nextui-org/table/dist/index.mjs
./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_qtmslife453ew2jzebvndkkbmq/node_modules/@nextui-org/react/dist/index.mjs
./app/components.js

./node_modules/.pnpm/@[email protected]/node_modules/@nextui-org/shared-utils/dist/index.mjs
export 'debounce' (reexported as 'debounce') was not found in './chunk-RFEIBVIG.mjs' (module has no exports)

Import trace for requested module:
./node_modules/.pnpm/@[email protected]/node_modules/@nextui-org/shared-utils/dist/index.mjs
./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_t_u6jr3cbuynuihebz6yqiwlfy3i/node_modules/@nextui-org/table/dist/index.mjs
./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_qtmslife453ew2jzebvndkkbmq/node_modules/@nextui-org/react/dist/index.mjs
./app/components.js

./node_modules/.pnpm/@[email protected]/node_modules/@nextui-org/shared-utils/dist/index.mjs
export 'extractProperty' (reexported as 'extractProperty') was not found in './chunk-RFEIBVIG.mjs' (module has no exports)

Then we switch to SWC, but there is no options for transpiling private method/property.

Any other idea?

Upvotes: 0

Views: 13

Answers (0)

Related Questions