Freshly created app (TypeScript or ESNext) fails to start

Question

Freshly created app (TypeScript or ESNext) fails to start

steenburgh opened this issue 2 years ago · comments

Duncan Steenburgh commented 2 years ago

I'm submitting a bug report

Library Version:
2.0.3

Please tell us about your environment

Operating System:
Windows 10
Node Version:
16.14.2
NPM Version:
8.5.0
Browser:
N/A
Language:
TypeScript 4.6.4
Loader/bundler:
Webpack

Current behavior

Run au new in an empty folder. Select Default TypeScript App or Default ESNext App. I suspect this also is also reproducible with any custom config one might setup that uses Webpack
Run npm start

Webpack begins to load up and exits with the following errors:

Module not found: Error: Can't resolve './compile-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'

Module not found: Error: Can't resolve './view-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'

What is the expected behavior?

Webpack should run successfully, and begin hosting the new app

Workaround

This problem is caused by the latest version of the aurelia-testing module, v1.1.0. I can resolve this by manually installing the previous version, 1.0.0

npm install aurelia-testing@1.0.0

More details

It looks like the ModuleDependenciesPlugin is attempting to import compile-spy and view-spy as a dependency of the aurelia-testing library here:
https://github.com/aurelia/v1/blob/master/webpack/webpack.config.js#L309-L311

Version 1.0.0 of the aurelia-testing module includes view-spy.js and compile-spy.js, which are what I assume the ModuleDependenciesPlugin is looking for.

Version 1.1.0, which was published last Friday (May 6, 2022) does not include either of these files in its build output. Perhaps this was an unintentional breaking change(?). If so, I can open a bug report in aurelia/testing

Full Error Log

npm start

> app@0.1.0 start
> webpack server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.150:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::d04c:531e:2c6d:6be4]:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\SourceCode\aurelia-cli-test\app\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
(node:13688) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by path *.js 1010 KiB
  assets by chunk 1000 KiB (id hint: vendors)
    asset vendors-node_modules_aurelia-templating_dist_native-modules_aurelia-templating_js.cbaa4c25256512a5d677.bundle.js 191 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_ansi-html-community_index_js-node_modules_aurelia-binding_dist_native-mo-4f2c70.cbaa4c25256512a5d677.bundle.js 187 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_aurelia-bootstrapper_dist_native-modules_aurelia-bootstrapper_js-node_mo-047062.cbaa4c25256512a5d677.bundle.js 165 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-262e74.cbaa4c25256512a5d677.bundle.js 163 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_aurelia-templating-binding_dist_native-modules_aurelia-templating-bindin-3cec1e.cbaa4c25256512a5d677.bundle.js 146 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_aurelia-polyfills_dist_native-modules_aurelia-polyfills_js-node_modules_-d2fa51.cbaa4c25256512a5d677.bundle.js 133 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
    asset vendors-node_modules_aurelia-testing_dist_native-modules_aurelia-testing_js-node_modules_aure-02556b.cbaa4c25256512a5d677.bundle.js 13.8 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
  asset runtime~app.cbaa4c25256512a5d677.bundle.js 8.19 KiB [emitted] [immutable] (name: runtime~app) 1 related asset
  asset app.cbaa4c25256512a5d677.bundle.js 3.84 KiB [emitted] [immutable] (name: app) 1 related asset
asset favicon.ico 14.7 KiB [emitted] [from: static/favicon.ico] [copied]
asset index.html 1.58 KiB [emitted]
Entrypoint app [big] 1010 KiB (1.05 MiB) = 9 assets 9 auxiliary assets
runtime modules 4.31 KiB 10 modules
modules by path ./node_modules/ 893 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 53.4 KiB 12 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/aurelia-webpack-plugin/runtime/*.js 2.17 KiB 2 modules
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB 2 modules
  + 26 modules
modules by path ./src/ 728 bytes
  modules by path ./src/*.js 558 bytes
    ./src/main.js 489 bytes [built] [code generated]
    ./src/app.js 69 bytes [built] [code generated]
  ./src/resources/index.js 66 bytes [built] [code generated]
  ./src/app.html 104 bytes [built] [code generated]
./config/environment.json 39 bytes [built] [code generated]

ERROR in ./node_modules/aurelia-testing/dist/native-modules/aurelia-testing.js
Module not found: Error: Can't resolve './compile-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'
resolve './compile-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'
  using description file: C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\package.json (relative path: ./dist/native-modules)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\package.json (relative path: ./dist/native-modules/compile-spy)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\compile-spy doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\compile-spy.js doesn't exist
      as directory
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\compile-spy doesn't exist
 @ ./src/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js

ERROR in ./node_modules/aurelia-testing/dist/native-modules/aurelia-testing.js
Module not found: Error: Can't resolve './view-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'
resolve './view-spy' in 'C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules'
  using description file: C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\package.json (relative path: ./dist/native-modules)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\package.json (relative path: ./dist/native-modules/view-spy)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\view-spy doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\view-spy.js doesn't exist
      as directory
        C:\SourceCode\aurelia-cli-test\app\node_modules\aurelia-testing\dist\native-modules\view-spy doesn't exist
 @ ./src/main.js
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js

webpack 5.72.0 compiled with 2 errors in 2815 ms

Chunpeng Huo · Answer 1 · Tue May 10 2022 07:13:45 GMT+0800 (China Standard Time)

@bigopon, can you check the changes on aurelia-testing? Might need to update our skeleton.

bigopon · Answer 2 · Tue May 10 2022 07:53:38 GMT+0800 (China Standard Time)

@steenburgh can you help paste the output of the following;

npm ls aurelia-templating aurelia-testing aurelia-framework

Duncan Steenburgh · Answer 3 · Tue May 10 2022 08:06:41 GMT+0800 (China Standard Time)

> npm ls aurelia-templating aurelia-testing aurelia-framework

aurelia-cli-test@0.1.0 C:\SourceCode\aurelia-cli-test
+-- aurelia-animator-css@1.0.4
| `-- aurelia-templating@1.11.1
+-- aurelia-bootstrapper@2.4.0
| +-- aurelia-framework@1.4.1
| | `-- aurelia-templating@1.11.1 deduped
| +-- aurelia-templating-binding@1.6.0
| | `-- aurelia-templating@1.11.1 deduped
| +-- aurelia-templating-resources@1.14.3
| | `-- aurelia-templating@1.11.1 deduped
| +-- aurelia-templating-router@1.5.0
| | `-- aurelia-templating@1.11.1 deduped
| `-- aurelia-templating@1.11.1 deduped
+-- aurelia-testing@1.1.0
| +-- aurelia-framework@1.4.1 deduped
| `-- aurelia-templating@1.11.1 deduped
`-- aurelia-webpack-plugin@5.0.4
  `-- aurelia-loader-webpack@2.2.4
    `-- aurelia-hot-module-reload@0.3.0
      `-- aurelia-templating@1.11.1 deduped

bigopon · Answer 4 · Tue May 10 2022 08:18:16 GMT+0800 (China Standard Time)

Version 1.1.0, which was published last Friday (May 6, 2022) does not include either of these files in its build output. Perhaps this was an unintentional breaking change(?). If so, I can open a bug report in aurelia/testing

This is how our latest code looks like for the testing module https://github.com/aurelia/testing/blob/master/dist/native-modules/aurelia-testing.js

Basically the change was from:

export function configure(config) {
    config.globalResources(['./compile-spy', './view-spy']);
}

to

import { CompileSpy } from './compile-spy'
import { ViewSpy } from './view-spy'

export function configure(config) {
    config.globalResources([CompileSpy, ViewSpy]);
}

So there shouldn't be any issue like mentioned above. Any chance the app was created with aurelia-testing@1.0.0 and built (resulted in a webpack cache), then updated to aurelia-testing@1.1.0 and thus resulted in a build-from-cache error? Can you clean all node_modules & package lock and try again?

Duncan Steenburgh · Answer 5 · Tue May 10 2022 08:31:36 GMT+0800 (China Standard Time)

I'm generating a brand new app with aurelia-cli, so there definitely wasn't any existing node_modules/package-lock in the directory before I ran aurelia-cli.

Duncan Steenburgh · Answer 6 · Tue May 10 2022 08:37:22 GMT+0800 (China Standard Time)

Duncan Steenburgh commented 2 years ago

bigopon · Answer 7 · Tue May 10 2022 08:37:55 GMT+0800 (China Standard Time)

In our webpack config, there's these lines:

new ModuleDependenciesPlugin({
  'aurelia-testing': ['./compile-spy', './view-spy']
}),

Removing them should fix the issue. I didn't realize we had those, probably will also need to update our skeleton.

Duncan Steenburgh · Answer 8 · Tue May 10 2022 08:43:56 GMT+0800 (China Standard Time)

Is there any concern that existing apps using projects generated by the aurelia-cli that will be broken, since they both contain this line, and depend on the latest minor version of aurelia-testing, so they'll automatically receive v1.1.0 on their next build? This is what happened to my project, which is why I started trying to find the root cause.

bigopon · Answer 9 · Tue May 10 2022 08:47:05 GMT+0800 (China Standard Time)

Sorry for the breakage, I've just only realized this now.

I think there' two choices:

Make an announcement that upgrading requires the removal of those 3 lines.
Add 2 synthetic modules with the name specified in the webpack config so it doesn't break

I'm quite tempted to go with (1), though (2) is a much more peaceful approach.

bigopon · Answer 10 · Tue May 10 2022 09:47:02 GMT+0800 (China Standard Time)

@steenburgh I've just re-read the PR description, it appeared I missed all the information you've analysed. Thanks for the details.

Chunpeng Huo · Answer 11 · Tue May 10 2022 11:36:45 GMT+0800 (China Standard Time)

The patch is merged. Pls close this issue after verify. Thx!

bigopon · Answer 12 · Tue May 10 2022 19:33:17 GMT+0800 (China Standard Time)

I've published a blog here to address the issue https://aurelia.io/blog/2022/5/10/aurelia-updates-for-may-2022/