11import mdx from "@next/mdx" ;
2+ import { readFileSync } from "fs" ;
3+ import { join , dirname } from "path" ;
4+ import { fileURLToPath } from "url" ;
5+
26const withMDX = mdx ( {
37 options : {
48 providerImportSource : "@mdx-js/react" ,
59 } ,
610} ) ;
711
12+ const __dirname = dirname ( fileURLToPath ( import . meta. url ) ) ;
13+
14+ /**
15+ * The names of the packages that come from the same monorepo as this package.
16+ * We want these to be transpiled by Next.js because we are directly importing
17+ * the source typescript files from these packages.
18+ */
19+ const references = JSON . parse (
20+ readFileSync ( join ( __dirname , "tsconfig.json" ) , "utf-8" ) ,
21+ ) . references . map ( ( { path } ) => {
22+ return JSON . parse (
23+ readFileSync ( join ( __dirname , path , "package.json" ) , "utf-8" ) ,
24+ ) . name ;
25+ } ) ;
26+
827/** @type {import('next').NextConfig } */
928const nextConfig = {
1029 webpack ( config ) {
@@ -14,11 +33,24 @@ const nextConfig = {
1433 use : [ "@svgr/webpack" ] ,
1534 } ) ;
1635
36+ // Set our custom condition for the bundler so that we directly use
37+ // typescript from packages in our monorepo, which makes hot-reloading
38+ // smoother. Based on
39+ // https://github.com/vercel/next.js/discussions/33813#discussioncomment-7457277
40+ config . plugins . push ( {
41+ apply ( compiler ) {
42+ compiler . hooks . afterEnvironment . tap ( "NextEntryPlugin" , ( ) => {
43+ compiler . options . resolve . conditionNames . push ( "cursorless:bundler" ) ;
44+ } ) ;
45+ } ,
46+ } ) ;
47+
1748 return config ;
1849 } ,
1950 experimental : {
2051 mdxRs : true ,
2152 } ,
53+ transpilePackages : references ,
2254 reactStrictMode : true ,
2355 output : "export" ,
2456} ;
0 commit comments