bug: devserver keeps reloading

[jolting]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.21.0

Current Behavior

The page loads, but looks like it's constantly reloading even though there are no changes to any of the files.

Expected Behavior

The example loads once.

System Info

OS: Windows 11
Node: v18.12.1
npm: 8.19.2
Browser: Chrome 108.0.5359.125

+-- @stencil/core@2.21.0
+-- @types/jest@27.5.2
+-- jest-cli@27.5.1
+-- jest@27.5.1
`-- puppeteer@10.4.0

Steps to Reproduce

PS C:\Users\user\GitHub\test> npm init stencil

√ Select a starter project.

Starters marked as [community] are developed by the Stencil Community,       
rather than Ionic. For more information on the Stencil Community, please see 
https://github.com/stencil-community » component                Collection of web components that can be used anywhere
√ Project name ... test-stencil
√ Confirm? ... yes
✔ All setup 🎉 in 20 ms

  We suggest that you begin by typing:

  > cd test-stencil
  > npm install
  > npm start

  You may find the following commands will be helpful:

  > npm start
    Starts the development server.

  > npm run build
    Builds your components/app in production mode.

  > npm test
    Starts the test runner.


  Further reading:

   - https://github.com/ionic-team/stencil-component-starter

  Happy coding! 🎈

PS C:\Users\user\GitHub\test> cd test-stencil
PS C:\Users\user\GitHub\test\test-stencil> npm i
PS C:\Users\user\GitHub\test\test-stencil> npm ls
test-stencil@0.0.1 C:\Users\user\GitHub\test\test-stencil
├── @stencil/core@2.21.0
├── @types/jest@27.5.2
├── jest-cli@27.5.1
├── jest@27.5.1
└── puppeteer@10.4.0

PS C:\Users\user\GitHub\test\test-stencil> npm run start

> test-stencil@0.0.1 start
> stencil build --dev --watch --serve

[23:06.5]  @stencil/core
[23:06.8]  v2.21.0
[23:09.6]  build, test-stencil, dev mode, started ...
[23:09.7]  transpile started ...
[23:12.4]  transpile finished in 2.79 s
[23:12.4]  copy started ...
[23:12.4]  generate lazy started ...
[23:12.5]  copy finished (0 files) in 51 ms
[23:13.2]  generate lazy finished in 781 ms
[23:13.3]  build finished, watching for changes... in
           3.66 s

[23:13.3]  http://localhost:3333/
[23:13.5]  rebuild, test-stencil, dev mode, started ...
[23:13.5]  transpile started ...
[23:13.5]  transpile finished in 37 ms
[23:13.5]  generate lazy started ...
[23:13.7]  generate lazy finished in 162 ms
[23:13.7]  rebuild finished, watching for changes...
           in 211 ms

[23:14.0]  rebuild, test-stencil, dev mode, started ...
[23:14.0]  transpile started ...
[23:14.0]  transpile finished in 27 ms
[23:14.0]  generate lazy started ...
[23:14.1]  generate lazy finished in 135 ms
[23:14.1]  rebuild finished, watching for changes...
           in 171 ms

[23:14.5]  rebuild, test-stencil, dev mode, started ...
[23:14.5]  transpile started ...
[23:14.5]  transpile finished in 48 ms
[23:14.5]  generate lazy started ...
[23:14.7]  generate lazy finished in 210 ms
[23:14.7]  rebuild finished, watching for changes...
           in 270 ms

The devserver keeps reloading forever, which seems strange to me. I expected it to load once unless I changed something.

Code Reproduction URL

https://github.com/jolting/stencil-test

Additional Information

No response

[rwaskiewicz]

Hey @jolting 👋

Thanks for the detailed bug report! It's super helpful when trying to narrow down the root cause of issues like this. Unfortunately, I was unable to replicate this on my Windows machine with the same versions of Node, npm and Stencil.

Can you do me a favor and see if there's anything running locally that could be updating your source/compiled code in the background? This could be a VS Code extension, a tsc/node process running Stencil in the background, etc. That would be my next guess in determining why we're seeing several reloads here

[jolting]

I closed everything except a cmd running npm run start and the chrome browser and it didn't help.
I'll see if I can drill down into stencil and figure out which file is triggering the rebuild(if any).

[jolting]

I downgraded to 2.20.0 and I didn't have an issue.

[rwaskiewicz]

@jolting can you give me a little more context of where you're running npm start from? Is this a standalone powershell window, one built into another application (e.g. an IDE like IntelliJ/VS Code), or something else? I'm hoping that a little bit more information will get me to a place where I can reproduce this myself (and root cause from there). Thanks!

[jolting]

I've tried both. I normally use VS code, but I closed it to see if that was the issue. It doesn't change the behavior.

I did try to build stencil myself, but I was running into a webpack issue. It seems webpack defaults to 'md4' which is no longer supported by ssl in my version of node.

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\Users\hlaux\GitHub\test\stencil\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\hlaux\GitHub\test\stencil\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\Users\hlaux\GitHub\test\stencil\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Users\hlaux\GitHub\test\stencil\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Users\hlaux\GitHub\test\stencil\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Users\hlaux\GitHub\test\stencil\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\hlaux\GitHub\test\stencil\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (C:\Users\hlaux\GitHub\test\stencil\node_modules\loader-runner\lib\LoaderRunner.js:205:4)

I added a hashFunction to sys-nodes.ts and rebuilt stencil on version 2.21.0 and for some reason my local build works, but when I fetch from npm it doesn't work.

diff --git a/scripts/bundles/sys-node.ts b/scripts/bundles/sys-node.ts
index b72aa92f4..b2381af1c 100644
--- a/scripts/bundles/sys-node.ts
+++ b/scripts/bundles/sys-node.ts
@@ -141,6 +141,7 @@ function bundleExternal(opts: BuildOptions, outputDir: string, cachedDir: string
           path: outputDir,
           filename: entryFileName,
           libraryTarget: 'commonjs',
+          hashFunction: 'md5',
         },
         target: 'node',
         node: {

here's my local build results.

PS C:\Users\hlaux\GitHub\test\test-stencil> npm run start

> test-stencil@0.0.1 start
> stencil build --dev --watch --serve

[37:52.3]  @stencil/core
[37:52.6]  [LOCAL DEV]
[37:55.5]  build, test-stencil, dev mode, started ...
[37:55.5]  transpile started ...
[37:58.7]  transpile finished in 3.17 s
[37:58.7]  copy started ...
[37:58.7]  generate lazy started ...
[37:58.8]  copy finished (0 files) in 72 ms
[37:59.3]  generate lazy finished in 618 ms
[37:59.4]  build finished, watching for changes... in 3.95 s

[37:59.4]  http://localhost:3333/
Terminate batch job (Y/N)? y

And when I reverted to the npm build I got the issue again.

PS C:\Users\hlaux\GitHub\test\test-stencil> npm i @stencil/core@2.21.0

changed 1 package, and audited 374 packages in 3s

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

2 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
PS C:\Users\hlaux\GitHub\test\test-stencil> npm run start

> test-stencil@0.0.1 start
> stencil build --dev --watch --serve

[40:18.8]  @stencil/core
[40:19.0]  v2.21.0
[40:21.8]  build, test-stencil, dev mode, started ...
[40:21.8]  transpile started ...
[40:24.7]  transpile finished in 2.83 s
[40:24.7]  copy started ...
[40:24.7]  generate lazy started ...
[40:24.8]  copy finished (0 files) in 94 ms
[40:25.5]  generate lazy finished in 794 ms
[40:25.5]  build finished, watching for changes... in 3.69 s

[40:25.5]  http://localhost:3333/
[40:25.7]  rebuild, test-stencil, dev mode, started ...
[40:25.7]  transpile started ...
[40:25.8]  transpile finished in 37 ms
[40:25.8]  generate lazy started ...
[40:25.9]  generate lazy finished in 148 ms
[40:25.9]  rebuild finished, watching for changes... in 196 ms

[40:26.3]  rebuild, test-stencil, dev mode, started ...
[40:26.3]  transpile started ...
[40:26.4]  transpile finished in 80 ms
[40:26.4]  generate lazy started ...
[40:26.7]  generate lazy finished in 270 ms
[40:26.7]  rebuild finished, watching for changes... in 375 ms

[40:27.0]  rebuild, test-stencil, dev mode, started ...
[40:27.0]  transpile started ...
[40:27.1]  transpile finished in 40 ms
[40:27.1]  generate lazy started ...
[40:27.3]  generate lazy finished in 206 ms
[40:27.3]  rebuild finished, watching for changes... in 259 ms

[40:27.6]  rebuild, test-stencil, dev mode, started ...
[40:27.6]  transpile started ...
[40:27.7]  transpile finished in 41 ms
[40:27.7]  generate lazy started ...
[40:27.8]  generate lazy finished in 137 ms
[40:27.8]  rebuild finished, watching for changes... in 193 ms

[40:28.2]  rebuild, test-stencil, dev mode, started ...
[40:28.2]  transpile started ...
[40:28.3]  transpile finished in 51 ms
[40:28.3]  generate lazy started ...
[40:28.4]  generate lazy finished in 191 ms
[40:28.4]  rebuild finished, watching for changes... in 252 ms

[40:28.7]  rebuild, test-stencil, dev mode, started ...
[40:28.7]  transpile started ...
[40:28.8]  transpile finished in 38 ms
[40:28.8]  generate lazy started ...
[40:28.9]  generate lazy finished in 139 ms
[40:28.9]  rebuild finished, watching for changes... in 191 ms

[40:29.3]  rebuild, test-stencil, dev mode, started ...
[40:29.3]  transpile started ...
[40:29.3]  transpile finished in 47 ms
[40:29.3]  generate lazy started ...
Terminate batch job (Y/N)? [40:29.5]  generate lazy finished in 137 ms
[40:29.5]  rebuild finished, watching for changes... in 236 ms

I guess it's possible my npm package is corrupted. I'll see if I can find another Windows machine to reproduce the issue on.