babel errors when using stylex and tanstack-query

[Ryong-E]

environment is exam next.js template and install @tanstack/react-query

start npm run dev
show this errors

 ⨯ ./node_modules/@tanstack/query-core/build/modern/mutation.js
SyntaxError: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  149 |     }
  150 |   }
> 151 |   #dispatch(action) {
      |   ^
  152 |     const reducer = (state) => {
  153 |       switch (action.type) {
  154 |         case "failed":
Import trace for requested module:
./node_modules/@tanstack/query-core/build/modern/mutation.js
./node_modules/@tanstack/query-core/build/modern/mutationCache.js
./node_modules/@tanstack/query-core/build/modern/index.js
./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js
 ⨯ ./node_modules/@tanstack/query-core/build/modern/mutation.js
SyntaxError: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  149 |     }
  150 |   }
> 151 |   #dispatch(action) {
      |   ^
  152 |     const reducer = (state) => {
  153 |       switch (action.type) {
  154 |         case "failed":
Import trace for requested module:
./node_modules/@tanstack/query-core/build/modern/mutation.js
./node_modules/@tanstack/query-core/build/modern/mutationCache.js
./node_modules/@tanstack/query-core/build/modern/index.js
./node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js

i'm install @babel/plugin-transform-private-methods and added .babelrc.js then show other error

[nmn]

You have to pass @babel/plugin-transform-private-methods to the babelConfig.plugins key to stylex plugin to make this work.

So, the next.config.js file would need the following change:

const path = require('path');
const stylexPlugin = require('@stylexjs/nextjs-plugin');
const babelrc = require('./.babelrc.js');
const plugins = babelrc.plugins;
const [_name, options] = plugins.find(
  (plugin) => Array.isArray(plugin) && plugin[0] === '@stylexjs/babel-plugin',
);
const rootDir = options.unstable_moduleResolution.rootDir ?? __dirname;
const aliases = options.aliases ?? undefined;
const useCSSLayers = options.useCSSLayers ?? undefined;

module.exports = stylexPlugin({ 
  rootDir,
  aliases,
  useCSSLayers,
  // ADD THIS LINE:
  babelConfig: { plugins: ['@babel/plugin-transform-private-methods'], }
})({
  transpilePackages: ['@stylexjs/open-props'],
});

You'd also need to make the change to the babelconfig as you've already done.

[Ryong-E]

thank you @nmn
I closed the issue after solving it
Thank you for answering

my solution install @babel/plugin-transform-private-methods and .babelrc.js/plugins added key

[Ryong-E]

@nmn
Hold on. I'm doing what you said, so I'm getting an error

[Ryong-E]

"@babel/plugin-transform-private-methods" doesn't seem to apply this way

[Ryong-E]

I think it's right to add it to plugins from .babelrc.js, not from next.config.js

[nmn]

@Ryong-E It should be needed in both locations.

[Ryong-E]

An error occurs if you use it on both sides.

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/Users/handongryong/pierrot/phone_go_fe/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/loader.js!/Users/handongryong/pierrot/phone_go_fe/node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js!/Users/handongryong/pierrot/phone_go_fe/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[14].oneOf[4].use[1]!/Users/handongryong/pierrot/phone_go_fe/node_modules/next/dist/build/babel/loader/index.js??ruleSet[1].rules[14].oneOf[4].use[2]!/Users/handongryong/pierrot/phone_go_fe/src/components/common/Badge.tsx|app-pages-browser': No serializer registered for ConfigError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> ConfigError
 ⨯ ./src/components/common/Badge.tsx
Error: .babelrc must be a boolean, or undefined
Import trace for requested module:
./src/components/common/Badge.tsx
./src/components/mainpage/ServiceSection.tsx
./src/components/mainpage/MainPage.tsx

[nmn]

Please set babelrc: false within babelConfig as well.

You caught a bug in our NextJS bug. Will fix.

[mateusdegobi]

worked for me:

npm cache clean --force; yarn cache clean; 
rm -rf node_modules
rm -rf package-lock.json yarn.lock
yarn install
npx react-native start --reset-cache