search

martpie / next-transpile-modules

Next.js plugin to transpile code from node_modules. Please see: https://github.com/martpie/next-transpile-modules/issues/291
MIT License
1.13k stars 85 forks source link

[Question] - Using this with local packages also consumed by Google Cloud Functions #267

Closed pip8786 closed 1 year ago

pip8786 commented 1 year ago

I have a monorepo (using NPM workspaces and Turborepo) that looks something like this:

/apps/web-app (NextJS app) /cloud-functions/ (Google cloud functions using the @google-cloud/functions-framework) /packages/* (Contains a few typescript packages used by both of the above)

All of it is using Typescript.

I started by setting up the NextJS app and the packages, added the packages to the next-transpile-modules in next.config.js and everything was working great. I didn't have to do anything to my packages to get them working and hot reloading.

Next, I attempted to set up the Google Functions Framework, and that was much more painful. It took a few days of trying different set ups found around the web before I finally got it working. The solution I finally came to was to convert all of the packages to type: module, add the .js extension to all of the import statements, compile them into dist folders with an index.js, and point main in the package to that dist/indexjs file. I think that was it, it's kind of a blur since I tried so many different things before it worked.

This finally got the functions working locally but had the drawback that now the NextJS app/next-transpile-modules doesn't use the typescript anymore, I think it looks at the *.js files in the dist folder instead. That means that I've lost hot reloading and automatic transpilation.

Do you recommend adding a watch on each package's TSC to solve this issue whenever we run next dev, or is there a better approach?

Using nextjs 12. and next-transpile-modules 9..

martpie commented 1 year ago

Do you have a minimal repro with which I can work? Without context on what problems come with the Google functions package, it's a bit hard to help.

pip8786 commented 1 year ago

I don't currently but I can work on one. I'll post back when I have it.

kachkaev commented 1 year ago

Do you recommend adding a watch on each package's TSC to solve this issue whenever we run next dev [...] ?

Yes, I believe so. Turborepo can help here. If your dev command is configured correctly, you won't have to spawn multiple terminals to run Next.js and to build those packages.

You can bring back typings by specifying "typings": "dist/index.d.ts" next to "main": "dist/index.js".

pip8786 commented 1 year ago

@kachkaev Adding a watch to every package that's brought in by this module works. I've been meaning to get a repo to show the issues I ran into but haven't had time so I'll close until I can. Thanks!.