Watching?

[curran]

It would be awesome if changes made in transpiled packages were to cause the same automatic reloading as files changed within the /pages directory. It appears this case is considered in the plugin implementation, and has been iterated on in recent changes, but it is not working for me.

I have a reproduction case here: curran/nextjs-esm-example#4

Reproduction specifics:

• Uses NextJS 7
• Uses Lerna (symlinks)
• Uses an Express app that invokes Next

Desired behavior:

• The NextJS dev server should reload when you change files in the transpiled package.

Current behavior:

• The NextJS dev server does not reload when you change files in the transpiled package (but it does reload if you change files locally).

I notice there's already something going on with watchOptions at https://github.com/martpie/next-plugin-transpile-modules/blob/master/index.js#L59, but I don't know enough about Webpack to assess why the reloading would not be working here.

I can confirm the webpackDevMiddleware is in fact getting set up, and the regex has been replaced.

console.log(ignored); from within the plugin yields the following:

[ /\.git/,
  /\.next\//,
  /node_modules(?!\/(some-es6-package)(?!.*node_modules))/ ]

Still, when I change a file inside /node_modules/some-es6-package/, the watcher does not catch the change.

P. S. Thanks for maintaining this plugin! It's super useful.

[curran]

Related issue in the original repo: wellcometrust#6

[curran]

Also tested the official example, and can confirm that watching is not happening with that example also https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

(even after upgrading it to use "0.1.3")

[martpie]

Out of curiosity, why using Lerna? I am asking because I see a lot of Lerna being wrongly used. It’s only purpose is to publish different packages from a monorepo, it does not help for and do not intend to help local development.

Also If you use yarn (without workspaces), this plugin won’t work because yarn install copy files instead of symlinking them.

[martpie]

If what I said do not help, could you show me a repo where it is reproducible, so I can debug it?

[curran]

I happened to learn about Lerna as a solution for scaling an application with multiple local packages, before I learned about Yarn workspaces. I have not tried Yarn workspaces yet. It may be better than Lerna, I'm not sure. Lerna is working well for me so far (for the vizhub project). I have found it useful for merging multiple packages into a monorepo, for local development. I'm curious, do you have any reference discussing that Lerna is not intended to help local development?

This PR contains the code that reproduces the behavior of transpiling working but not watching: curran/nextjs-esm-example#4

To reproduce:

git clone git@github.com:curran/nextjs-esm-example.git
cd nextjs-esm-example
git checkout with-jsx
lerna bootstrap
cd packages/nextjs-with-express/
npm run dev

Changing a file under packages/some-es6-package does not cause the Next dev server to reload, but those files seem to be transpiled correctly (so if you restart the server, you do see the updates).

Thank you for your time on this!

[martpie]

I am going to check your example, maybe it is a bug with the plugin :)

You can also have a look at what Lerna's creator told me a few months ago about Lerna and monorepos: lerna/lerna#1243 (comment)

[curran]

Thanks for the thread link! It is very interesting. Perhaps Lerna is not the right choice for me after all.

The main reason actually I'm using it is to establish an explicit dependency graph between internal packages. Meaning, to make sure certain packages are isolated and do not import from certain others (following Clean Architecture principles). But, maybe what I want to do does not require Lerna. I'm not sure.

Thanks again for the link, and for looking into this.

[martpie]

Just tested it, everything is working fine :)

A problem with Node.js? I tested with Node v8.11.3.

edit, jeez this upload quality... Click on the image to see the HD version

[zachariahtimothy]

@martpie thanks so much for sharing. I am following @curran 's esm example but I am using typescript. This plugin is re-transpiling as expected but I still have to manually restart the Next JS app (when changes are made to dependent lib). Any ideas on how to get next to restart automatically when a dependent TS/TSX file is changed? Thanks!

[martpie]

@zachariahtimothy It should be working fine.

Have a look at this example: https://github.com/martpie/monorepo-typescript-next-the-sane-way

Hot reloading works fine too with TypeScript.

please note this plugin does not work if using Yarn, as Yarn copy files instead of symlinking them.

[zachariahtimothy]

Thank you for sharing @martpie ! I am going to try this with Lerna and Yarn since Lerna uses symlinks. Would you like a PR if I get that working?

[martpie]

As said earlier in this issue, Lerna is not a tool to manage dependencies between projects, but a tool to publish multiple packages to npm :)

This monorepo example I gave you is the fruit of countless hours to make this setup work simply and correctly (I went through the Lerna thing too, next-plugin-transpile-modules’s fork was a part of it as well)

If you are talking about a PR to the monorepo example, I am not interested in having Lerna working as it is not what this tool is for.

If you are talking about a PR to this Next.js plugin, and you see I missed something or there’s a bug, yes, I’d gladly appreciate a PR :]

[zachariahtimothy]

@martpie yes I forgot about that. There is so many people using lerna incorrectly that is gets confusing what it's true purpose. My attempts failed so guess it is back to NPM for me. Thanks again!