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 84 forks source link

Is it possible to "build" (or export) a transpiled Next.js module? #270

Closed oalexdoda closed 2 years ago

oalexdoda commented 2 years ago

I'm build a private NPM package that I'd like to use on certain projects, but I want the published version to only have a dist type folder where the compiled source is. Without having to include all the source files.

The module is using a lot of Next.js, and it's basically a way to share code between different projects. Any ideas on how to export a module like that which can still leverage things like the Next.js hooks (router, etc.)?

Is that something specific to next-transpile-modules, or could it be done differently? Thanks a lot in advance!

martpie commented 2 years ago

Hello, sorry, i am not sure how it is related to next-transpile-modules. You basically just want to build an npm package, now depending on your build output (esm or commonjs), you may need ntm or not.

If you output commonjs, then just import your package as any other package.

If you are asking how to bundle Next.js related helpers, this is probably not the best repo to ask for help, maybe try Vercel's discord :)

oalexdoda commented 2 years ago

Hey @martpie , thank you and my apologies if it's unrelated to the repo itself. I wasn't sure where to start and thought that based on the setup I currently have a good starting point would be ntm.

What would you suggest between esm and commonjs if the goal was to keep the core project the same and only compile the npm package?

I'll check in on the Vercel Discord, thanks a lot!

martpie commented 2 years ago

To write a package, if you want to write TypeScript, you could use tsdx, otherwise, if you want something more low-level and faster, ESBuild is a nice choice too.

I am not sure how it is possible to re-use Next's internals though, but it should be do-able.

martpie commented 2 years ago

Regarding output, this is a delicate choice. ESM is the modern way, but not all tooling respects it well (that's why NTM exists), commonjs is safer, but older too.

martpie commented 2 years ago

Last but not least, Next.js supports ESM, but only "kinda", cf. https://github.com/martpie/next-transpile-modules/issues/265

oalexdoda commented 2 years ago

Thanks a lot @martpie , really appreciated!

oalexdoda commented 2 years ago

Hey @martpie , I followed your advice and started using ESBuild with ESM modules. Everything works, great, however it looks like every time the dist gets rebuilt, Next reloads the entire app. Is there any way to enable hot reload so that it only updates whatever component changes, similar to how it does for the app itself? Thank you!

martpie commented 2 years ago

ESBuild? With Next.js? O_o'

oalexdoda commented 2 years ago

Yup! Using it to compile the modules and then loading the dist into the projects that use the shared library. It works flawlessly. But fast refresh breaks, so I'm wondering if there's a better way to do it using next-transpile where it references the source rather than the dist while in dev mode (i.e. if the module is npm linked)?

oalexdoda commented 2 years ago

Ended up using a custom next.config.js plugin that leverages the transpiled components while in dev mode. Then, it exports the default as a bundle via a TSUP + Turbopack config. Best of both worlds - for DX while building and for the final build when delivering the final packages.