{"id":11957,"date":"2025-02-04T11:29:41","date_gmt":"2025-02-04T11:29:41","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11957"},"modified":"2025-02-04T11:29:41","modified_gmt":"2025-02-04T11:29:41","slug":"typescript-pnpm-monorepo-path-aliases-conflicts","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/typescript-pnpm-monorepo-path-aliases-conflicts","title":{"rendered":"Typescript pnpm monorepo, Path Aliases Conflicts Between Local Dependencies During Build"},"content":{"rendered":"<p>Path alias conflicts in a PNPM monorepo built using Next.js are successfully resolved by this method. The steps are broken down as follows:<\/p>\n<h3>1. To transpile shared packages, use next-transpile-modules.<\/h3>\n<p>Install the package:<\/p>\n<p><code>pnpm add next-transpile-modules<\/code><\/p>\n<p>Update the next.config.js in your Next.js app to include the shared packages for transpilation:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\nconst withTM = require('next-transpile-modules')(['@yourcompany\/shared-package']);\r\nmodule.exports = withTM({\r\n  \/\/ Your existing Next.js configuration\r\n});\r\n<\/pre>\n<p>This guarantees that the Next.js build process appropriately transpiled the shared code.<\/p>\n<h3>2. Specify Distinct Package Names<\/h3>\n<p>Every package within your monorepo needs to have a distinct name specified within it.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\n{\r\n  \"name\": \"@yourcompany\/shared-package\",\r\n  \"version\": \"1.0.0\"\r\n}\r\n<\/pre>\n<p>This name scheme facilitates simpler path management and helps prevent conflicts.<\/p>\n<h3>3. Configure TypeScript path aliases<\/h3>\n<p>Define the alias in the root of tsconfig.json and bind it across packages.json:<\/p>\n<p>For the shared package (@yourcompany\/shared-package), add a relative path in the consuming app&#8217;s tsconfig.json:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\n{\r\n  \"compilerOptions\": {\r\n    \"baseUrl\": \".\",\r\n    \"paths\": {\r\n      \"@yourcompany\/shared-package\/*\": [\"..\/..\/packages\/shared-package\/src\/*\"]\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<h3>4. Ensure Correct Path Resolution During Compilation<\/h3>\n<ul>\n<li>Use relative paths in tsconfig.json for kind inference and route resolution throughout both development and build time.<\/li>\n<li>This lets in TypeScript to resolve imports as it should be without issues during builds.<\/li>\n<\/ul>\n<p>Via combining <strong>next-transpile-modules<\/strong> with particular bundle names and proper TypeScript direction aliases:<\/p>\n<ul>\n<li>The shared code is transpiled correctly within the Next.js app build process.<\/li>\n<li>TypeScript resolves paths accurately, ensuring proper type checking and inference.<\/li>\n<li>Monorepo maintenance is simplified with clear package naming and consistent aliasing.<\/ul>\n<p>This method is powerful and aligns well with quality practices for dealing with shared code in a monorepo using next.js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Path alias conflicts in a PNPM monorepo built using Next.js are successfully resolved by this method. The steps are broken down as follows: 1. To transpile shared packages, use next-transpile-modules. Install the package: pnpm add next-transpile-modules Update the next.config.js in your Next.js app to include the shared packages for transpilation: const withTM = require(&#8216;next-transpile-modules&#8217;)([&#8216;@yourcompany\/shared-package&#8217;]); module.exports [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11958,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11957"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11957"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11957\/revisions"}],"predecessor-version":[{"id":11959,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11957\/revisions\/11959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11958"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}