Ts-loader: jest issue - read to end of issue; perhaps related to `resolveTypeReferenceDirectives` addition?

[xiaoouLi]

Expected Behaviour

Build Successfully with no error

Actual Behaviour

I'm working with webpack + typescript + gulp, and loading .ts and .tsx files with ts-loader.
For most of the time, everything works fine.
But build RANDOMLY failed on ts2304 error or ts2345.
I found out that if I don't install types/jest (ts2304: cannot find describe ...etc.) and types/es6-shim (ts2345: something caused by promise I guess), I can always create the exact same build failure.

I added logs for npm install and ensured that the two types packages are installed successfully when build fails on this error.

So now I guess, it's probably caused by typescript not picking up those two typings? Or some ts-loader related issue?

Steps to Reproduce the Problem

I don't actually know how to reproduce it.

I already investigated on it for a month.... Really want to know what is happening here....

Many thanks!!!
Lois

[xiaoouLi]

Anyone can take a look?

[johnnyreilly]

I don't think anyone can as you haven't provided a minimal reproduction repo ...

[xiaoouLi]

Sorry about that..

here is my package list in package.json file.

  "devDependencies": {
    "@babel/preset-env": "7.0.0-beta.54",
    "@types/aphrodite": "0.5.12",
    "@types/codemirror": "0.0.60",
    "@types/es6-shim": "0.31.37",
    "@types/invariant": "2.2.29",
    "@types/jest": "23.3.2",
    "@types/lodash": "4.14.116",
    "@types/prop-types": "15.5.5",
    "@types/react": "16.4.14",
    "@types/react-addons-css-transition-group": "15.0.5",
    "@types/react-bootstrap": "0.32.14",
    "@types/react-dom": "16.0.3",
    "@types/react-modal": "3.2.1",
    "@types/react-motion": "0.0.27",
    "@types/react-redux": "6.0.9",
    "@types/sinon": "^4.3.3",
    "autoprefixer": "6.7.7",
    "awesome-typescript-loader": "4.0.0",
    "babel-core": "6.24.1",
    "babel-helper-builder-react-jsx": "6.24.1",
    "babel-jest": "23.6.0",
    "babel-loader": "7.0.0",
    "babel-plugin-add-module-exports": "1.0.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "babel-preset-stage-2": "6.24.1",
    "babel-register": "6.24.1",
    "cheerio": "0.22.0",
    "clean-webpack-plugin": "0.1.16",
    "commander": "2.9.0",
    "css-loader": "0.28.1",
    "enzyme": "2.8.2",
    "enzyme-adapter-react-16": "1.5.0",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "gulp": "3.9.1",
    "gulp-hashsum": "1.2.0",
    "gulp-header": "1.8.8",
    "gulp-plumber": "1.1.0",
    "gulp-print": "5.0.0",
    "gulp-replace": "0.6.1",
    "gulp-watch": "4.3.11",
    "identity-obj-proxy": "3.0.0",
    "ignore-styles": "5.0.1",
    "jest": "23.6.0",
    "jest-css-modules-transform": "2.0.3",
    "jsdom": "10.1.0",
    "json-loader": "0.5.4",
    "merge-stream": "1.0.1",
    "node-sass": "4.9.3",
    "postcss-loader": "1.3.3",
    "postcss-sorting": "2.0.1",
    "progress-bar-webpack-plugin": "1.10.0",
    "raw-loader": "0.5.1",
    "react-addons-perf": "15.4.2",
    "react-addons-test-utils": "15.5.1",
    "react-test-renderer": "16.5.2",
    "sass-loader": "6.0.3",
    "sinon": "^6.1.5",
    "style-loader": "0.17.0",
    "ts-jest": "23.10.3",
    "ts-loader": "3.5.0",
    "typescript": "2.8.4",
    "url-loader": "0.5.8",
    "webpack": "2.4.1",
    "webpack-merge": "4.1.0",
    "webpack-stream": "3.2.0",
    "worker-loader": "1.1.0"
  },
  "dependencies": {
    "@snowflake/snovi": "1.1.5",
    "aphrodite": "1.2.1",
    "bignumber.js": "4.0.2",
    "bluebird": "3.5.0",
    "bowser": "1.9.3",
    "catalog": "3.4.0",
    "classnames": "2.2.5",
    "codemirror": "5.33.1-display-fix",
    "core-js": "2.5.5",
    "create-react-class": "15.5.2",
    "d3": "3.5.17",
    "d3-tip": "^0.6.8",
    "dagre-d3": "0.4.17",
    "es6-promise": "4.2.4",
    "file-saver": "1.3.3",
    "fixed-data-table-2": "0.8.13-perf-fix-doubleclick-column-resizer.1",
    "invariant": "2.2.2",
    "keycode": "2.1.9",
    "lodash": "4.17.10",
    "moment": "2.22.1",
    "moment-duration-format": "1.3.0",
    "moment-timezone": "0.5.13",
    "numeral": "2.0.6",
    "pluralize": "7.0.0",
    "prop-types": "15.5.8",
    "punycode": "1.4.1",
    "re-resizable": "4.5.0",
    "react": "16.4.1",
    "react-addons-shallow-compare": "15.5.2",
    "react-bootstrap": "0.31.0",
    "react-copy-to-clipboard": "5.0.1",
    "react-date-picker": "6.13.0",
    "react-dom": "16.4.2",
    "react-dom-factories": "1.0.2",
    "react-draggable": "2.2.6",
    "react-fontawesome": "1.6.1",
    "react-inlinesvg": "0.8.1",
    "react-modal": "3.5.1",
    "react-motion": "0.5.2",
    "react-overlays": "0.8.3",
    "react-phone-number-input": "0.11.0",
    "react-portal": "4.1.2",
    "react-redux": "5.0.7",
    "react-selectize": "3.0.1-tether-fix-8",
    "react-split-pane": "0.1.84",
    "react-tooltip": "3.6.1",
    "react-transition-group": "1.2.1",
    "redux": "3.7.2",
    "redux-devtools-extension": "2.13.2",
    "redux-thunk": "2.2.0",
    "sonic.js": "0.2.1",
    "ts-events": "3.2.0",
    "uuid": "3.0.1",
    "whatwg-fetch": "3.0.0"
  },

Here is my webpack.config.js

module.exports = {
  entry: {
    entry1: './src/index.jsx',
    entry2: './entry2/index.jsx',
    vendor: vendorList,
    entry2Vendor: entry2VendorList
  },
  output: {
    filename: '[name].min.js'
  },
  stats: {
    children: false
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        compact: false
      }
    },{
      test: /\.ts(x?)$/,
      loader: 'ts-loader'
    }, {
      test: /\.json/,
      loader: 'json-loader'
    }, {
      test: /.css$/,
      include: /node_modules/,
      loader: ExtractTextPlugin.extract({
        use: 'css-loader',
        fallback: 'style-loader'
      })
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        use: [{
          loader: 'css-loader',
          query: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }, {
          loader: 'postcss-loader',
          query: {
            plugins: []
          }
        }, {
          loader: 'sass-loader'
        }],
        fallback: 'style-loader'
      })
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
          loader: 'css-loader',
          query: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }, {
          loader: 'postcss-loader',
          query: {
            plugins: []
          }
        }]
      })
    }, {
      test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
      loader: 'url-loader?limit=1000000',
      // TODO: review
      exclude: /resources\/images\/tab-bar/
    }, {
      test: /\.svg$/,
      loader: 'raw-loader',
      include: /resources\/images\/tab-bar/
    }, {
      test: /\.worker\.js$/,
      loader: 'worker-loader'
    }]
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve('./resources/'),
      path.resolve('./src/'),
      path.resolve('./style/')
    ],
    extensions: ['.js', '.jsx', '.scss', '.ts', '.tsx'],
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['entry2Vendor', 'vendor'],
      filename: 'entry1.[name].min.js',
      minChunks: Infinity
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new ExtractTextPlugin({
      filename: '[name].min.css',
      allChunks: true
    }),
    new CleanWebpackPlugin(['dist'], {
      verbose: true
    })
  ],
  externals: {
    "dagre-d3": 'dagreD3'
  }
};

Here is my tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es5",
    "noImplicitAny": false,
    "noErrorTruncation": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "pretty": true,
    "baseUrl": "./src",
    "typeRoots": [
      "./node_modules/@types", "./types"
    ],
    "lib": ["DOM", "ES5", "ScriptHost", "ES6", "ES2017"],
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "dist",
    "src/util/something_interval/node_modules"
  ]
}

Thanks!!!

[lemoustachiste]

I am experiencing a similar issue with a recent upgrade from 5.3.3 to 5.4.3.

As I build my project, I receive errors such as:

ERROR in /Users/moustachiste/work/frontend/public/tests/utils/url.test.ts
[tsl] ERROR in  /Users/moustachiste/work/frontend/public/tests/utils/url.test.ts(52,7)
      TS2582: 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`.

ERROR in  /Users/moustachiste/work/frontend/public/tests/utils/url.test.ts
[tsl] ERROR in  /Users/moustachiste/work/frontend/public/tests/utils/url.test.ts(61,9)
      TS2304: Cannot find name 'expect'.

I had no issue previously.

This is my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "target": "es6",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "module": "commonjs",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "compileOnSave": false,
  "exclude": [
    "node_modules",
    "tests"
  ]
}

It seems to ignore the excluded folder tests. I have upgraded @types/[email protected], [email protected], [email protected], [email protected], to no avail.

If I exclude **/*.test.ts, it stops failing on those files (properly excludes I assume), but then I have a couple of other typescript files that fail under the tests folder, ie:

ERROR in /Users/moustachiste/work/frontend/tests/jest-framework.config.ts
[tsl] ERROR in /Users/moustachiste/work/frontend/tests/jest-framework.config.ts(10,1)
      TS2304: Cannot find name 'jest'.

A bit at a loss here.

EDIT: I guess I could try and hammer it to silence, but I think it'd be better to properly fix this problem.

EDIT2:
I changed the exclude property in tsconfig

"exclude": [
    "node_modules",
    "**/*.test.ts",
    "tests"
  ]

And while that silenced the error from jest-framework.config.ts above, this file still fails 🤔:

ERROR in /Users/moustachiste/work/frontend/public/tests/test__helpers/locationMock.ts
[tsl] ERROR in /Users/moustachiste/work/frontend/public/tests/test__helpers/locationMock.ts(25,3)
      TS2304: Cannot find name 'afterEach'.

[hbroer]

I have a similar problem after updating from 5.3.3 to 5.4.4 (5.4.3 has same problem):

"TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try npm i @types/jest or npm i @types/mocha."

I use jest, and jest itself runs fine. Webpack build fails. Downgrading only the ts-loader to 5.3.3 is my current workaround. My configs:

webpack.config.js:

            {
                test: /\.(tsx|ts)$/,
                loaders: [
                    "babel-loader",
                    "ts-loader",
                ],
            },

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "baseUrl": "src",
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "exclude": [
    "./node_modules"
  ]
}

Edit: I took a look at the sources and the history. It seems like the PnP feature is the reason. But i can not see what happens there: ea2fcf925ec158d0a536d1e766adfec6567f5fb4

Edit2: Link to the merge request is #921

[johnnyreilly]

I would lay good money that this comes down to the addition of resolveTypeReferenceDirectives to the servicesHost.ts:

https://github.com/TypeStrong/ts-loader/pull/921/files#diff-70b0dbb6219cb6164e67ffb54a8f23c0R157

If someone could take a look at this and advise if there's a genuine problem with the way this is implemented that would be helpful.

It's difficult to take this further at the moment as we don't have a minimal reproduction repo to work with. Some assistance would be greatly appreciated; I'm fairly snowed right now ❤️

[craigsumner]

Ran into the same problem today, upgrading from 5.3.3 to 5.4.4.
Specifically, errors around failing to find types for jest test functions.

[xiaoouLi]

One thing to notice is that it happens RANDOMLY and very rarely...

[tjaskula]

Upgraded today from 5.3.3 to 6.0.0 and I have those problems too:

 [tsl] ERROR in common.test.ts(57,3)
          TS2582: Cannot find name 'it'. Do you need to install type definitions for a te

st runner? Try `npm i @types/jest` or `npm i @types/mocha`  and then add `jest` or `mocha

` to the types field in your tsconfig.

Adding jest to types filed in tsconfig changes nothing.

[KnisterPeter]

@johnnyreilly Here is a minimal testcase. It failes if you run yarn webpack-dev-server

KnisterPeter/ts-loader-minimal-jest-failure

[mijay]

I found a ~beautiful~ workaround. Just add the following to your ts-loader options:

resolveTypeReferenceDirective: function(directive, containingFile, compilerOptions, moduleResolutionHost, original) {
  return directive === "jest"
    ? { resolvedTypeReferenceDirective: { resolvedFileName: path.join(__dirname, "node_modules/@types/jest/index.d.ts") } }
    : original(directive, containingFile, compilerOptions, moduleResolutionHost);
}

[johnnyreilly]

Thanks for sharing the workaround @mijay

If someone else could take a look at this I'd appreciate it - I'm fairly busy right now.

Given the workaround just shared I suspect that any fix (should one be required) be applied to makeResolveTypeReferenceDirectives:

https://github.com/TypeStrong/ts-loader/blob/cc7b2b18fb30bb6b3a6b0e17fb2f2ee95ca55ac6/src/servicesHost.ts#L506

I'd suggest debugging the resolveTypeReferenceDirectives could very much inform what we want to do here. Thanks to @andrewbranch there's some good instructions on debugging here: https://github.com/TypeStrong/ts-loader/blob/master/CONTRIBUTING.md#debugging

Though you may well be able to get what you need using console.log too 😁

However I haven't looked into this and others may know more than me 😄

As ever: PRs are welcome ❤️

[andrewbranch]

This is fixed in v6.0.1, which is building and publishing now.

[johnnyreilly]

Awesome work @andrewbranch!

[lemoustachiste]

Thanks to people involved