Wsrtjtyk

I'm using a project based on the example at https://github.com/zeit/next.js/tree/master/examples/custom-server-typescript

I've configured a Babel plugin in next.config.js as follows:


let config = withTypescript({
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: "secret"
},
publicRuntimeConfig: {
// Will be available on both server and client
port: parseInt(process.env.PORT, 10) || 3000,
mySecret: process.env.MY_SECRET // Pass through env variables
},
// See https://github.com/zeit/next.js/tree/master/examples/with-sw-precache
webpack: config => {
config.plugins.push(
new SWPrecacheWebpackPlugin({
verbose: true,
staticFileGlobsIgnorePatterns: [/.next//],
runtimeCaching: [
{
handler: "networkFirst",
urlPattern: /^https?.*/
}
]
})
)
return config
}
})
module.exports = config


When I run the yarn build (whose script is next build && tsc --project tsconfig.server.json) the webpack plugin is run and the service-worker.js is generated as expected.

However, when I run yarn dev (whose script is nodemon server/index.ts), the Webpack plugin isn't run and no service-worker.js is generated.

So as best I can tell Webpack is not run directly when I use yarn dev and it only uses ts-node on the TypeScript source. If my understanding on this is correct, how can I get hot-reloading AND load other babel plugins (as configured in next.config.js)? If my understanding is off, please enlighten me!