Rollup plugin for TypeScript fails to transpile Babel 7 code

Question

Rollup plugin for TypeScript fails to transpile Babel 7 code

I've been encountering issues trying to use rollup-plugin-babel in my typescript project. Despite the .ts code compiling and rollup generating map files, babel does not seem to transpile it.

Interestingly, when I execute

npx babel lab.js --out-file lab-es5.js

, babel works perfectly fine.

This is the content of my rollup.config.js file:

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2'
import sourcemaps from 'rollup-plugin-sourcemaps';
import babel from 'rollup-plugin-babel';

var plugins = [
    nodeResolve({
        module: true,
        jsnext: true,
        main: true,
        preferBuiltins: false
    }),
    commonjs({
        include: 'node_modules/**',
        ignoreGlobal: false,
    }),
    typescript(/*{ plugin options }*/),
    babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true
    }),
    sourcemaps()
];

export default [
    {
        input: 'src/lab.ts',
        plugins,
        output: {
            name: "TablePager",
            file: 'lab.js',
            format: 'iife',
            sourcemap: true
        }
    }
];

Here is the content of my .babelrc file:

{
    "presets": ["@babel/preset-env"]
}

If you have any insights on what might be causing this issue, I would greatly appreciate your help.

typescript babeljs rollup

Answer 1

Answer №1

Insights

The default settings for @rollup/plugin-babel include the following file extensions:

.js
.jsx
.es6
.es
.mjs

When using @rollup/plugin-babel in conjunction with @rollup/plugin-typescript, there are two key aspects to consider.

You must specify to use the TypeScript extension as it is not enabled by default.
You need to indicate which files should be transpiled.

Contrary to what the documentation implies, not all files are automatically transpiled, especially those with the TypeScript extension. Therefore, you must manually set the include option.

Thankfully, for the second aspect, you can utilize a glob pattern instead of specifying a folder directly.

Illustration

Here's an example scenario where all TypeScript files meant for transpilation reside in the src directory.

"use strict";

import babel from "@rollup/plugin-babel";
import typescript from "@rollup/plugin-typescript";

import { resolve } from "path";

export default {
    plugins: [
        typescript(),
        babel({
            extensions: [".ts"],
            include: resolve("src", "**", "*.ts")
        })
    ];
};

References

Rollup documentation link.
Babel plugin for Rollup documentation link.
TypeScript plugin for Rollup documentation link.

Answer 2

Insights

The default settings for @rollup/plugin-babel include the following file extensions:

.js
.jsx
.es6
.es
.mjs

When using @rollup/plugin-babel in conjunction with @rollup/plugin-typescript, there are two key aspects to consider.

You must specify to use the TypeScript extension as it is not enabled by default.
You need to indicate which files should be transpiled.

Contrary to what the documentation implies, not all files are automatically transpiled, especially those with the TypeScript extension. Therefore, you must manually set the include option.

Thankfully, for the second aspect, you can utilize a glob pattern instead of specifying a folder directly.

Illustration

Here's an example scenario where all TypeScript files meant for transpilation reside in the src directory.

"use strict";

import babel from "@rollup/plugin-babel";
import typescript from "@rollup/plugin-typescript";

import { resolve } from "path";

export default {
    plugins: [
        typescript(),
        babel({
            extensions: [".ts"],
            include: resolve("src", "**", "*.ts")
        })
    ];
};

References

Rollup documentation link.
Babel plugin for Rollup documentation link.
TypeScript plugin for Rollup documentation link.

Answer 3

Answer №2

Take a look at the TypeScript-Babel-Starter by Microsoft on GitHub, specifically the rollup section.

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

Answer 4

Take a look at the TypeScript-Babel-Starter by Microsoft on GitHub, specifically the rollup section.

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

Answer 5

Answer №3

Make sure to include @babel/preset-typescript in your .babelrc file. Simply install the package and update your configuration as follows:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

Answer 6

Make sure to include @babel/preset-typescript in your .babelrc file. Simply install the package and update your configuration as follows:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

Rollup plugin for TypeScript fails to transpile Babel 7 code

Answer №1

Insights

Illustration

References

Answer №2

Answer №3

Similar questions

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Using the parameter of type 'never' is necessary as per the TypeScript error message, which states that the argument of type 'string' cannot be assigned to it. This error persists even when

What causes tsc to generate different json files based on its execution location?

What is the advantage of utilizing the "extends" keyword over directly stating the type?

Is it feasible to alter the file name while utilizing express-fileUpload library?

Oops! Unable to locate the module specifier "highlight.js" in the ES6 module compiled from TypeScript

Embedding Interfaces within Interfaces

Changing the selection on multiple input fields in Angular

What is the timing for the execution of top-level non-export code in TypeScript?

Creating a one-of-a-kind entry by adding a number in JavaScript

What is preventing MenuItemLink from being displayed in the menu?

Unable to utilize AgmMarkerSpiderModule

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Signal a return type error when the provided element label does not correspond with an existing entity

Fetching all data from a SQLite database in a Listview using React Native

Utilize the ref attribute when working with Material UI InputLabel components

The property y is not found on type x during property deconstruction

How can Angular2 detect when an entity is clicked within a window?

Retrieving class properties in typescript

How can we efficiently load paginated data from a database while still implementing pagination using Angular Material?