I am working with Yarn Workspaces in a monorepo with the following structure:
├───monorepo
│ ├───node_modules
│ ├───apps
│ │ ├───backend
│ │ │ ├───node_modules
│ │ │ └───src
│ │ └───frontend
│ │ ├───.next
│ │ ├───node_modules
│ │ ├───app
│ │ └───public
│ └───packages
│ ├───util
│ │ ├───node_modules
│ │ └───src
│ └───types
│ ├───node_modules
│ └───src
The “util” and “types” packages have exactly the same package.json
and tsconfig.json
configurations but serve different purposes.
While “types” provides typings for the applications, “util” provides functions for formatting, conversion, calculations, etc.
Here are the package configurations:
/packages/(util | types)/package.json
{
"name": "@monorepo/util",
"version": "1.0.0",
"main": "src/index.ts",
"type": "module",
"private": true,
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}
/packages/(util | types)/tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./build",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
Here are the files in “util”
/packages/util/index.ts
export * from "./date-formatting";
/packages/util/src/date-formatting.ts
export const formatShortDate = (date: Date) => {
return date.toLocaleString("pt-BR", { day: "numeric", month: "numeric" });
};
The frontend can correctly consume both packages with their typings and functions, but the backend can only consume the typings. When I import a function from “util”, TypeScript recognizes the path correctly, but when I run the application, the following error is triggered:
export * from "./date-formatting";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
The packages are properly installed in the applications:
/apps/(frontend | backend)/package.json
"dependencies": {
"@monorepo/util": "*",
"@monorepo/types": "*",
...
}
Here are the TypeScript configuration files for the applications:
/apps/(backend)/tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2021",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": false,
"noImplicitAny": false,
"strictBindCallApply": false,
"forceConsistentCasingInFileNames": false,
"noFallthroughCasesInSwitch": false
}
}
/apps/(frontend)/tsconfig.json
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
What could I be doing wrong? Thank you in advance for answers.
Here is the repo url: https://github.com/anthonyvictor/monorepo/
I have already tried reinstalling all packages, started the monorepo from scratch, tested all “targets” in the tsconfig.json of the packages, but without success. Any solution?
Anthony Victor is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.