Reproduction app: https://github.com/uriklar/turborepo-lib-dep-lib-repro
I'm using Turborepo's basic example (nextjs app + ui library)
I want to add an additional ui library and have my ui library depend on it.
// packages/ui/Button.tsx
import * as React from "react";
import { Button as AnotherButton} from "anotherui"
export const Button = () => {
return <><button>Boop</button><AnotherButton/></>;
};
I created the anotherui
library inside the packages directory and added it as a dependency of ui
like so:
{
"name": "ui",
"version": "0.0.0",
"main": "./index.tsx",
"types": "./index.tsx",
"license": "MIT",
"dependencies": {
"anotherui": "workspace:*"
},
"devDependencies": {
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"tsconfig": "workspace:*",
"config": "workspace:*",
"typescript": "^4.5.3"
}
}
When I try to build the web
app (that consumes Button
from ui
) I'm getting the following error:
web:build: Failed to compile.
web:build:
web:build: ../../packages/anotherui/Button.tsx
web:build: Module parse failed: Unexpected token (3:9)
web:build: 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
web:build: | import * as React from "react";
web:build: | export const Button = () => {
web:build: > return <button>Boop</button>;
web:build: | };
web:build: |
web:build:
web:build: Import trace for requested module:
web:build: ../../packages/anotherui/index.tsx
web:build: ../../packages/ui/Button.tsx
web:build: ../../packages/ui/index.tsx
web:build: ./pages/index.tsx
web:build:
My question is:
Is it possible to have one library depend on another library from the same monorepo?
Thanks!
Found the solution. It was actually related to Next.js.
Turborepo already uses a module called "next-transpile-modules" and in my next.config.js
file I already had this line:
const withTM = require("next-transpile-modules")(["ui"]);
So I just added "anotherui"
to the array and it worked