NextJS continuously reloads

[ricardomatias]

Hello, I've followed the configuration on alphaTabSamplesWeb/NextJS15, but when I run development mode, NextJS keeps refreshing (re-compiling). There are some notes in the README of the link above, but I didn't find a solution in there.

[Danielku15]

I'd expect there should be some sort of log output that might indicate the problem. Using the sample project from the repo I do not see any problems.

When exactly does the problem start appearing? As soon as you add the webpack plugin?

The more details you share, the easier it will be to help.

[ricardomatias]

I'd expect there should be some sort of log output that might indicate the problem. Using the sample project from the repo I do not see any problems.

When exactly does the problem start appearing? As soon as you add the webpack plugin?

The more details you share, the easier it will be to help.

Yes, adding the plugin caused the issue. Unfortunately there were no helpful logs being generated, just the usual NextJS refresh logs.

In the end, I added the public/alphaTab directory to the watchOptions ignore property and the issue went away. Here's the config for anyone else having trouble with this:

import { AlphaTabWebPackPlugin } from '@coderline/alphatab/webpack';

/** @type {import('next').NextConfig} */
const nextConfig = {
	webpack(config: any, { dev }: { dev: boolean; isServer: boolean }) {
		// Always add the AlphaTab plugin (needed for web workers)
		config.plugins.push(
			new AlphaTabWebPackPlugin({
				assetOutputDir: 'public/alphatab',
			})
		);

		// In development, prevent AlphaTab asset changes from triggering rebuilds
		if (dev) {
			config.watchOptions = {
				...config.watchOptions,
				ignored: /^((?:[^/]*(?:\/|$))*)(\.(git|next)|node_modules|public\/alphatab)(\/((?:[^/]*(?:\/|$))*)(?:$|\/))?/,
			};
		}

		return config;
	},
};

export default nextConfig;

[Danielku15]

Interesting finding. The copy of the files to the public directory should only happen when WebPack processes assets. I wonder what might trigger this regularly on your PC.

[ricardomatias]

Interesting finding. The copy of the files to the public directory should only happen when WebPack processes assets. I wonder what might trigger this regularly on your PC.

The only thing that comes to mind worth mentioning is that I'm using Bun to run the script.

[Danielku15]

I can also not reproduce it with bun run dev (1.2.20), what OS are you on?

Can you reproduce the problem using the sample project or do you have an own project where this is happening?

Some tricks you could try to narrow down the problem:

1. Enable webpack verbose logs by adding config.infrastructureLogging = { level: 'verbose' }; to the next.config.mjs
2. Manually modify your node_modules/@coderline/alphatab/dist/alphaTab.webpack.js (or .mjs depending on your setup). You could add some logs into configureAssetCopy to see which code paths are called multiple times.
3. Check if some other tools are modifying files which cause the filesystem watcher to be triggered. (e.g. Sysinternals process monitor on windows, auditctl on linux,..)