Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: devserver keeps reloading #3952

Closed
3 tasks done
jolting opened this issue Jan 5, 2023 · 32 comments · Fixed by #4146
Closed
3 tasks done

bug: devserver keeps reloading #3952

jolting opened this issue Jan 5, 2023 · 32 comments · Fixed by #4146
Assignees
Labels
Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team

Comments

@jolting
Copy link

jolting commented Jan 5, 2023

Prerequisites

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

@ionitron-bot ionitron-bot bot added the triage label Jan 5, 2023
@rwaskiewicz rwaskiewicz self-assigned this Jan 5, 2023
@rwaskiewicz
Copy link
Member

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

@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 5, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jan 5, 2023
@rwaskiewicz rwaskiewicz added Awaiting Reply This PR or Issue needs a reply from the original reporter. and removed Awaiting Reply This PR or Issue needs a reply from the original reporter. labels Jan 5, 2023
@jolting
Copy link
Author

jolting commented Jan 5, 2023

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).

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 5, 2023
@jolting
Copy link
Author

jolting commented Jan 5, 2023

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

@rwaskiewicz
Copy link
Member

@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!

@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 5, 2023
@jolting
Copy link
Author

jolting commented Jan 5, 2023

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.

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 5, 2023
@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 6, 2023
@janarvaez
Copy link

janarvaez commented Jan 10, 2023

I have the same issue on Mac. Just upgraded stencil to 2.21.0, and the devserver gets stuck in a loop. Downgrading to 2.20.0 also fixed the issue for me.

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 10, 2023
@rwaskiewicz
Copy link
Member

@janarvaez do you have a reproduction case that you can share? I'm currently unable to reproduce this

@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 10, 2023
@janarvaez
Copy link

@rwaskiewicz not at the moment, sorry. This is a quite big internal project. Let me see if I manage to reproduce this in any other demo project I submitted before in other tickets.

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Jan 13, 2023
@johnjenkins
Copy link
Contributor

just chiming in to say "me too" :) - Stencil 2.21.0
Running stencil with the --debug tag shows package-lock.json being touched.. Only place I could see that in in the mentioned in the stencil codebase was telemetry so turned that off - but to no avail.

I removed node_packages - re-installed and the issue went away

Screenshot 2023-01-13 at 09 24 35

@janarvaez
Copy link

janarvaez commented Jan 13, 2023

Ha! I didn't go through the --debug route cause I was fixing something in a rush, but for some reason Stencil was saying the CHANGELOG.md was changing in my case... so I added this to my stencil config and is now fixed:

watchIgnoredRegex: [
    {...}
    /.\/*\.md/,
  ],

Is it possible that Stencil is now watching in areas where it previously wasn't?
edit: the changelog wasn't really changing, so not sure why it said it was.

@jolting
Copy link
Author

jolting commented Jan 13, 2023

I'm wondering if this change is related.
microsoft/TypeScript#51626

@rwaskiewicz rwaskiewicz added the Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team label Jan 23, 2023
@knice
Copy link

knice commented Jan 27, 2023

Confirming this also happens for me. But I've narrowed it to VS Code. I can run stencil build --watch --serve in Terminal with VS Code closed and everything works as expected. When I open the project in VS Code, the constant reloading starts.

This behavior happens on my local copy of this repository.

  • macOS: Ventura, 13.1
  • Node: 18.12.1
  • Stencil: 3.0.0
  • VS Code: 1.74.3

@erwingeiger
Copy link

with older node version 14 LTS the problem is gone. It will not reloading. When using node v16 or v18 LTS the problem of reloading is back.

@rwaskiewicz
Copy link
Member

rwaskiewicz commented Jan 30, 2023

Hey folks,

At this time, we still don't have a reliable way to reproduce this issue. We're seeing this across OS, node versions, IDE's (or lack thereof). Unfortunately, that affects our ability to track the root cause of this issue down. For those that are running into this issue, can you edit your existing comment (or add a new one) with the following info:

  • npx stencil info
  • npx which stencil (does this match your project's node_modules/.bin/stencil, or a globally available one?)
  • node --version
  • npm --version
  • the command(s) you're running. if you're running an npm script (e.g. npm run start) can you please provide both the name of script and what it resolves to (i.e. the key and value pair in your package.json)
  • where you're running the command(s) from

Thanks for your help ahead of time! I know this is a particularly frustrating issue. Hopefully if we pool this info we can get a better common denominator here.

@jolting
Copy link
Author

jolting commented Jan 30, 2023

C:\Users\hlaux\GitHub\test\test-stencil>npx which stencil
C:\Users\hlaux\GitHub\test\test-stencil\node_modules\.bin\stencil.CMD

C:\Users\hlaux\GitHub\test\test-stencil>npx stencil info

      System: node 18.12.1
     Plaform: windows (10.0.22621)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz (8 cpus)
    Compiler: C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js
       Build: 20230104180331
     Stencil: 2.21.0
  TypeScript: 4.9.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.1


C:\Users\hlaux\GitHub\test\test-stencil>npx which stencil
C:\Users\hlaux\GitHub\test\test-stencil\node_modules\.bin\stencil.CMD

C:\Users\hlaux\GitHub\test\test-stencil>node --version
v18.12.1

C:\Users\hlaux\GitHub\test\test-stencil>npm --version
8.19.2

@jolting
Copy link
Author

jolting commented Jan 30, 2023

2.22.2 also exhibits the same behavior.

@jolting
Copy link
Author

jolting commented Jan 30, 2023

With --debug I get the following

[06:09.2]  @stencil/core
[06:09.4]  v2.22.2
[06:09.4]  node 18.12.1  MEM: 66.7MB
[06:09.4]  windows, 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz  MEM: 66.7MB
[06:09.4]  cpus: 8, freemem: 18136MB, totalmem: 34024MB  MEM: 66.7MB
[06:09.4]  compiler: C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js  MEM:
           66.7MB
[06:09.4]  build: 20230123155931  MEM: 66.8MB
[06:09.5]  cache enabled, cacheDir: C:/Users/hlaux/GitHub/test/test-stencil/.stencil  MEM: 70.3MB
[06:09.6]  create workers, maxWorkers: 7  MEM: 70.7MB
[06:09.6]  starting dev server ...  MEM: 70.8MB
[06:09.9]  dev server started: http://localhost:3333/ in 342 ms  MEM: 70.9MB
[06:10.0]  Starting compilation in watch mode...  MEM: 71.1MB
[06:11.6]  build, test-stencil, dev mode, started ...
[06:11.6]  start build, 2023-01-30T20:06:11  MEM: 185.8MB
[06:11.6]  [0] cleaning 4 dirs ...  MEM: 185.8MB
[06:11.6]  [0] cleaning dirs finished in 18 ms  MEM: 190.2MB
[06:11.7]  transpile started ...
[06:13.4]  Transpiled modules: [ "C:/Users/hlaux/GitHub/test/test-stencil/src/index.ts",
           "C:/Users/hlaux/GitHub/test/test-stencil/src/utils/utils.ts",
           "C:/Users/hlaux/GitHub/test/test-stencil/src/components/my-component/my-component.tsx" ]  MEM:
           250.3MB
[06:13.4]  [0] generated app types started ...  MEM: 252.0MB
[06:13.4]  [0] generated app types finished: ./src/components.d.ts in 6 ms  MEM: 251.5MB
[06:14.1]  transpile finished in 2.43 s
[06:14.1]  [0] generate outputs started ...  MEM: 289.0MB
[06:14.1]  getComponentAssetsCopyTasks: 0  MEM: 289.0MB
[06:14.1]  getComponentAssetsCopyTasks: 0  MEM: 289.0MB
[06:14.1]  copy started ...
[06:14.1]  generate lazy started ...
[06:14.1]  generateEntryModules, 1 entryModules  MEM: 289.1MB
[06:14.1]  [0] generate www started ...  MEM: 289.2MB
[06:14.1]  generateIndexHtml, write: ./www/index.html  MEM: 289.3MB
[06:14.1]  [0] generate www finished in 10 ms  MEM: 289.3MB
[06:14.1]  copy finished (0 files) in 58 ms
[06:14.7]  generate lazy finished in 590 ms
[06:14.7]  [0] generate types started ...  MEM: 302.4MB
[06:14.7]  [0] generated app types started ...  MEM: 298.4MB
[06:14.7]  [0] generated app types finished: ./dist/types/components.d.ts in 1 ms  MEM:
           298.4MB
[06:14.7]  [0] generate types finished in 7 ms  MEM: 298.4MB
[06:14.7]  [0] generate outputs finished in 602 ms  MEM: 298.4MB
[06:14.7]  [0] writeBuildFiles started ...  MEM: 298.4MB
[06:14.7]  in-memory-fs: data length: 786  MEM: 298.9MB
[06:14.7]  [0] writeBuildFiles finished, files wrote: 26 in 14 ms  MEM: 298.9MB
[06:14.7]  finished build, 3081ms  MEM: 298.9MB
[06:14.7]  build finished, watching for changes... in 3.08 s

[06:14.7]  http://localhost:3333/
[06:14.9]  File change detected. Starting incremental compilation...  MEM: 298.9MB
[06:15.0]  rebuild, test-stencil, dev mode, started ...
[06:15.0]  start build, 2023-01-30T20:06:15  MEM: 299.1MB
[06:15.0]  transpile started ...
[06:15.0]  Transpiled modules: []  MEM: 299.1MB
[06:15.0]  [1] generated app types started ...  MEM: 299.1MB
[06:15.0]  [1] generated app types finished: ./src/components.d.ts in 23 ms  MEM: 299.2MB
[06:15.0]  transpile finished in 24 ms
[06:15.0]  [1] generate outputs started ...  MEM: 299.2MB
[06:15.0]  generate lazy started ...
[06:15.0]  generateEntryModules, 1 entryModules  MEM: 299.2MB
[06:15.0]  [1] generate www started ...  MEM: 299.2MB
[06:15.0]  [1] generate www finished in 1 ms  MEM: 299.2MB
[06:15.1]  generate lazy finished in 155 ms
[06:15.1]  [1] generate types started ...  MEM: 314.9MB
[06:15.1]  [1] generated app types started ...  MEM: 314.9MB
[06:15.1]  [1] generated app types finished: ./dist/types/components.d.ts in 3 ms  MEM:
           314.9MB
[06:15.1]  [1] generate types finished in 7 ms  MEM: 314.9MB
[06:15.1]  [1] generate outputs finished in 164 ms  MEM: 314.9MB
[06:15.1]  [1] writeBuildFiles started ...  MEM: 314.9MB
[06:15.1]  in-memory-fs: data length: 786  MEM: 314.9MB
[06:15.1]  [1] writeBuildFiles finished, files wrote: 0 in 1 ms  MEM: 314.9MB
[06:15.1]  finished build, 193ms  MEM: 314.9MB
[06:15.1]  rebuild finished, watching for changes... in 195 ms

[06:15.3]  File change detected. Starting incremental compilation...  MEM: 314.9MB
[06:15.5]  rebuild, test-stencil, dev mode, started ...
[06:15.5]  start build, 2023-01-30T20:06:15  MEM: 309.8MB
[06:15.5]  transpile started ...
[06:15.5]  Transpiled modules: []  MEM: 309.8MB
[06:15.5]  [2] generated app types started ...  MEM: 309.8MB
[06:15.5]  [2] generated app types finished: ./src/components.d.ts in 25 ms  MEM: 309.8MB
[06:15.5]  transpile finished in 28 ms
[06:15.5]  [2] generate outputs started ...  MEM: 309.8MB
[06:15.5]  generate lazy started ...
[06:15.5]  generateEntryModules, 1 entryModules  MEM: 309.8MB
[06:15.5]  [2] generate www started ...  MEM: 309.8MB
[06:15.5]  [2] generate www finished in 2 ms  MEM: 309.8MB
[06:15.6]  generate lazy finished in 138 ms
[06:15.6]  [2] generate types started ...  MEM: 323.5MB
[06:15.6]  [2] generated app types started ...  MEM: 323.5MB
[06:15.6]  [2] generated app types finished: ./dist/types/components.d.ts in 2 ms  MEM:
           323.5MB
[06:15.6]  [2] generate types finished in 4 ms  MEM: 323.5MB
[06:15.6]  [2] generate outputs finished in 144 ms  MEM: 323.5MB
[06:15.6]  [2] writeBuildFiles started ...  MEM: 323.5MB
[06:15.6]  in-memory-fs: data length: 786  MEM: 323.5MB
[06:15.6]  [2] writeBuildFiles finished, files wrote: 0 in 1 ms  MEM: 323.5MB
[06:15.6]  finished build, 178ms  MEM: 323.5MB
[06:15.6]  rebuild finished, watching for changes... in 178 ms

@elclanrs
Copy link

Experiencing the same issue in 2.22.2:

⤷ npx stencil info

      System: node 16.19.0
     Plaform: darwin (21.6.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: /Users/me/Documents/my-repo/projects/stencil-web-components/node_modules/@stencil/core/compiler/stencil.js
       Build: 20230123155931
     Stencil: 2.22.2 🎈
  TypeScript: 4.9.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.1

⤷ npx which stencil
/Users/me/Documents/my-repo/projects/stencil-web-components/node_modules/.bin/stencil

⤷ node --version
v16.19.0

⤷ npm --version
8.19.3

@kswailscoil
Copy link

kswailscoil commented Feb 2, 2023

Hi,

Same issue for me just after upgrading to 3.0.0

  System: node 18.13.0
  Plaform: windows (10.0.22621)
  CPU Model: 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz (16 cpus)
  Compiler: \Users\Me\source\repos\QUOTING_DEV\node_modules\@stencil\core\compiler\stencil.js
  Build: 20230125181004
  Stencil: 3.0.0
  TypeScript: 4.9.4
  Rollup: 2.42.3
  Parse5: 7.1.2
  Sizzle: 2.42.3
  Terser: 5.16.1

Webstorm 2022.3.2 (Built Jan. 24, 2023);
node: v18.13.0
npm: v9.2.0


EDIT:
I tested npm init stencil on "PWA" and received the same error.
I tested npm init stencil on "APP" and did not receive the error.

@gavinr
Copy link

gavinr commented Feb 6, 2023

I am having this same issue. Not using VS code:


      System: node 18.12.0
     Plaform: windows (10.0.19042)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz (16 cpus)
    Compiler: C:\....\add-layer\node_modules\@stencil\core\compiler\stencil.js
       Build: 20230125181004
     Stencil: 3.0.0
  TypeScript: 4.9.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.1

image

@johnjenkins
Copy link
Contributor

johnjenkins commented Feb 14, 2023

just had this again. This time the culprit was stencil-stats.json
Fixed by adding to watchIgnoreRegex

@indianakuffer
Copy link

Hi I'm also running into this issue:

⤷ npx stencil info

System: node 16.13.2
Plaform: windows (10.0.19044)
CPU Model: Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz (8 cpus)
Compiler: C:\Users\me\Documents\my_project\node_modules\@stencil\core\compiler\stencil.js
Build: 20230125181004
Stencil: 3.0.0
TypeScript: 4.9.4
Rollup: 2.42.3
Parse5: 7.1.2
Sizzle: 2.42.3
Terser: 5.16.1

⤷ npx which stencil
C:\users\me\documents\my_project\node_modules\.bin\stencil.CMD

⤷ node --version
v16.13.2

⤷ npm --version
8.1.2

⤷ command
npm run start (stencil build --dev --watch --serve)
run with and without vscode open

@rwaskiewicz
Copy link
Member

Hey folks 👋

We're still actively looking into this, and are approaching it from a few different angles. One way folks could be of (additional) help is to install a special dev build of Stencil with additional logging statements enabled by default and reporting back to us.

We have two builds available, one for teams/projects on Stencil v2 (built on top of v2.22.2), and another for projects on Stencil v3 (built on top of v3.1.0).

How You Can Help

  1. Install one of the special dev builds below
  2. Run the dev server as such: stencil build --dev --watch --serve --verbose --debug
    1. Warning: There will be a lot of initial debug statements. Depending on your terminal/shell, you may need to increase your buffer size if the earlier statements get "swallowed"
  3. Confirm that a reloading/rebuild occurred. At this point, it's safe to stop the dev server
  4. Copy/paste the output from your terminal into a new comment on this issue

Builds

  • Stencil v2 Projects, run: npm i @stencil/core@2.22.2-dev.1678136817.b265d1c
  • Stencil v3 Projects, run: npm i @stencil/core@3.1.0-dev.1678134532.41b8f1e

Thanks!

@jolting
Copy link
Author

jolting commented Mar 7, 2023

package.json 😕
Let me know if you need more of the log. I assume this is the relevant details.

Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\babel__core\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\babel__generator\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\babel__template\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\babel__traverse\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\graceful-fs\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\istanbul-lib-coverage\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\istanbul-lib-report\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\istanbul-reports\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\jest\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\node\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\prettier\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\stack-utils\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\yargs\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\yargs-parser\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)
Trace: DEV_SERVER_DEBUG:nodeSys:setupCompiler:watchFile:callback file=C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@types\yauzl\package.json, eventType=Changed
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\sys\node\index.js:5992:14
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:123905
    at C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118416
    at Array.forEach (<anonymous>)
    at FSWatcher.<anonymous> (C:\Users\hlaux\GitHub\test\test-stencil\node_modules\@stencil\core\compiler\stencil.js:57:118388)
    at FSWatcher.emit (node:events:513:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:212:12)

@vvye
Copy link

vvye commented Mar 8, 2023

Hi there - I'm having the exact same problem (and I'm so glad I'm not the only one).

I'm on Windows 10 trying to use Stencil 3. Interestingly, the issue is present on my work laptop but not on my own PC. I can confirm this has nothing to do with the IDE, because I just set up a new project entirely from PowerShell and the issue persisted.

I installed the dev build and this is what it outputs (apparently it's stumbling over all kinds of package.jsons):
output.txt

One workaround we found is to add devServer: { reloadStrategy: null } to stencil.config.ts. I still get a blinking favicon and loading bar, but at least it doesn't constantly refresh.

Hope this helps you a little. Thanks for looking into it!

@jolting
Copy link
Author

jolting commented Mar 8, 2023

I wonder if it's a nodejs bug.

It looks like nodejs marked one of their watcher tests as flaky. Probably unrelated, but it is somewhat similar in the sense that they can't seem to reproduce it on all machines.
nodejs/node#40728

That also doesn't explain the Mac issues that some are reporting.

@rwaskiewicz
Copy link
Member

Hey folks 👋

I have two dev builds of Stencil that may fix this issue, one for Stencil v2 users, and one for Stencil v3 users. If anyone running into this particular issue could install either version (if you're on Stencil v2.X, use the first one. if you're on Stencil v3.X, use the second one) and report back as to whether that fixes the issue at hand, that be much appreciated.

  • npm i @stencil/core@2.22.2-dev.1678485833.33567aa OR
  • npm i @stencil/core@3.1.0-dev.1678485791.d8115c8

If you implemented any of the workarounds listed in this issue, please be sure to revert them as well as a part of your testing

Thanks!

@jolting
Copy link
Author

jolting commented Mar 10, 2023

Works for me.

@vvye
Copy link

vvye commented Mar 13, 2023

npm i @stencil/core@3.1.0-dev.1678485791.d8115c8

That fixed it on my end. :)

@kswailscoil
Copy link

@rwaskiewicz
your '@3.1.0-dev' solved this for me.

thank you for your efforts!

@indianakuffer
Copy link

  • npm i @stencil/core@3.1.0-dev.1678485791.d8115c8

Fixes for me as well, thanks!

@rwaskiewicz
Copy link
Member

The PR associated with this issue has landed and is included in today's v2.22.3 release and v3.2.0 release. As a result, I'm going to close this issue. Should this issue reappear, please feel free to open a new issue. Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team
Projects
None yet
Development

Successfully merging a pull request may close this issue.