Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
next-transpile-modules
Advanced tools
Next.js plugin to transpile code from node_modules (supports TypeScript)
The next-transpile-modules package is a Next.js plugin that allows you to transpile code from node_modules. This is particularly useful when you are using third-party packages that are not pre-transpiled to ES5/ES6, or when you want to customize the build process for specific modules.
Transpile specific modules
This feature allows you to specify which modules from node_modules should be transpiled. This is useful for ensuring compatibility with older browsers or customizing the build process for specific modules.
const withTM = require('next-transpile-modules')(['some-module', 'and-another']);
module.exports = withTM({
// Your Next.js config
});
Custom Babel configuration
You can customize the Babel configuration for the transpiled modules. This allows you to add specific Babel plugins or presets that are required for your project.
const withTM = require('next-transpile-modules')(['some-module']);
module.exports = withTM({
babel: {
presets: ['next/babel'],
plugins: ['styled-components']
}
});
Support for monorepos
The package supports monorepos by allowing you to transpile packages from a monorepo setup. This is useful for large projects that are split into multiple packages.
const withTM = require('next-transpile-modules')(['@my-scope/my-package']);
module.exports = withTM({
// Your Next.js config
});
babel-plugin-module-resolver is a Babel plugin that allows you to customize the resolution of modules. It can be used to alias module paths, making it easier to manage imports in large projects. Unlike next-transpile-modules, it does not specifically target Next.js or handle transpilation of node_modules.
next-compose-plugins is a utility for composing multiple Next.js plugins into a single configuration. While it does not specifically handle transpilation of node_modules, it can be used in conjunction with next-transpile-modules to manage complex Next.js configurations.
babel-plugin-transform-require-ignore is a Babel plugin that allows you to ignore specific modules during the build process. This can be useful for excluding non-JavaScript files or modules that should not be transpiled. It is more limited in scope compared to next-transpile-modules, which focuses on transpiling specific modules.
node_modules
Transpile untranspiled modules from node_modules
.
Makes it easy to have local libraries and keep a slick, manageable dev experience.
Next.js version | Plugin version |
---|---|
Next.js 8 | 2.x |
Next.js 6 / 7 | 1.x |
npm install --save next-transpile-modules
or
yarn add next-transpile-modules
Classic:
// next.config.js
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['somemodule', 'and-another']
});
note: please declare withTM
as your last plugin (the "most nested" one).
With next-typescript
:
const withTypescript = require('@zeit/next-typescript');
const withTM = require('next-transpile-modules');
module.exports = withTypescript(
withTM({
transpileModules: ['somemodule', 'and-another']
})
);
@weco/next-plugin-transpile-modules
?@weco
's seems deadNext.js 7 introduced Webpack 4 and Babel 7, which changed a couple of things, especially for TypeScript and Flow plugins.
If you have a transpilation error when loading a page, check that your .babelrc
/babel.config.js
is up to date and valid, you may have forgotten a preset there.
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 in the official Next.js repo.
Lerna's purpose is to publish different packages from a monorepo, it does not help for and do not intend to help local development with local modules.
This is not coming from me, but from Lerna's maintainer.
So you are probably using it wrong, and I advice you to use npm
or Yarn workspaces instead.
FAQs
Next.js plugin to transpile code from node_modules
The npm package next-transpile-modules receives a total of 369,557 weekly downloads. As such, next-transpile-modules popularity was classified as popular.
We found that next-transpile-modules demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.