Next.js plugin to transpile code from node_modules (supports TypeScript). 

Next.js plugin to transpile code from node_modules (supports TypeScript)

jamesgorrie

@weco/next-plugin-transpile-modules

const PATH_DELIMITER = '[\\\\/]'; // match 2 antislashes or one slash

 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions

  return (x instanceof RegExp) && (y instanceof RegExp) &&

    (x.source === y.source) && (x.global === y.global) &&

    (x.ignoreCase === y.ignoreCase) && (x.multiline === y.multiline);

  return modules.map(module => (new RegExp(`${safePath(module)}(?!.*node_modules)`)));

  return [new RegExp(`node_modules${PATH_DELIMITER}(?!(${modules.map(safePath).join('|')})(?!.*node_modules))`)];

 * On Windows, the Regex won't match as Webpack tries to resolve the

 * paths of the modules. So we need to check for \\ and /

const safePath = (module) => module.split('/').join(PATH_DELIMITER);

  const { transpileModules = [] } = nextConfig;

  const includes = generateIncludes(transpileModules);

  const excludes = generateExcludes(transpileModules);

          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'

      // Avoid Webpack to resolve transpiled modules path to their real path

      config.externals = config.externals.map(external => {

        if (typeof external !== 'function') return external;

          return includes.find(include =>

              ? include.test(path.resolve(ctx, req))

      if(Array.isArray(config.externals)) {

        config.externals = config.externals.map(external => {

          if (typeof external !== 'function') return external;

            return includes.find(include =>

                ? include.test(path.resolve(ctx, req))

      // Add a rule to include and parse all modules

        loader: options.defaultLoaders.babel,

      if (typeof nextConfig.webpack === 'function') {

        return nextConfig.webpack(config, options);

    // webpackDevMiddleware needs to be told to watch the changes in the

      // Replace /node_modules/ by the new exclude RegExp (including the modules

      // that are going to be transpiled)

      // https://github.com/zeit/next.js/blob/815f2e91386a0cd046c63cbec06e4666cff85971/packages/next/server/hot-reloader.js#L335

      const ignored = config.watchOptions.ignored.filter(

        regexp => !regexEqual(regexp, /[\\/]node_modules[\\/]/)

      config.watchOptions.ignored = ignored;

      if (typeof nextConfig.webpackDevMiddleware === 'function') {

        return nextConfig.webpackDevMiddleware(config);

  "name": "@weco/next-plugin-transpile-modules",

  "author": "Wellcome Collection <digital@wellcomecollection.org>",

  "description": "Next.js plugin to transpile code from node_modules (supports TypeScript)",

    "url": "git+https://github.com/wellcometrust/next-plugin-transpile-modules.git"

    "url": "https://github.com/wellcometrust/next-plugin-transpile-modules/issues"

  "homepage": "https://github.com/wellcometrust/next-plugin-transpile-modules#readme",

    "eslint-config-semistandard": "13.0.0",

Transpile untranspiled modules from `node_modules`.

Makes it easy to have local libraries and keep a slick, manageable dev experience.

npm install --save @weco/next--plugin-transpile-modules

npm install --save @weco/next-plugin-transpile-modules

yarn add @weco/next--plugin-transpile-modules

yarn add @weco/next-plugin-transpile-modules

const withTM = require('@weco/next-plugin-transpile-modules');

  transpileModules: ['somemodule', 'and-another']

**note:** please declare `withTM` as your last plugin (the "most nested" one).

const withTypescript = require('@zeit/next-typescript');

    transpileModules: ['somemodule', 'and-another']

const withPlugins = require('next-compose-plugins');

    transpileModules: ['some-module', 'and-another'],

### I have trouble making it work with Next.js 7

Next.js 7 introduced Webpack 4 and Babel 7, [which changed a couple of things](https://github.com/zeit/next.js/issues/5393#issuecomment-458517433), especially for TypeScript and Flow plugins.

If you have a transpilation error when loading a page, check that your `babel.config.js` is up to date and valid, [you may have forgotten a preset](https://github.com/martpie/next-transpile-modules/issues/1#issuecomment-427749256) there.

### I have trouble with transpilation and Yarn workspaces

If you get a transpilation error when using Yarn workspaces, make sure you are using a `babel.config.js` and not a `.babelrc`. The former is a project-wide Babel configuration, when the latter works for relative paths only (and won't work as Yarn install dependencies in a parent directory).

### I have trouble with Yarn and hot reloading

If you add a local library (let's say with `yarn add ../some-shared-module`), Yarn will copy those files by default, instead of symlinking them. So your changes to the initial folder won't be copied to your Next.js `node_modules` directory.

You can go back to `npm`, or use Yarn workspaces. See [an example](https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces) in the official Next.js repo.

### I have trouble making it work with Lerna

Lerna's purpose is to publish different packages from a monorepo, **it does not help for and does not intend to help local development with local modules**.

This is not coming from me, but [from Lerna's maintainer](https://github.com/lerna/lerna/issues/1243#issuecomment-401396850).

So you are probably [using it wrong](https://github.com/martpie/next-transpile-modules/issues/5#issuecomment-441501107), and I advice you to use `npm` or Yarn workspaces instead.

### But... I really need to make it work with Lerna!

You may need to tell your Webpack configuration how to properly resolve your scoped packages, as they won't be installed in your Next.js directory, but the root of your Lerna setup.

const withTM = require('@weco/next--plugin-transpile-modules');

  transpileModules: ['@your-project/shared', '@your-project/styleguide'],

      // Will make webpack look for these modules in parent directories

      '@your-project/shared': require.resolve('@your-project/shared'),

      '@your-project/styleguide': require.resolve('@your-project/styleguide'),

		@@ -48,14 +48,16 @@ const path = require('path');

		config.externals = config.externals.map(external => {
		if (typeof external !== 'function') return external;
		return (ctx, req, cb) => {
		return includes.find(include =>
		req.startsWith('.')
		? include.test(path.resolve(ctx, req))
		: include.test(req)
		)
		? cb()
		: external(ctx, req, cb);
		};
		});
		if(Array.isArray(config.externals)) {
		config.externals = config.externals.map(external => {
		if (typeof external !== 'function') return external;
		return (ctx, req, cb) => {
		return includes.find(include =>
		req.startsWith('.')
		? include.test(path.resolve(ctx, req))
		: include.test(req)
		)
		? cb()
		: external(ctx, req, cb);
		};
		});
		}

		@@ -62,0 +64,0 @@ // Add a rule to include and parse all modules

		{
		"name": "@weco/next-plugin-transpile-modules",
		"version": "2.2.0",
		"version": "2.2.1",
		"main": "index.js",
		@@ -5,0 +5,0 @@ "license": "MIT",

		@@ -16,3 +16,3 @@ # Next.js + Transpile `node_modules`
		```
		npm install --save @weco/next--plugin-transpile-modules
		npm install --save @weco/next-plugin-transpile-modules
		```
		@@ -23,3 +23,3 @@
		```
		yarn add @weco/next--plugin-transpile-modules
		yarn add @weco/next-plugin-transpile-modules
		```
		@@ -26,0 +26,0 @@

Improved metrics