Skip to content

Instantly share code, notes, and snippets.

@saitonakamura
Last active April 16, 2018 07:20
Show Gist options
  • Save saitonakamura/4213f493955bb4a18d8e9b37e935ef4b to your computer and use it in GitHub Desktop.
Save saitonakamura/4213f493955bb4a18d8e9b37e935ef4b to your computer and use it in GitHub Desktop.
Next.js Awesome Typescript integration: how to run typecheck in separate process
const CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;
module.exports = {
webpack(config, options) {
const { dir, defaultLoaders } = options
config.pageExtensions.push(".ts", ".tsx");
config.resolve.extensions.push(".ts", ".tsx");
// cacheDirectory option is unavailable in case of useBabel option
const fixBabelConfig = omit(defaultLoaders.babel.options, [
"cacheDirectory",
]);
config.module.rules.push({
test: /\.tsx?$/,
include: [dir],
exclude: /node_modules/,
use: [
{
loader: "awesome-typescript-loader",
options: {
useBabel: true,
babelOptions: fixBabelConfig,
useCache: true,
cacheDirectory: "node_modules/.cache/awesome-typescript-loader",
},
},
],
});
// ADDED CHECKER PLUGIN
config.plugins.push(new CheckerPlugin());
return config;
}
}
const omit = (obj, keysToOmit) =>
Object.keys(obj)
.filter(key => keysToOmit.indexOf(key) < 0)
.reduce((newObj, key) => Object.assign(newObj, { [key]: obj[key] }), {});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment