Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
withTranspileModules example
const path = require("path");
const withTypescript = require("@zeit/next-typescript");
const withCSS = require("@zeit/next-css");
const withSourceMaps = require("@zeit/next-source-maps");
const r = require("regexr");
const cssConfig = {
cssModules: false
};
const typescriptConfig = {};
const transpileModulesConfig = {
transpileModules: ["@awaitbox/window-loaded", "tiny-slider"]
};
const nextConfig = withSourceMaps(
withTranspileModules(
withTypescript(
withCSS({
...cssConfig,
...typescriptConfig,
...transpileModulesConfig,
// This is relative to src, because we run Next.js in the src folder (`next ./src`)
distDir: "../.dist"
})
)
)
);
// plugin to transpile specific node_modules packages
// See:
// - https://github.com/zeit/next.js/pull/3732
function withTranspileModules(nextConfig) {
const internalRegExps = nextConfig.transpileModules.map(m => {
if (typeof m === "string") return r`${r.escape(m)}(?!.*node_modules)`;
if (m instanceof RegExp) return m;
throw new TypeError(
"transpileModules should contain strings or RegExps only."
);
});
const externalRegExps = nextConfig.transpileModules.map(m => {
if (typeof m === "string")
return r`node_modules(?!\/${r.escape(m)}(?!.*node_modules))`;
return m;
});
let rule;
function createRule(webpackConfig, nextOptions) {
const { defaultLoaders } = nextOptions;
webpackConfig.module.rules.push(
(rule = {
test: /\.+(js|jsx|ts|tsx)$/,
loader: defaultLoaders.babel,
include: []
})
);
}
return {
...nextConfig,
webpack(config, next) {
config.resolve.symlinks = false;
// Next runs the dev config first, then the server config, so we reset rule
// here when Next switches to the server config
if (next.isServer) rule = null;
if (!rule) createRule(config, next);
rule.include = internalRegExps;
config.externals = config.externals.map(external => {
if (typeof external !== "function") return external;
return (ctx, req, cb) =>
internalRegExps.some(regex => regex.test(req))
? cb()
: external(ctx, req, cb);
});
if (typeof nextConfig.webpack === "function")
config = nextConfig.webpack(config, next);
return config;
},
webpackDevMiddleware(config) {
const ignored = [...config.watchOptions.ignored, ...externalRegExps];
config.watchOptions.ignored = ignored;
if (typeof nextConfig.webpackDevMiddleware === "function")
config = nextConfig.webpackDevMiddleware(config);
return config;
}
};
}
module.exports = nextConfig;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment