Sp-dev-docs: SPFx 1.8 and TypeScript 3.3 - Cannot find module 'typescript' error

[coreyroth]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

I expect gulp serve to run without returning any errors.

Observed Behavior

When trying to use TypeScript 3.3 with SPFx 1.8, I get an error when running gulp serve.

[16:10:26] Error - [tslint] Error: Cannot find module 'typescript'
[16:10:26] Error - 'tslint' sub task errored after 821 ms
Cannot find module 'typescript'
[16:10:26] Starting subtask 'tsc'...
[16:10:26] Error - [tsc] Error: Cannot find module 'typescript'
[16:10:26] Error - 'tsc' sub task errored after 2.67 ms
Cannot find module 'typescript'

Steps to Reproduce

Change rush-stack-compiler to 3.3 in package.json:
"@microsoft/rush-stack-compiler-3.3": "0.1.7",

Change extends line in tsconfig.json to the following:
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",

Run nom install.

Run gulp serve, and not the errors.

Submission Guidelines

I can get TypeScript 3.0 to work but I can't get 3.3 to work. I have attached a link to my repo as an example. I also get this error with TypeScript 3.2 as well although I have heard that works for others.

GitHub Repo

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[coreyroth]

I also saw in the release notes where previous versions may work. I am using the version of rush (0.1.7) that the release notes says should work for 3.3 though. I did get 3.2 to work by going back to version 0.2.3.

[patmill]

Does using 0.1.6 produce the same error? Also - does this happen with a brand new yeoman generated solution updating just the rush-stack-compiler and tsconfig? And do you have anything non-standard in your .npmrc file? As an aside - I've tried this with no .npmrc file, created a new yeoman solution (webpart, no framework), updated the compiler and tsconfig file, npm install, build. It is working without a problem. Trying to figure out what is different.

[coreyroth]

This is actually a brand new machine so I haven't touched .npmrc at all yet. I do use nvm though to switch between node v8 and v10. I just tested and switching to version 0.1.6 actually does work. The behavior with 0.1.7 occurs in all brand new solutions (no upgrade).

[estruyf]

You could also solve the TypeScript module issue by installing the TypeScript dependency in your project. Be sure to use the matching version which you used for the rush-stack-compiler version.

[mahmoudkhader]

Changing to 1.6 also worked for me. Thank you! We'll see what other fun errors pop up later

[estruyf]

Just test it out, when you create a project without installing the dependencies yo @microsoft/sharepoint ---skip-install. Modifying the rush dependency + tsconfig after the project creation and then start the installing dependency installation npm i. It will also work and you could use the latest dependency version.

[frevds]

While switching between 2.7 and 3.3 I noticed that the module typescript error happens every FIRST time after calling npm install. To fix it, I switch to a slightly older version of the rush-stack-compiler-x.y package (e.g. 0.5.6 and 0.5.13 for the 2.7 package, or 0.1.11 and 0.1.4 for the 3.3 package), then rerun npm install (and also close VSC and gulp clean just for any case, helps with shipping) and the issue disappears. I have to TOGGLE between two versions no matter which, because next time the version that worked produces the error. This is rather strange and I don't understand what causes the problem, but it seems the npm install needs to run twice for some dependency, otherwise the ts-lint step in the build system fails when it does not find its typescript module.

[forsythesdevteam]

All of our developers that had this issue had a global version of typescript installed, we uninstalled the global and npm i to get typescript installed as a project dependency.

[frevds]

Ah, good to know, thanks @forsythesdevteam. I indeed have it installed globally too. That makes it a lot easier then to fix.

[patmill]

Thanks for all the insight. I'll pass it along.

[d-martins]

I'm also seeing this issue on my machine, and it seems to be related with our registry in the .npmrc file.

Steps to Reproduce

• Create a new project using the yeoman generator (with skip install flag enabled)
• Add a .npmrc file pointing to our azure artifacts feed
• Add internal dependencies
• run npm install
• run gulp serve --nobrowser
• observe error in console

If I do all these steps but without using the skip install flag, the project will compile without issues

[sudharsank]

I have managed to run SPFx version 1.8 with typescript 3.3. Following are the steps done

• Used "@microsoft/rush-stack-compiler-3.3": "0.1.7" in package.json file
• "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json" in tsconfig.json file.
• "extends": "@microsoft/sp-tslint-rules/base-tslint.json" in tslint.json file.

[halfice]

@sudharsank work for me, after this i rand npm install

[weshackett]

The thing that seems to be 100% of a fix is to do all the steps from the Office 365 CLI upgrade report, delete the node modules folder, then npm install. then gulp build will fail. So then do npm i gulp and refresh your gulp and it all works from then on