dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Home Page:https://craco.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to make CRACO watch for specific node modules package?

tal-rofe opened this issue · comments

I want CRACO to watch specific package changes (as it is a private package in my monorepo environment..).
So I configured craco:

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import type { CracoConfig } from '@craco/craco';

const config: CracoConfig = {
	eslint: { enable: false },
	plugins: [
		{
			plugin: {
				overrideWebpackConfig: ({ webpackConfig }) => {
					webpackConfig.resolve!.plugins!.push(
						new TsconfigPathsPlugin({
							configFile: './tsconfig.base.json',
							extensions: ['.ts'],
						}),
					);

					return webpackConfig;
				},
			},
		},
	],
	devServer: {
		watchOptions: {
			ignored: /node_modules\/(?!@blabla\/common)/,
		},
	},
};

export default config;

I guess you should only relate to devServer key. But when I try to run CRACO I get:

cross-env BROWSER=none craco start
craco:  *** Cannot find ESLint plugin (ESLintWebpackPlugin). ***
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'watchOptions'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
 ELIFECYCLE  Command failed with exit code 1.
 ```

I use something like this:

class WatchExternalFilesPlugin {
    apply(compiler) {
        compiler.hooks.afterCompile.tapAsync(
        'WatchExternalFilesPlugin',
        (compilation, callback) => {
            [
                path.join(__dirname, 'your-directory-of-interest'),
            ].forEach(path => compilation.contextDependencies.add(path));
            callback();
        });
    }
}

Along with a webpackConfig.plugins.push(new WatchExternalFilesPlugin()); call in my craco.config.js

As I changed to other package, this issue is no longer relevant to me.