dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.43k stars 499 forks source link

How to make CRACO watch for specific node modules package? #463

Closed tal-rofe closed 1 year ago

tal-rofe commented 1 year ago

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.
 ```
zanemcca commented 1 year ago

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

tal-rofe commented 1 year ago

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