Webpacker: TypeScript loader and tests

[mockdeep]

I'm trying to figure out how best to handle Jest tests written in TypeScript, but ignore them at deploy time. If I add them to the tsconfig.json under the exclude section, TypeScript never checks them. But if I don't exclude them, then I get errors at deploy time looking for dev modules, e.g. TS2307: Cannot find module 'enzyme'. Is there a recommended way to handle this situation? I see some questions suggesting setting up different tsconfig files, but not exactly sure how that plays into the Webpacker workflow.

[Welziewagers2015]

script loader

[mockdeep]

@Welziewagers2015 can you be more specific?

[ksweetie]

I know this is old, but in case anyone is stuck on this in the future, here's what I did.

// tsconfig.json
{
  "compilerOptions": {
    // ... whatever settings you want
  },
  // ...
}

Then I added a config for production:

// tsconfig.prod.json
{
  "extends": "./tsconfig.json",
  "exclude": [
    "spec",
  ],
}

Finally, we have to tell webpacker how to find the prod file.

// config/webpack/loaders/typescript.js
const PnpWebpackPlugin = require('pnp-webpack-plugin')

const tsconfig = (process.env.NODE_ENV === 'development') ? 'tsconfig.json' : 'tsconfig.prod.json'

module.exports = {
  test: /\.(ts|tsx)?(\.erb)?$/,
  use: [
    {
      loader: 'ts-loader',
      options: PnpWebpackPlugin.tsLoaderOptions({ configFile: tsconfig })
    }
  ]
}

Hope that helps somebody out there.

[guillaumebriday]

Is this issue can be closed ?