EDIT-938: Upgrade Project Watchtower to Node 18

.changeset/grumpy-bikes-hear.md

@@ -0,0 +1,9 @@
+---
+'bundle-splitting-using-loadable': major
+'ssr-with-sass': major
+'@project-watchtower/cli': major
+'@project-watchtower/server': major
+---
+
+Updated packages to use Node 18, Webpack 5 & TSLib 2.6.2.
+Your project will need to be running these 3 updated versions in order to accept the latest project-watchtower version.

.github/workflows/ci.yml

@@ -7,10 +7,10 @@ jobs:
  steps:
  - uses: actions/checkout@master
 
- - name: Set Node.js 10.x
+ - name: Set Node.js 18
  uses: actions/setup-node@master
  with:
- node-version: 10.x
+ node-version: '18'
 
  - name: yarn install
  run: yarn install

.github/workflows/release.yml

@@ -13,10 +13,10 @@ jobs:
  - name: Checkout Repo
  uses: actions/checkout@master
 
- - name: Setup Node.js 10.x
+ - name: Setup Node.js 18
  uses: actions/setup-node@master
  with:
- node-version: 10.x
+ node-version: '18'
 
  - name: Install Dependencies
  run: yarn

examples/bundle-splitting/package.json

@@ -14,6 +14,6 @@
  "@loadable/webpack-plugin": "^5.13.0",
  "@types/loadable__component": "^5.13.0",
  "@types/loadable__server": "^5.12.2",
- "webpack": "^4.44.2"
+ "webpack": "^5.0.0"
  }
 }

examples/ssr-with-sass/config/config.js

@@ -1,5 +1,25 @@
-// eslint-disable-next-line no-undef
+// eslint-disable no-undef
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
 module.exports = {
+ // Configuration options for css-minimizer-webpack-plugin
+ module: {
+ rules: [
+ {
+ test: '/.s?css$/',
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+ },
+ ],
+ },
+ optimization: {
+ minizer: [
+ new CssMinimizerPlugin(),
+ ],
+ },
+ plugins: [new MiniCssExtractPlugin()],
+
  default: {
  CLIENT_ENTRY: './examples/ssr-with-sass/src/client/index.tsx',
  SERVER_ENTRY: './examples/ssr-with-sass/src/server/start.ts',

examples/ssr-with-sass/package.json

@@ -12,14 +12,17 @@
  "autoprefixer": "^10.0.0",
  "css-hot-loader": "^1.4.4",
  "css-loader": "^4.3.0",
+ "css-minimizer-webpack-plugin": "^7.0.0",
  "mini-css-extract-plugin": "^0.11.2",
- "node-sass": "^4.14.1",
+ "node-sass": "8.0.0",
  "null-loader": "^4.0.0",
- "optimize-css-assets-webpack-plugin": "^5.0.4",
  "postcss": "^8.2.10",
  "postcss-loader": "^4.0.2",
  "resolve-url-loader": "^3.1.0",
  "sass-loader": "^10.0.2",
- "webpack": "^4.44.2"
+ "webpack": "^5.0.0"
+ },
+ "peerDependencies": {
+ "webpack": "^5.0.0"
  }
 }

examples/with-server/src/server/start.ts

@@ -10,11 +10,11 @@ export interface AppState {}
 createServer({
  log,
  // Use the middleware hook to register your own middleware
- middlewareHook: app => {
+ middlewareHook: (app: { get: (arg0: string, arg1: (_: any, res: any) => any) => void }) => {
  // Watchtower has setup static file routes by this point
 
  // Add your own routes/middleswares
- app.get('/example-route', (_, res) => res.send('<p>Example server route</p>'))
+ app.get('/example-route', (_: any, res: { send: (arg0: string) => any }) => res.send('<p>Example server route</p>'))
 
  // Watchtower has setup fallback routes to serve your client app for all other routes
  },

jest.json

@@ -9,9 +9,12 @@
  "^bundle-loader": "<rootDir>/lib/test/bundle-loader-mapper.ts"
  },
  "coverageReporters": ["json", "lcov", "text"],
- "globals": {
- "ts-jest": {
- "tsConfig": "test/tsconfig.test.json"
- }
+ "transform": {
+ "^.+\\.tsx?$": [
+ "ts-jest",
+ {
+ "tsconfig": "test/tsconfig.test.json"
+ }
+ ]
  }
 }

package.json

@@ -69,14 +69,14 @@
  "dependencies": {
  "@babel/core": "^7.11.6",
  "@changesets/cli": "^2.10.2",
- "@types/assets-webpack-plugin": "^3.9.0",
- "@types/express": "^4.17.8",
- "@types/html-webpack-plugin": "^3.2.3",
+ "@types/assets-webpack-plugin": "^7.1.5",
+ "@types/express": "^4.17.21",
+ "@types/html-webpack-plugin": "^3.2.9",
  "@types/http-proxy-middleware": "^0.19.3",
  "@types/jest": "^26.0.14",
  "@types/md5": "^2.2.0",
  "@types/mkdirp": "^1.0.1",
- "@types/node": "^14.11.1",
+ "@types/node": "18.17.0",
  "@types/react": "^16.9.49",
  "@types/react-dom": "^16.9.8",
  "@types/react-helmet": "^6.1.0",
@@ -85,30 +85,30 @@
  "@types/serialize-javascript": "^4.0.0",
  "@types/supertest": "^2.0.10",
  "@types/webpack-bundle-analyzer": "^3.8.0",
- "@types/webpack-dev-middleware": "^3.7.2",
  "@types/webpack-env": "^1.15.3",
  "@types/webpack-hot-middleware": "^2.25.3",
  "@types/webpack-merge": "^4.1.5",
- "@typescript-eslint/eslint-plugin": "^4.1.1",
- "@typescript-eslint/parser": "^4.1.1",
- "eslint": "^7.9.0",
+ "@typescript-eslint/eslint-plugin": "^7.12.0",
+ "@typescript-eslint/parser": "^7.12.0",
+ "eslint": "^8.56.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-config-wanews": "^2.2.0",
- "eslint-plugin-react": "^7.20.6",
- "eslint-plugin-react-hooks": "^4.1.2",
+ "eslint-plugin-react": "^7.34.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
  "express": "^4.17.1",
- "jest": "^26.4.2",
+ "jest": "29.7.0",
  "prettier": "^2.1.2",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-helmet-async": "^1.0.7",
  "react-router-dom": "^5.2.0",
  "serialize-javascript": "^5.0.1",
  "supertest": "^4.0.2",
- "ts-jest": "^26.4.0",
- "tslib": "^2.0.1",
- "typescript": "^4.0.3",
- "typescript-log": "^2.0.0"
+ "ts-jest": "29.1.4",
+ "tslib": "2.6.2",
+ "typescript": "^5.4.2",
+ "typescript-log": "^2.0.0",
+ "webpack": "^5.0.0"
  },
  "version": "0.0.0"
 }

packages/cli/package.json

@@ -18,26 +18,29 @@
  "keywords": [],
  "scripts": {},
  "dependencies": {
- "@types/webpack-dev-middleware": "^3.7.2",
+ "@types/assets-webpack-plugin": "^7.1.5",
  "assets-webpack-plugin": "^5.1.1",
  "babel-loader": "^8.1.0",
  "dotenv": "^8.2.0",
  "esbuild-loader": "^2.12.0",
  "file-loader": "^6.1.0",
- "html-webpack-plugin": "^4.4.1",
+ "html-webpack-plugin": "^5.6.0",
  "http-proxy-middleware": "^1.0.5",
  "md5": "^2.3.0",
  "mkdirp": "^1.0.4",
  "open": "^7.2.1",
  "rimraf": "^3.0.2",
  "source-map-support": "^0.5.19",
  "speed-measure-webpack-plugin": "^1.3.3",
- "tsconfig-paths-webpack-plugin": "^3.3.0",
- "webpack": "^4.44.2",
- "webpack-bundle-analyzer": "^3.9.0",
- "webpack-dev-middleware": "^3.7.2",
- "webpack-hot-middleware": "^2.25.1",
- "webpack-merge": "^5.1.4"
+ "tsconfig-paths-webpack-plugin": "^4.1.0",
+ "webpack": "^5.0.0",
+ "webpack-bundle-analyzer": "^4.10.0",
+ "webpack-dev-middleware": "^7.2.0",
+ "webpack-hot-middleware": "^2.26.0",
+ "webpack-merge": "^5.10.0"
  },
- "devDependencies": {}
+ "devDependencies": {},
+ "peerDependencies": {
+ "webpack": "^5.0.0"
+ }
 }

packages/cli/src/bin/watch.ts

@@ -20,7 +20,7 @@ async function watch(
  buildConfig: BuildConfig,
  watchProcessEnv: NodeJS.ProcessEnv,
  ...args: WatchParam[]
-): Promise<ChildProcess | WatchServer> {
+): Promise<ChildProcess | WatchServer | undefined> {
  const { HAS_SERVER } = buildConfig
  const additionalStartParams: StartParam[] = []
  const env: NodeJS.ProcessEnv = { ...watchProcessEnv }

packages/cli/src/build/build.ts

@@ -128,7 +128,7 @@ function getWebpackConfigInternal(
  }
 
  return config
- } catch (err) {
+ } catch (err: any) {
  log.error({ err }, 'Error loading webpack config!')
  return undefined
  }

packages/cli/src/clean/clean.ts

@@ -12,7 +12,7 @@ export function clean(log: Logger, paths: string | string[]): Promise<any> {
  log.error({ err }, 'Clean error')
  reject(err)
  } else {
- resolve()
+ resolve({})
  }
  })
  })

packages/cli/src/config/create-server-externals.ts

@@ -1,10 +1,20 @@
 import fs from 'fs'
-import webpack from 'webpack'
+import { ExternalItemFunctionData } from 'webpack'
 import path from 'path'
 import { CreateWebpackConfigOptions } from '.'
+
+
+type WebpackExternalFunctionElement = ((
+ data: ExternalItemFunctionData,
+ callback: (
+ err?: null | Error,
+ result?: string | boolean | string[] | { [index: string]: any }
+ ) => void
+) => void)
+
 export function createServerExternals(
  options: CreateWebpackConfigOptions,
-): webpack.ExternalsFunctionElement {
+): WebpackExternalFunctionElement {
  const baseDirNodeModules = path.resolve(options.buildConfig.BASE, 'node_modules')
  const nodeModules: string[] = []
  if (fs.existsSync(baseDirNodeModules)) {
@@ -14,7 +24,9 @@ export function createServerExternals(
  if (fs.existsSync(cwdNodeModules)) {
  nodeModules.push(...fs.readdirSync(cwdNodeModules))
  }
- return (_context, request, callback) => {
+ return (data, callback) => {
+ const request = data.request
+
  if (request === '@project-watchtower/cli') {
  resolveFromNodeModules()
  } else if (
@@ -23,14 +35,14 @@ export function createServerExternals(
  ) {
  includeInBundle()
  } else if (options.buildConfig.SERVER_BUNDLE_ALL_EXCEPT) {
- if (options.buildConfig.SERVER_BUNDLE_ALL_EXCEPT.includes(request)) {
+ if (request && options.buildConfig.SERVER_BUNDLE_ALL_EXCEPT.includes(request)) {
  resolveFromNodeModules()
  } else {
  includeInBundle()
  }
- } else if (options.buildConfig.SERVER_INCLUDE_IN_BUNDLE.includes(request)) {
+ } else if (request && options.buildConfig.SERVER_INCLUDE_IN_BUNDLE.includes(request)) {
  includeInBundle()
- } else if (nodeModules.includes(request)) {
+ } else if (request && nodeModules.includes(request)) {
  resolveFromNodeModules()
  } else {
  includeInBundle()

packages/cli/src/config/webpack.client.ts

@@ -1,6 +1,5 @@
 import fs from 'fs'
 import path from 'path'
-import webpack from 'webpack'
 import AssetsPlugin from 'assets-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 
@@ -44,7 +43,7 @@ export const clientBaseConfig: CreateWebpackConfig = (options) => {
  }
 
  const plugins = getPlugins(options.buildConfig)
- const resolvePlugins: webpack.ResolvePlugin[] = []
+ const resolvePlugins: any[] = []
 
  if (SERVER_PUBLIC_DIR) {
  const indexHtml = path.resolve(SERVER_PUBLIC_DIR, 'index.html')

packages/cli/src/config/webpack.server.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack'
+import webpack, { WebpackPluginInstance } from 'webpack'
 import { CreateWebpackConfigOptions } from '.'
 import { createServerExternals } from './create-server-externals'
 
@@ -11,14 +11,14 @@ import { createServerExternals } from './create-server-externals'
 export const serverBaseConfig = (options: CreateWebpackConfigOptions): webpack.Configuration => {
  const { PUBLIC_PATH, SERVER_ENTRY, OUTPUT } = options.buildConfig
 
- const plugins: webpack.Plugin[] = [
+ const plugins: WebpackPluginInstance[] = [
  new webpack.BannerPlugin({
  banner: 'require("source-map-support").install();',
  entryOnly: false,
  raw: true,
  }),
  ]
- const resolvePlugins: webpack.ResolvePlugin[] = []
+ const resolvePlugins: any[] = []
 
  return {
  entry: {

packages/cli/src/server/dev.ts

@@ -24,6 +24,10 @@ export const getHotReloadMiddleware: HotReloadMiddleware = (log, buildConfig) =>
  }
  const compiler = webpack(config)
 
+ if(compiler === undefined) {
+ throw new Error('Unable to build compiler')
+ }
+
  const dev = webpackDevMiddleware(compiler, {
  // do not serve index.html on / route
  // https://github.com/webpack/webpack-dev-middleware/issues/153
@@ -46,7 +50,7 @@ export async function openBrowser(log: Logger, port: number) {
 
  try {
  await open(`http://localhost:${port}`, { url: true })
- } catch (e) {
+ } catch (e: any) {
  log.warn(e, 'Opening browser failed')
  }
 }

packages/cli/src/utils/webpack.ts

@@ -1,7 +1,7 @@
 import { Logger } from 'typescript-log'
 import webpack from 'webpack'
 
-export const webpackStatsConfig: webpack.Stats.ToStringOptionsObject = {
+export const webpackStatsConfig: webpack.StatsOptions = {
  children: false,
  chunkModules: false,
  chunks: false,
@@ -23,7 +23,7 @@ export const webpackPromise = (log: Logger, config: webpack.Configuration) =>
  if (err) {
  log.error({ err }, 'Failed to compile')
  reject(err)
- } else {
+ } else if(stats) {
  printWebpackStats(log, stats)
 
  if (stats.hasErrors()) {