How to configure watched files under node_modules

[stevebeauge]

I'm working in a mono repository that contains both SPFX projects and some custom component libraries.

The custom component libraries are linked under the SPFX project (using pnpm workspace) and are build using a simple tsc command)

It means I have this folder structure:

• root
  • myspfxwebpart
  • node_modules
    • mylib (linked from mylib)
    • src/*.ts
    • lib/*.js
  • mylib (actual location)
  • src/*.ts
  • lib/*.js (build using tsc)

When I use fast-serve, any time I update one of the ts file under mylib, it triggers a compilation of the SPFX project (but not the mylib project).

However, because the compiler will use the JS file and not the TS files, it should not trigger.

If I run a "watch mode" on my library (tsc -w) from another console windows, my lib is properly updated. however, fast serve will refresh before the new JS is available. I can get my changes by refreshing the browser after the new js is ready.

I didn't find how to control what's watched.

I tried to add this in the webpack.extend.js file :

const webpackConfig = {
    watchOptions: {
        ignored: /node_modules/,
    }
};

but it does not seem to be taken into account (no trace in the dumped web config file of this watch option).

Thanks in advance for the help.

PS: project is using SPFX 1.16.1 and spfx-fastserve-helper is 1.16.1

[s-KaiNet]

Could you show how do you import functions from mylib in your webparts' code?

[stevebeauge]

A simple import { myFunc } from '@myrepo/mylib' (which is what is inside mylib's package.json name attribute)

[s-KaiNet]

I don't know your exact setup, but I created a small POC and it works as expected. You should run pnpm run serve in spfx folder and pnpm run watch in lib folder. Every time you change .ts inside lib, it creates new .js output. spfx watches .js changes from lib and refreshes accordingly. Please try it out and say if it works for you.

[stevebeauge]

The issue is that the compilation triggers as soon as the Ts file itself changes. Once the js file is emitted, I have to manually refresh to see the changes

[s-KaiNet]

Have you tried my POC? It doesn't trigger compilation on TS change.

[stevebeauge]

Your repo works as expected. I may have something broken elsewhere in my code. Let's close the issue for now, until I can reproduce it in a simple env. Thanks for your help

[heesungjang]

If anyone else is experiencing a similar issue, in our case, we have multiple projects managed within a monorepo (rushjs).

This includes SPFx projects and npm packages that are used across these SPFX projects. These npm packages are listed as "externals" in the config.json file to exclude them from the bundle.

When we removed these packages from the "externals" list, we noticed that changes made to those packages were being reflected in the SPFX projects and the "fast-serve" recompilation process detected these changes.

• We remove those packages from externals in config.json when serving and add them back when bundling with gulp task.