Currently, I am in the process of transferring a functional nextjs 13 app to a single monorepo. I started by creating a new repository using npx create-turbo@latest and then relocating my existing repository (let's call it "frontend") to the apps/ directory. Afterward, I included the 'ui' dependency in the apps/frontend/package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
...
"ui": "*",
}
...
}
I also added the transpile option in the next.config.js file:
experimental: {
transpilePackages: ['ui'],
}
Initially, everything seemed to be functioning correctly. However, when I moved a component from my existing project to the UI folder, included all necessary dependencies, and attempted to run it, I encountered the following error:
frontend:dev: error - ../../packages/ui/Button/Button.tsx
frontend:dev: Module parse failed: The keyword 'interface' is reserved (11:0)
frontend:dev: 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
frontend:dev: | import classNames from 'classnames';
Is there a configuration setting that I may have overlooked?
Environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 16.13.2
npm: 8.1.2
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.4
eslint-config-next: 12.3.4
react: 18.2.0
react-dom: 18.2.0