diff --git a/.changeset/clean-ravens-film.md b/.changeset/clean-ravens-film.md new file mode 100644 index 00000000..5fbbd440 --- /dev/null +++ b/.changeset/clean-ravens-film.md @@ -0,0 +1,5 @@ +--- +"10up-toolkit": patch +--- + +Fix: watch close when using modules diff --git a/packages/toolkit/scripts/start.js b/packages/toolkit/scripts/start.js index e087953d..3708805d 100644 --- a/packages/toolkit/scripts/start.js +++ b/packages/toolkit/scripts/start.js @@ -26,15 +26,18 @@ if (hasWebpackConfig()) { configPath = fromProjectRoot('webpack.config.js'); } +let server; +let compiler; + const runWebpack = () => { const config = require(configPath); - const compiler = webpack(config); + compiler = webpack(config); const { devServer } = config; if (devServer) { const devServerOptions = { ...devServer, host: '127.0.0.1', open: false }; - const server = new WebpackDevServer(devServerOptions, compiler); + server = new WebpackDevServer(devServerOptions, compiler); server.start(); } else { @@ -52,13 +55,6 @@ const runWebpack = () => { const hot = hasArgInCLI('--hot'); if (hot) { - process.on('SIGINT', () => { - // when gracefully leaving hot mode, clean up dist folder. - // this avoids leaving js code with the fast refresh instrumentation and thus reducing confusion - console.log('\n10up-toolkit: Cleaning up dist folder...'); - - fs.rmSync(fromProjectRoot('dist'), { recursive: true, force: true }); - }); // compile the fast refresh bundle const config = require(fromConfigRoot('webpack-fast-refresh.config.js')); const compiler = webpack(config); @@ -78,3 +74,19 @@ if (hot) { } else { runWebpack(); } + +process.on('SIGINT', () => { + if (server) { + server.close(); + } + + compiler.close(); + + if (hot) { + // when gracefully leaving hot mode, clean up dist folder. + // this avoids leaving js code with the fast refresh instrumentation and thus reducing confusion + console.log('\n10up-toolkit: Cleaning up dist folder...'); + + fs.rmSync(fromProjectRoot('dist'), { recursive: true, force: true }); + } +});