Cannot find module 'puppeteer'.

[Grand-Poobah]

Stencil version:
-- @stencil/core@1.12.2

I'm submitting a:

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When the project is running (npm start) making a change causes the error. Rebuilding the code and rerunning does not show cause the error.

Expected behavior:
Component should refresh without error.

Steps to reproduce:

1. create a component (myfirstcomponent)
2. npm run build
3. npm start
4. while the code is running modify the render function

change this

return <div>Hello, World! I'm {this.getText()}</div>;

to this

  return (
      <div>
        <div>Hello, World! I'm {this.getText()}</div>
        <div>this has been added</div>
      </div>
    );

Related code:
This is the terminal output

C:\Source\Test\StencileJs\myfirstcomponent>npm start

> myfirstcomponent@0.0.1 start C:\Source\Test\StencileJs\myfirstcomponent
> stencil build --dev --watch --serve

[39:02.6]  @stencil/core v1.12.2
[39:03.5]  build, myfirstcomponent, dev mode, started ...
[39:03.5]  transpile started ...
[39:04.4]  transpile finished in 928 ms
[39:04.4]  copy started ...
[39:04.4]  generate lazy started ...
[39:04.5]  copy finished (0 files) in 25 ms
[39:04.8]  generate lazy finished in 340 ms
[39:04.8]  build finished, watching for changes... in 1.30 s

[39:04.8]  http://localhost:3333/
[39:12.4]  rebuild, myfirstcomponent, dev mode, started ...
[39:12.4]  transpile started ...
[39:12.5]  transpile finished in 125 ms

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/jest/jest-environment.d.ts:9:44
           Cannot find module 'puppeteer'.

      L8:  setup(): Promise<void>;
      L9:  newPuppeteerPage(): Promise<import("puppeteer").Page>;
     L10:  closeOpenPages(): Promise<void>;

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:3:28
           Cannot find module 'puppeteer'.

      L2:  import { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
      L3:  import * as puppeteer from 'puppeteer';
      L4:  export interface NewE2EPageOptions extends puppeteer.NavigationOptions {

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:118:64
           Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.

    L117:      _e2eClose(options?: puppeteer.PageCloseOptions): Promise<void>;
    L118:      screenshot(options?: puppeteer.ScreenshotOptions): Promise<Buffer>;
    L119:  }

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:1:23
           Cannot find type definition file for 'node'.

      L1:  /// <reference types="node" />
      L2:  import { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:3:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L3:  describe('my-component', () => {
      L4:    it('renders', async () => {

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:4:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L3:  describe('my-component', () => {
      L4:    it('renders', async () => {
      L5:      const page = await newE2EPage();

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:9:5
           Cannot find name 'expect'.

      L8:    const element = await page.find('my-component');
      L9:    expect(element).toHaveClass('hydrated');
     L10:  });

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:4:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L4:  describe('my-component', () => {
      L5:    it('renders', async () => {

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:5:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L4:  describe('my-component', () => {
      L5:    it('renders', async () => {
      L6:      const {root} = await newSpecPage({

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:10:5
           Cannot find name 'expect'.

      L9:  });
     L10:  expect(root).toEqualHtml(`
     L11:    <my-component>

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:3:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L3:  describe('format', () => {
      L4:    it('returns empty string for no names defined', () => {

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:4:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L3:  describe('format', () => {
      L4:    it('returns empty string for no names defined', () => {
      L5:      expect(format(undefined, undefined, undefined)).toEqual('');

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:5:5
           Cannot find name 'expect'.

      L4:  it('returns empty string for no names defined', () => {
      L5:    expect(format(undefined, undefined, undefined)).toEqual('');
      L6:  });

[39:12.5]  rebuild failed, watching for changes... in 133 ms

[39:12.6]  rebuild, myfirstcomponent, dev mode, started ...
[39:12.6]  transpile started ...
[39:12.6]  transpile finished in 5 ms

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/jest/jest-environment.d.ts:9:44
           Cannot find module 'puppeteer'.

      L8:  setup(): Promise<void>;
      L9:  newPuppeteerPage(): Promise<import("puppeteer").Page>;
     L10:  closeOpenPages(): Promise<void>;

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:3:28
           Cannot find module 'puppeteer'.

      L2:  import { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
      L3:  import * as puppeteer from 'puppeteer';
      L4:  export interface NewE2EPageOptions extends puppeteer.NavigationOptions {

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:118:64
           Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node`.

    L117:      _e2eClose(options?: puppeteer.PageCloseOptions): Promise<void>;
    L118:      screenshot(options?: puppeteer.ScreenshotOptions): Promise<Buffer>;
    L119:  }

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:1:23
           Cannot find type definition file for 'node'.

      L1:  /// <reference types="node" />
      L2:  import { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:3:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L3:  describe('my-component', () => {
      L4:    it('renders', async () => {

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:4:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L3:  describe('my-component', () => {
      L4:    it('renders', async () => {
      L5:      const page = await newE2EPage();

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.e2e.ts:9:5
           Cannot find name 'expect'.

      L8:    const element = await page.find('my-component');
      L9:    expect(element).toHaveClass('hydrated');
     L10:  });

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:4:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L4:  describe('my-component', () => {
      L5:    it('renders', async () => {

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:5:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L4:  describe('my-component', () => {
      L5:    it('renders', async () => {
      L6:      const {root} = await newSpecPage({

[ ERROR ]  TypeScript: ./src/components/my-component/my-component.spec.ts:10:5
           Cannot find name 'expect'.

      L9:  });
     L10:  expect(root).toEqualHtml(`
     L11:    <my-component>

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:3:1
           Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i
           @types/jest` or `npm i @types/mocha`.

      L3:  describe('format', () => {
      L4:    it('returns empty string for no names defined', () => {

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:4:3
           Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or
           `npm i @types/mocha`.

      L3:  describe('format', () => {
      L4:    it('returns empty string for no names defined', () => {
      L5:      expect(format(undefined, undefined, undefined)).toEqual('');

[ ERROR ]  TypeScript: ./src/utils/utils.spec.ts:5:5
           Cannot find name 'expect'.

      L4:  it('returns empty string for no names defined', () => {
      L5:    expect(format(undefined, undefined, undefined)).toEqual('');
      L6:  });

[39:12.6]  rebuild failed, watching for changes... in 12 ms

Other information:
I have tried installing puppeteer
breaking npm start and rerunning it does not cause the error to occur
Removing the tests stops the issue

[sentience]

Was seeing this in 1.12.2 as well. Upgrading to @stencil/core 1.14.0 fixed it for me.

[tricki]

I think I've had the same problem for ages: after npm start a rebuild sometimes (haven't found any pattern as to when exactly) includes the test files, so if there's an error in any of them (or the dependencies are missing) the whole build fails. Only restarting the build fixes it, at least for a while.

This is especially noticeable because of a bug in npm run generate that generates invalid spec tests (imports are wrong because tests are generated in a tests subfolder), see #2486.

I just updated to 1.14.0 and haven't been able to reproduce it yet.

IMHO npm start should always ignore (or perhaps always include) all test files.

@Grand-Poobah If you run npm test it should automatically install all dependencies required for the tests.

[sh78]

I had the same experience with Stencil 2.0.3 just now:

npm init stencil
# Starter == "app"
# Project name == "test"
cd test
npm i
npm start

At this point making a valid change to JSX in a render method, such as the app-home.tsx file generated by npm init, produces errors as initially reported by @Grand-Poobah .

export class AppHome {
  render() {
    return (
      <div class="app-home">
        <p>
          Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil! Check out our docs on{' '}
          <a href="https://stenciljs.com">stenciljs.com</a> to get started.
        </p>

        {/* Add empty div */}
        <div></div>

        <stencil-route-link url="/profile/stencil">
          <button>Profile page</button>
        </stencil-route-link>
        <stencil-route-link url="/profile/stencil">
          <button>Profile page</button>
        </stencil-route-link>
      </div>
    );
  }

npm test does not automatically install dependencies, but it does provide notices. Following the notices does fix the issue, but you have to run it twice to get the full story:

########################################
# Test one (ERR!)
########################################
$ npm test
> test@0.0.1 test /home/me/src/test
> stencil test --spec --e2e

[15:52.7]  @stencil/core
[15:52.9]  v2.0.3 🍮

[ ERROR ]  Please install missing dev dependencies with either npm or yarn.
           npm install --save-dev @types/jest@26.0.12 jest@26.4.2 jest-cli@26.4.2 @types/puppeteer@3.0.1
           puppeteer@5.2.1

npm ERR! Test failed.  See above for more details.


########################################
# Follow instructions
########################################
$ npm install --save-dev @types/jest@26.0.12 jest@26.4.2 jest-cli@26.4.2 @types/puppeteer@3.0.1

npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules/jest-haste-map/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ jest@26.4.2
+ jest-cli@26.4.2
+ @types/puppeteer@3.0.1
+ @types/jest@26.0.12
added 615 packages from 372 contributors and audited 620 packages in 13.001s

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

found 0 vulnerabilities

########################################
# Test two (ERR!)
########################################
$ npm test

> test@0.0.1 test /home/me/src/test
> stencil test --spec --e2e

[16:22.3]  @stencil/core
[16:22.5]  v2.0.3 🍮

[ ERROR ]  Please install missing dev dependencies with either npm or yarn.
           npm install --save-dev puppeteer@5.2.1

npm ERR! Test failed.  See above for more details.

########################################
# Follow instructions again
########################################
$ npm install --save-dev puppeteer@5.2.1

> puppeteer@5.2.1 install /home/me/src/test/node_modules/puppeteer
> node install.js

Downloading Chromium r782078 - 126.4 Mb [====================] 100% 0.0s
Chromium (782078) downloaded to /home/me/src/test/node_modules/puppeteer/.local-chromium/linux-782078
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ puppeteer@5.2.1
added 29 packages from 26 contributors and audited 649 packages in 7.933s

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

found 0 vulnerabilities

########################################
# Test three (PASS)
########################################
$ npm test

> test@0.0.1 test /home/me/src/test
> stencil test --spec --e2e

[16:46.6]  @stencil/core
[16:46.8]  v2.0.3 🍮
[16:46.9]  testing e2e and spec files
[16:48.4]  build, app, dev mode, started ...
[16:48.4]  transpile started ...
[16:50.4]  transpile finished in 1.91 s
[16:50.4]  copy started ...
[16:50.4]  generate lazy started ...
[16:50.5]  copy finished (3 files) in 186 ms
[16:51.1]  generate lazy finished in 691 ms
[16:51.1]  build finished in 2.71 s

[16:51.1]  jest args: --e2e --spec --max-workers=8
 PASS  src/components/app-profile/app-profile.spec.ts
 PASS  src/components/app-home/app-home.e2e.ts
 PASS  src/components/app-profile/app-profile.e2e.ts
 PASS  src/components/app-root/app-root.e2e.ts

Test Suites: 4 passed, 4 total
Tests:       11 passed, 11 total
Snapshots:   0 total
Time:        1.896 s
Ran all test suites.

$ 

Now updating JSX works as expected while the start task is running.

I think it seems logical that these dependencies should be present upon init of a new project. Stencil ships with example tests and the stencil CLI scaffolds components with spec and e2e files by default.

$ npm run generate my-component 
> test@0.0.1 generate /home/me/src/test
> stencil generate "my-component"

[40:01.1]  @stencil/core
[40:01.2]  v2.0.3 🍮
? Which additional files do you want to generate? ›
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   Stylesheet (.css)
◉   Spec Test  (.spec.tsx)
◉   E2E Test (.e2e.ts)

[pandevim]

Install dependencies for test.

npm install --save-dev @types/jest jest-cli jest @types/puppeteer puppeteer

[jorsema2]

I tried to change the version of stencil. It didn't work.

The only way I made it work was by stopping the project and doing "npm start" again.

In my case, I have to add that this bug only appeared when I created a new folder in src/components.

[gfellerph]

Had this same issue with @stencil/core 2.4.0. Installing dependencies for test helped temporarily as @pandevim suggested. Generating a new component with npm run generate app-new-component throws a bunch of errors:

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:3:29
           Module '"../../../../puppeteer/lib/types"' has no exported member 'NavigationOptions'.

      L2:  import type { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
      L3:  import type { ClickOptions, NavigationOptions, Page, PageCloseOptions, ScreenshotOptions as PuppeteerScreensh
      L4:  export interface NewE2EPageOptions extends NavigationOptions {

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:3:54
           Module '"../../../../puppeteer/lib/types"' has no exported member 'PageCloseOptions'.

      L2:  import type { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
      L3:  import type { ClickOptions, NavigationOptions, Page, PageCloseOptions, ScreenshotOptions as PuppeteerScreensh
      L4:  export interface NewE2EPageOptions extends NavigationOptions {

[ ERROR ]  TypeScript: ./node_modules/@stencil/core/testing/puppeteer/puppeteer-declarations.d.ts:3:121
           Module '"../../../../puppeteer/lib/types"' has no exported member 'Response'.

      L2:  import type { EventInitDict, EventSpy, ScreenshotDiff, ScreenshotOptions } from '@stencil/core/internal';
      L3:  ptions, Page, PageCloseOptions, ScreenshotOptions as PuppeteerScreenshotOptions, Response } from 'puppeteer';
      L4:  export interface NewE2EPageOptions extends NavigationOptions {

[lodybo]

I think it might be related with Puppeteer 7.0.1 and higher having the type definitions shipped with the package: https://github.com/puppeteer/puppeteer#usage-with-typescript. I had both Puppeteer (7.1.0) and @types/puppeteer (5.4.3) defined in my package.json. I removed the types definition but the errors still remain.

I then took a look at the DefinitelyTyped repository and searched for NavigationOptions, which are defined here. I then went to the Puppeteer repo and tried to look for NavigationOptions there but it's not defined. I couldn't find it on the website or in my node_modules/ folder either.

Given all this, I think the Stencil team is still importing the Puppeteer types from the DefinitelyType repo, even though that's not necessary if you use Puppeteer 7.0.1 and higher.

Workaround
For now, what seems to be working for me is downgrading to Puppeteer 6 and installing the type definitions along side it:

npm i -D puppeteer@6 @types/puppeteer

[janrembold]

Is there any update on that issue?

Still having the problem @lodybo describes above with puppeteer@8.0.0 and @stencil/core@2.5.2

Update: also with puppeteer@9.0.0

[janrembold]

As @lodybo has described, the error lies in the usage of old puppeteer versions inside @stencil/core package.
There we see "@types/puppeteer": "^5.4.3" and "puppeteer": "~5.5.0".

For example the E2EPage interface heavily depends on those "old" types so it is not as simple as just changing versions in our package.json.

The only way to fix this is a PR with upgraded puppeteer versions. I could give it a try but I'm not sure if this open Pandoras Box ;)

Are there any reasons not to update the version?

[rwaskiewicz]

I believe that this issue is resolved following the v2.7.0 release. As of v2.7.0, Stencil supports Puppeteer v10 - folks running into this issue should update Puppeteer to v10, Stencil to v2.7.0, and uninstall @types/puppeteer (Puppeteer v10 includes its own typings). I'm going to close this issue, but please feel free to open a new issue if this issue comes up again.