Koot Webpack

0.15.15 verified Mon Apr 27 auth: no javascript

A webpack configuration generator specifically tailored for Koot.js applications, providing optimized setups for React SSR, SPA, and electron projects. Latest version 0.15.15 (released Feb 2024) with frequent minor updates. Key differentiators: built-in support for Qiankun micro-frontends, automatic SSR/SPA mode detection, and electron main process hot-reload. Targeted at Koot.js ecosystem users, not a general webpack utility.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module /path/to/koot-webpack/index.js from /path/to/project not supported. ↓

cause Package is ESM-only and cannot be imported with require() in vanilla Node.js.

fix

Change require() to dynamic import() or set "type": "module" in package.json.

error Module not found: Error: Can't resolve 'webpack' ↓

cause Webpack is a peer dependency but not installed.

fix

Run npm install webpack@5 --save-dev to install it.

error TypeError: getConfig is not a function ↓

cause Incorrect import style; likely used require() when package is ESM-only.

fix

Use import { getConfig } from 'koot-webpack' instead of const { getConfig } = require(...).

Warnings

breaking ESM-only since v0.15: CommonJS require() will fail with ERR_REQUIRE_ESM. ↓

fix Use import instead of require(). If necessary, use dynamic import() in CommonJS.

breaking Webpack 5 required as peer dependency. Using Webpack 4 will cause compatibility errors. ↓

fix Upgrade to webpack@5 and remove any webpack 4 specific loaders.

deprecated Option `templateInject` deprecated in v0.15.12; use `htmlPlugin` instead. ↓

fix Replace `templateInject` with `htmlPlugin` in your config.

gotcha When using with Electron, target 'electron-renderer' is no longer set since v0.15.16. Node.js APIs may be unavailable. ↓

fix Use contextBridge to expose needed Node APIs to renderer processes.

Install

npm install koot-webpack

yarn add koot-webpack

pnpm add koot-webpack

Imports

default

wrong

const kootWebpack = require('koot-webpack')

correct

import kootWebpack from 'koot-webpack'

Package is ESM-only since v0.15; no CommonJS export available.

getConfig

wrong

const { getConfig } = require('koot-webpack')

correct

import { getConfig } from 'koot-webpack'

Named export for generating webpack config; ESM-only.

startDevServer
```
import { startDevServer } from 'koot-webpack'
```
Starts the development server with HMR; ESM-only.

Quickstart

Generates a webpack configuration for a Koot.js SSR project and runs the build.

import { getConfig } from 'koot-webpack';
import webpack from 'webpack';

const config = getConfig({
  mode: 'development',
  projectPath: process.cwd(),
  type: 'ssr', // or 'spa', 'electron'
  env: { KEY: process.env.KEY ?? '' }
});

webpack(config, (err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(stats.toString({ colors: true }));
});