npm workspaces & Webpack

[TriDotS]

Ausgangslage

Node 16 ist die aktuelle LTS und NPM Workspaces ist erst ab der NPM Version 7 verfügbar.
Wenn keine NPM Version >7 auf dem Rechner verwendet wird, dann funktioniert das lerne bootstrap nicht!

$ npm -v
8.3.1

$node -v
v16.14.0

POC Folder strukture

├── apps
│   ├── leanup
│   │   └── webpack.config.js
│   └── react-app
├── workspace.code-workspace
├── lerna.json
├── node_modules
├── package-lock.json
├── package.json
├── packages
│   ├── package-1
│   └── package-2
└── tsconfig.json

/** lerna.json */
{
  "packages": [
    "apps/*",
    "packages/*"
  ],
  "version": "0.0.0",
  "useWorkspaces": true
}

/** package.json */
{
  "name": "poc-workspace",
  "private": true,
  "workspaces": {
    "packages": [
      "apps/*",
      "packages/*"
    ]
  },
  "scripts": {
    "bootstrap": "lerna clean -y && lerna bootstrap",
    "build": "lerna run build",
    "start": "lerna run start --stream --scope=@apps/leanup",
  },
}

Installation von leanup im Ordner apps/leanup

Hinweis: Die Fehler durch die verschiedenen Paketversionen bei der Installation habe ich schon korrigiert.

$ pwd
/path/to/poc-workspace

$ tree -L 1
├── apps
├── poc-workspace.code-workspace
├── lerna.json
├── node_modules
├── package.json
├── packages
└── tsconfig.json

$ mkdir apps/leanup && cd apps/leanup
$ npm i -D @leanup/cli @leanup/cli-react
$ npx react create

Da ich immer noch im leanup Ordner bin könnte ich jetzt npm run start ausführen und der Browser wird die Seite korrekt anzeigen.
Das Ziel ist es aber die NPM Workspaces zu nutzen.

Lerna Bootstrap

Hinweis: Die package-lock.json im Ornder apps/leanup sollte vorher gelöscht werden.

$ pwd
/path/to/poc-workspace

$ tree -L 1
├── apps
├── poc-workspace.code-workspace
├── lerna.json
├── node_modules
├── package.json
├── packages
└── tsconfig.json

$ lerna clean -y
nfo cli using local version of lerna
lerna notice cli v4.0.0
lerna info clean removing /path/to/poc-workspace/apps/leanup/node_modules
lerna success clean finished

$ lerna bootstrap                      
lerna notice cli v4.0.0
lerna info bootstrap root only
npm WARN deprecated read-package-tree@5.3.1: The functionality that this package provided is now in @npmcli/arborist
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 1455 packages, and audited 1461 packages in 2m

186 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities 

Initiales Starten der Anwendung

Hinweis: Der Scope muss zum name in der package.json passen.

/** apps/leanup/package.json */
{
    "name": "@apps/leanup",
    [...]
}

lerna run start --stream --scope=@apps/leanup

lerna notice cli v4.0.0
lerna notice filter including "@apps/leanup"
lerna info filter [ '@apps/leanup' ]
lerna info Executing command in 1 package: "npm run start"
@apps/leanup: > @apps/leanup@1.3.2 start
@apps/leanup: > npm run serve -- --open
@apps/leanup: > @apps/leanup@1.3.2 serve
@apps/leanup: > cross-env NODE_ENV=development webpack serve --devtool=source-map --no-hot "--open"
@apps/leanup: [webpack-cli] Failed to load '/path/to/poc-workspace/apps/leanup/webpack.config.js' config
@apps/leanup: [webpack-cli] Error: Cannot find module '/path/to/poc-workspace/apps/leanup/node_modules/@leanup/stack/package.json'

Das starten funktioniert nicht, da ein Script versucht eine Datei zu finden welche sich im node_modules Ordner der Anwendung befinden soll.

Durch die Verwendung von NPM Workspaces gibt es allerdings keine einzelnen node_modules Ordner mehr in den jeweiligen Packages/Apps.

Alle node_modules befinden sich im poc-workspace root und werden von allen anderen mit genutzt.

Quick FIX

Ich hab mir angeschaut wo "@leanup/stack/package.json" geladen wird.

• Suche im Github Repo
• Im node_modules Ordner node_modules/@leanup/stack/dist/cjs/index.js

Das Problem liegt in dieser Zeile (13)

/** node_modules/@leanup/stack/dist/cjs/index.js Zeile 13*/
[...]
const packageJsonCli = require(path.resolve(process.cwd(), 'node_modules/@leanup/stack/package.json'));
[...]

Das path.resolve gibt als absoluten Pfad /path/to/poc-workspace/apps/leanup/node_modules/@leanup/stack/package.json zurück.

Die package.json besitzt allerdings schon die korrekten export für require also wieso nicht nutzen.

{
  "name": "@leanup/stack",
  [...]
  "exports": {
    ".": {
      "require": "./dist/cjs/index.js", /** <====== */
      "import": "./dist/mjs/index.js"
    },
    [...]
  }
}

/** node_modules/@leanup/stack/dist/cjs/index.js Zeile 13*/
[...]
const packageJsonCli = require('@leanup/stack');
[...]

Test

$ lerna run start --stream --scope=@apps/leanup

lerna notice cli v4.0.0
lerna notice filter including "@apps/leanup"
lerna info filter [ '@apps/leanup' ]
lerna info Executing command in 1 package: "npm run start"
@apps/leanup: > @apps/leanup@1.3.2 start
@apps/leanup: > npm run serve -- --open
@apps/leanup: > @apps/leanup@1.3.2 serve
@apps/leanup: > cross-env NODE_ENV=development webpack serve --devtool=source-map --no-hot "--open"
@apps/leanup: <i> [webpack-dev-server] Project is running at:
@apps/leanup: <i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
@apps/leanup: <i> [webpack-dev-server] Content not from webpack is served from '/path/to/poc-workspace/apps/leanup/public' directory
[...]
@apps/leanup: webpack 5.68.0 compiled successfully in 863 ms

[deleonio]

I'll take a look.