next js with Turborepo ui package import through error: You may need an appropriate loader

Question

I'm working with next.js 13.1.1 and first time configuring a monoRepo-based project using turborepo . and I want to use

• @next/bundle-analyzer
• @sentry/nextjs
• @next-pwa

without the above config everything works perfectly

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  poweredByHeader: false,
  compress: true,
  transpilePackages: ['ui']
}
module.exports = nextConfig

but if I use below code

module.exports = withNextPwa(withBundleAnalyzer(
  withSentryConfig({
    nextConfig,
    sentryWebpackPluginOptions,
  })
));

getting error

../../packages/ui/components/Button.tsx
Module parse failed: Unexpected token (4:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
import { ButtonProps } from "../type";
| 
> export const Button = (props:ButtonProps) => {
|   return <button>{props.label}</button>
| }

Import trace for requested module:
../../packages/ui/components/Button.tsx
../../packages/ui/index.tsx
./src/components/home/hero.tsx
./src/components/home/index.tsx

I have already spent more than one day to solve this but no-luck. any suggestion or guidance is welcome thanks in advance

Answer 1

I dont know why, but when I add transpilePackages even empty, it works:

...
transpilePackages: []
...

Some bug?