Vue 3: ERROR: Unable to load the module "typescript". Using "ts-jest" requires this package to be installed.

[kleinfreund]

Issue

I’m playing around with migrating a package to Vue 3 and upgraded a couple of its dependencies including vue-jest to v5.0.0-alpha.5. When running a small test for a JavaScript file which is importing a Vue single file component, I receive the following error from vue-jest:

ERROR: Unable to load the module "typescript". Using "ts-jest" requires this package to be installed.

Full error

Running coverage on untested files...Failed to collect coverage from /home/phil/dev/packages/vue-accessible-color-picker/src/ColorPicker.vue
ERROR: Unable to load the module "typescript". Using "ts-jest" requires this package to be installed. To fix it:
    ↳ install "typescript": `npm i -D typescript` (or `yarn add --dev typescript`)
STACK: Error: Unable to load the module "typescript". Using "ts-jest" requires this package to be installed. To fix it:
    ↳ install "typescript": `npm i -D typescript` (or `yarn add --dev typescript`)
    at Importer._import (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/util/importer.js:143:15)
    at Importer.typescript (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/util/importer.js:74:21)
    at ConfigSet.get (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/config/config-set.js:384:40)
    at ConfigSet.compilerModule (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/util/memoize.js:43:24)
    at ConfigSet.readTsConfig (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/config/config-set.js:625:23)
    at ConfigSet.get (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/config/config-set.js:313:31)
    at ConfigSet._typescript (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/util/memoize.js:43:24)
    at ConfigSet.get [as typescript] (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/ts-jest/dist/config/config-set.js:283:25)
    at getTsJestConfig (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/vue-jest/lib/utils.js:71:30)
    at processTemplate (/home/phil/dev/packages/vue-accessible-color-picker/node_modules/vue-jest/lib/process.js:72:20)

It seems that some part of the code is requiring the ts-jest package which I don’t have installed because my package is not using TypeScript. It seems that some part of the code is requiring the typescript via the ts-jest package which is installed as part of the vue-jest package. However, my project doesn’t use TypeScript at all. I suspect the issue starts happening in https://github.com/vuejs/vue-jest/blob/next/lib/process.js (in particular around https://github.com/vuejs/vue-jest/blob/next/lib/process.js#L63-L72). Logging { tsconfig } after the line containing const tsconfig = getTsJestConfig(config) does not log anything. The utils function for retrieving the jest configuration for TypeScript in https://github.com/vuejs/vue-jest/blob/next/lib/utils.js#L69 seems to be returning a configSet variable missing the properties that being used on the next line.

Reproduction

(This isn’t exactly a minimal reproduction case, but I believe the issue is largely independent from how my package is structured or written.)

1. Clone package.

   git clone https://github.com/kleinfreund/vue-accessible-color-picker.git
   

2. Enter package.

   cd vue-accessible-color-picker
   

3. Check out migrate-to-vue-version-3 branch.

   git checkout migrate-to-vue-version-3
   

4. Install dependencies

   npm install
   

5. Run the test for the index.js file.

   npm test -- ./src/index.test.js
   

6. (Optional) Install typescript and re-run the test in step 5 to see the issue fixed.

   npm install --save-dev typescript
   

Notes

• Related pull request removing a depenency on the typescript package: Gate typescript behind tsconfig check and added e2e test for project that doesn't use Typescript (Fix #282) #283
• After installing TypeScript (using npm install --save-dev typescript) and replacing import Vue from 'vue' with import * as Vue from 'vue' (for some reason, Vue evaluates to undefined otherwise), the script npm test -- ./src/index.test.js passes with expected warnings.
• After disabling the coverage settings in the jest.config.js file (i.e. removing collectCoverage and collectCoverageFrom settings), the script npm test -- ./src/index.test.js passes with expected warnings.

[kleinfreund]

I’m lost. I somehow managed to get rid of this error, but I don’t know what I did. :( I do recall that in-between debugging attempts, I went for a hail-marry rm -rf node_modules. I think I will close this issue some time today as I can’t seem to be able to get the reproduction steps to reproduce. 😅

[jobegrabber]

@kleinfreund Did you manage to figure out the root cause of this issue?
I'm running into this at the moment with 5.0.0-alpha.5 and the only way to resolve the issue is to install the typescript package.

I did remove node_modules multiple times and re-install packages, but unfortunately the error persists..

[kleinfreund]

@jobegrabber Unfortunately no. In fact, the error resurfaced and I could only get it to work by re-installed typescript. I’ll clean up my reproduction branch and re-open this ticket.

[jobegrabber]

@kleinfreund Thanks for responding! Looks like ts-jest did become a hard dependency as per #284 ..

[lmiller1990]

I don't think #284 is the actual root cause of this. I could be wrong

We should remove this dependency somehow, people should not need to install TS if they are not using it. Somewhere there must be a line that does require('typescript') even when you are not using it. Maybe this somehow?

vue-jest/lib/process.js

Line 105 in 3706e5d

const { transpileModule } = require('typescript')

Although OP said this is not the case.

The way I'd debug this is make a new project without TS, go into node_modules/vue-jest/lib/process.js (probably) and drop console.log until you figure out how where TS is incorrectly required. Then move that require to a location that only executes when the TS is getting compiled.

I can try looking into this soon.

[boboldehampsink]

This issue is fixed by #302

[lmiller1990]

Thanks @boboldehampsink, left a command, keen to get this one out in the wild.

[lmiller1990]

Is this still an issue? There is an outstanding PR (#302) however when I pull the example repo here, checkout said branch, it works fine out of the box - no errors. I also did npm uninstall typescript ts-jest and it still worked fine.

[lmiller1990]

Edit, I reproduced it.

[lmiller1990]

@boboldehampsink and @kleinfreund thanks for your patience/help.

There is a PR (#302) which works, but requires the user to specify false in the vue-jest config. I think this is a better solution: #307

Please review and let me know what you think. I have tested this with the repo above and it worked.

[kleinfreund]

@lmiller1990 My bad. I must’ve updated my branch after including the typescript package for testing purposes which acts as a workaround. I removed the dependency again so that the reproduction steps work again. I looked at #307 and its changes do make sense to me. 👍

[kleinfreund]

This was fixed in #307 and released in vue-jest@5.0.0-alpha.8 so I’m closing this issue.