Why Karma ignores my typings.d.ts?

Question

I try to set up Karma for my React app. My stack looks like this:

• Karma
• React
• Webpack
• Typescript

For my React app I need some custom typings (src/typings.d.ts):

declare module '*.json' {
    const value: any;
    export default value;
}

//No definitions for redux-persist version 5. :(
declare module 'redux-persist';
declare module 'redux-persist/es/integration/react';
declare module 'redux-persist/es/storage';

My karma.conf.tslooks like this:

const karma = (config: any) => {
    config.set({
        basePath: '',
        browsers: ['ChromeHeadless'],
        frameworks: ['mocha'],
        files: ['test/actions/errorTests.ts'],
        preprocessors: {
            'test/actions/errorTests.ts': ['webpack']
        },

        webpack: {
            entry: ['./src/main.tsx'],

            resolve: {
                extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
            },

            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        exclude: '/node_modules/',
                        use: 'awesome-typescript-loader'
                    }, {
                        test: /\.scss$/,
                        exclude: '/node_modules/',
                        use: [{
                            loader: 'style-loader'
                        }, {
                            loader: 'typings-for-css-modules-loader',
                            options: {
                                modules: true,
                                namedExport: true,
                                sass: true
                            }
                        }, {
                            loader: 'sass-loader',
                            query: {
                                sourceMap: true
                            }
                        }]
                    }
                ]
            }
        },
        webpackMiddleware: {
            noInfo: true
        }
    });
};

export = karma;

When I run karma start --single-runI get the following output:

$ karma start --single-run

[at-loader] Using [email protected] from typescript and "tsconfig.json" from /Users/rbu0374/Development/octodent/octodent.git/client/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.721 sec.

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
Hash: 22917d06732ce0b1f6aa
Version: webpack 3.6.0
Time: 2234ms
                     Asset     Size  Chunks                    Chunk Names
                      main  1.29 MB       0  [emitted]  [big]  main
test/actions/errorTests.ts   344 kB       1  [emitted]  [big]  test/actions/errorTests.ts
   [4] ./node_modules/react/react.js 56 bytes {0} [built]
  [20] ./node_modules/react-intl/lib/index.es.js 51.2 kB {0} [built]
  [28] ./node_modules/redux/es/index.js 1.08 kB {0} [built]
  [30] ./src/constants/actions.ts 399 bytes {0} {1} [built]
  [78] ./node_modules/history/es/index.js 460 bytes {0} [built]
 [151] ./src/actions/error.ts 307 bytes {0} {1} [built]
 [154] multi ./src/main.tsx 28 bytes {0}
 [155] ./src/main.tsx 2.04 kB {0} [built]
 [310] ./node_modules/redux-persist/es/index.js 1.7 kB {0} [built]
 [316] ./node_modules/redux-persist/es/integration/react.js 3.41 kB {0} [built]
 [317] ./node_modules/redux-persist/es/storage/index.js 362 bytes {0} [built]
 [320] ./src/reducers/index.ts 471 bytes {0} [built]
 [324] ./src/containers/app/index.tsx 2.85 kB {0} [built]
 [408] ./test/actions/errorTests.ts 533 bytes {1} [built]
 [409] ./node_modules/chai/index.js 40 bytes {1} [built]
    + 417 hidden modules

ERROR in [at-loader] ./src/main.tsx:10:44 
    TS7016: Could not find a declaration file for module 'redux-persist'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist';`

ERROR in [at-loader] ./src/main.tsx:11:27 
    TS7016: Could not find a declaration file for module 'redux-persist/es/integration/react'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/es/integration/react.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist/es/integration/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/es/integration/react';`

ERROR in [at-loader] ./src/main.tsx:12:21 
    TS7016: Could not find a declaration file for module 'redux-persist/es/storage'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/es/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist/es/storage` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/es/storage';`

ERROR in [at-loader] ./src/main.tsx:16:31 
    TS2307: Cannot find module './locales/de-ch.json'.
20 09 2017 15:16:40.808:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
20 09 2017 15:16:40.810:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
20 09 2017 15:16:40.878:INFO [launcher]: Starting browser ChromeHeadless
20 09 2017 15:16:41.232:INFO [HeadlessChrome 0.0.0 ()]: Connected on socket 61TQigS-rNwcBsx1AAAA with id 15095982
HeadlessChrome 0.0.0 (): Executed 0 of 0 ERROR (0.002 secs / 0 secs)
error Command failed with exit code 1.

Does anybody has an idea why my typings file is ignored? When I bundle my app with webpack it works fine.

Thank you in advance!

Answer 1

I had the same issue with our stack that is similar to yours:

• Aurelia
• Typescript
• Webpack
• Karma

We also have a typings.d.ts within our src folder so we can load json files.

Enabling transpileOnly option for awesome-typescript-loader in our webpack.config.js worked for us.

{ test: /\.ts$/i, loader: 'awesome-typescript-loader', exclude: nodeModulesDir, options: { transpileOnly: true } },

Might be a bit late for you but might help others.