Context
I’m trying to initialise an Aurelia 2 project inside an npm workspace but when npm extracts the package dependencies to the root of the workspace aurelia wont boot correctly. Instead I get a series of errors:
$ npm run start
> new_aurelia_monorepo@1.0.0 start
> npm run start -w aurelia-project
> aurelia-project@0.1.0 start
> webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.240:9000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<i> [webpack-dev-middleware] wait until bundle finished: /
asset entry.bundle.js 619 KiB [emitted] (name: entry)
asset favicon.ico 14.7 KiB [emitted]
asset index.html 304 bytes [emitted]
runtime modules 27.4 KiB 13 modules
modules by path ../../node_modules/ 184 KiB
modules by path ../../node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ../../node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ../../node_modules/webpack/hot/*.js 4.59 KiB 4 modules
modules by path ../../node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ../../node_modules/css-loader/dist/runtime/*.js 2.31 KiB 2 modules
+ 2 modules
modules by path ./src/ 6.61 KiB
modules by path ./src/*.js 3.24 KiB 2 modules
modules by path ./src/*.css 2.99 KiB
./src/my-app.css 2.52 KiB [built] [code generated]
../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/my-app.css 485 bytes [built] [code generated]
./src/my-app.html 392 bytes [built] [code generated]
ERROR in ./src/my-app.html 1:0-54
Module not found: Error: Can't resolve '@aurelia/runtime-html' in 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\src'
@ ./src/my-app.js 3:0-46 4:41-53
@ ./src/main.js 2:0-33 3:12-17
ERROR in ./src/main.js 1:0-30
Module not found: Error: Can't resolve 'aurelia' in 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\src'
ERROR in ./src/my-app.js 2:0-54
Module not found: Error: Can't resolve '@aurelia/runtime-html' in 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\src'
@ ./src/main.js 2:0-33 3:12-17
ERROR in ./src/my-app.js 9:0-52
Module not found: Error: Can't resolve '@aurelia/metadata' in 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\src'
@ ./src/main.js 2:0-33 3:12-17
ERROR in ./src/my-app.js 10:0-58
Module not found: Error: Can't resolve '@aurelia/runtime' in 'C:\Work\monorepoTests\new_aurelia_monorepo\packages\aurelia-project\src'
@ ./src/main.js 2:0-33 3:12-17
5 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.82.1 compiled with 5 errors in 2730 ms
Steps to reproduce
I’ve tried using several monorepo solutions like lerna and turbo but they all have the same issue, so I’m just using npm workspaces here because it’s the easiest to setup.
I doubt it matters but I’m running:
npm -v: 9.6.6
node -v: v18.16.0
Setting up my npm workspace
I’m just going to start by setting up an npm workspace.
npm init
and just enter through it. Then edit the package.json file to add our workspaces and a start script. This will reference a directory and project that don’t exist yet but we won’t have to come back later. My package.json looks like this:
{
"name": "new_aurelia_monorepo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run start -w aurelia-project"
},
"author": "",
"license": "ISC",
"workspaces": [
"packages/*"
]
}
Now create the packages directory, this is where our aurelia project will live.
mkdir packages and enter it cd packages
Setting up the aurelia project
Inside packages create a new aurelia project npx makes aurelia. I’m going to call mine aurelia-project (because I referenced this name from my workspace start script), I’m going to choose a default ESNext Aurelia 2 App and I’m not going to install npm dependencies. Backing out of packages to my workspaces root cd ../ I’m going to install aurelias dependencies with npm install. Finally I will run my workspace with npm run start.
Not sure if there’s something obvious I’m missing but running the same aurelia setup outside of npm workspaces runs fine or running the exact same npm workspace but with a vue project instead of aurelia works fine.