How can I make Razzle not repeat itself infinity times when saving in VS Code a file that is already saved?

[silviubogan]

I begin with:

$ npm start

Razzle starts up, the browser can access the app. I have in VS Code a file inside the Razzle-based project (e.g. some .ts file) that I save again although it is already saved. I get this in the terminal:

It repeats itself until I press Ctrl-C.

My razzle.config.js is this:

module.exports = {
  plugins: ["scss"],
  modifyWebpackOptions({ env: { target, dev }, options: { webpackOptions } }) {
    webpackOptions.notNodeExternalResMatch = (request, context) => {
      return /(react-syntax-highlighter|react-virtualized|react-select-virtualized|tiny-slider)/.test(
        request
      );
    };
    webpackOptions.babelRule.include = webpackOptions.babelRule.include.concat([
      /react-syntax-highlighter/,
      /react-virtualized/,
      /react-select-virtualized/,
      /tiny-slider/,
    ]);
    return webpackOptions;
  },
};

What can I do next? Is it something obvious or should I post the verbose debug output? If yes, all of it or just one of the flags inside debug in razzle.config.js? Could it be a file system issue related to the available watchers or something like this? If yes, then I have some more details to put here on request.

Thanks!

[fivethreeo]

You are probably watching some files in the build directory or something

[silviubogan]

You still have no emit in tsconfig?

Yes.

[silviubogan]

Tsc is only used for type checking. We transpile with babel. There is also the typescript plugin for razzle if you need to use ts-loader instead of babel.

Are you suggesting me to use the TS plugin for Razzle instead of the builtin support? I thought that all TS does is type checking plus some things that babel does for compatibility with older ES versions. Currently I do not see why it would be advantageous to use the TS plugin for Razzle.

[silviubogan]

It does the same. I think I'll try without VS Code after another reboot.

I did this, I used just two terminal instances (and an open browser window), one with npm start and the other with NeoVim.

Pressing :w even though the file has not been changed, or at least not the contents of the file, produces this:

[silviubogan]

If I set noEmit to false in tsconfig.json, now I get, instead of 0, hundreds of errors. All of them TS5055, they are trying to output the *.js files over themselves, like the output path is not set:

Cannot write file '/path/to/my/project/x/y/z/abc.js' because it would overwrite input file.

Do you think it is possible that this causes the autorepeating compilation process that I talked about in this discussion?

What is the best strategy to overcome this situation?

1. I could convert all the JS files to TS or TSX but it would take some time.
2. Or is it worth it to migrate to ts-loader? Does ts-loader provide a way to avoid this issue?

[silviubogan]

There are 148 errors of type TS5055 but the auto-repeating behavior is gone although I only changed noEmit to false.

[fivethreeo]

noEmit must be true

[silviubogan]

I did not try yet with another WebPack version. I don't know which should I use, npm or yarn. I think npm is the oldest and it has worked for me very well in the past. I have to take another look at the Razzle examples.

the best would be to take the basic typescript example and add the code, then add deps with yarn and fix code till it builds.

This I want to keep in mind. Thanks.

[silviubogan]

Actually, I missed some .js files. I'll keep you updated.

[silviubogan]

For me it works now that I have converted the last 2 .js files into .ts/x files. There still are a few .json files that don't cause problems. Even if I save them, they don't cause problems.

[fivethreeo]

So something touches all js files?

[silviubogan]

So something touches all js files?

Maybe, I am not sure.

[fivethreeo]

Mixing js and ts seems to cause issues.

[fivethreeo]

If this is webpack 5.45+ this is a webpack bug. They are working on it.