Setting up TypeScript along with Babel and Webpack: A step-by-step guide

Question

Setting up TypeScript along with Babel and Webpack: A step-by-step guide

Here are the dependencies listed in my project:

"devDependencies": {
  "@types/node": "^4.0.27-alpha",
  "babel-core": "^6.10.4",
  "babel-loader": "^6.2.4",
  "babel-polyfill": "^6.9.1",
  "babel-preset-es2015": "^6.9.0",
  "babel-preset-stage-0": "^6.5.0",
  "ts-loader": "^0.8.2",
  "typescript": "^2.0.0",
  "webpack": "^1.13.1"
}

.babelrc file content:

{
  "presets": [
    "es2015",
    "stage-0"
  ]
}

tsconfig.json configuration:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "built"
    },
    "exclude": [
        "node_modules"
    ]
}

Contents of webpack.config.js file:

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './built/bundle.js',
  },
  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.tsx?$/, loaders: ['ts-loader', 'babel-loader'], exclude: /node_modules/
    }],
  }
};

/src/index.ts implementation:

async function foo() {
  const value = await bar();
  console.log(value);
}

function bar() {
  return new Promise((resolve, reject) => {
    return resolve(4);
  });
}

(async function run() {
  await foo();
}());

Despite a successful build and run (logging 4 correctly), there are some errors encountered with Webpack:

ERROR in ./src/index.ts
(4,32): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(6,12): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(31,451): error TS2346: Supplied parameters do not match any signature of call target.

ERROR in ./src/index.ts
(40,33): error TS2304: Cannot find name 'regeneratorRuntime'.

ERROR in ./src/index.ts
(41,12): error TS2304: Cannot find name 'regeneratorRuntime'.

The issue seems to be related to the usage of babel-polyfill. What could be missing here?

javascript typescript webpack babeljs

Answer 1

Answer №1

Babel 7 no longer requires ts-loader.

With the release of Babel 7, utilizing ts-loader is now redundant as Babel 7 has native TypeScript support. For a comprehensive guide on setting up TypeScript with Babel 7 and Webpack, refer to this resource.

A walkthrough of the setup process without using ts-loader.

To get started, install Babel's TypeScript support. While only @babel/preset-typescript is mandatory, the other three provide additional functionality that complements TypeScript.

npm install --save-dev @babel/preset-typescript 
npm install --save-dev @babel/preset-env 
npm install --save-dev @babel/plugin-proposal-class-properties 
npm install --save-dev @babel/plugin-proposal-object-rest-spread

Next, configure the necessary plugins and presets in your .babelrc file.

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

Finally, update your webpack.config.js accordingly (other code sections are omitted for clarity).

module: {
  rules: [
  {
     test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
    }
  ]
},
resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},

Answer 2

Babel 7 no longer requires ts-loader.

With the release of Babel 7, utilizing ts-loader is now redundant as Babel 7 has native TypeScript support. For a comprehensive guide on setting up TypeScript with Babel 7 and Webpack, refer to this resource.

A walkthrough of the setup process without using ts-loader.

To get started, install Babel's TypeScript support. While only @babel/preset-typescript is mandatory, the other three provide additional functionality that complements TypeScript.

npm install --save-dev @babel/preset-typescript 
npm install --save-dev @babel/preset-env 
npm install --save-dev @babel/plugin-proposal-class-properties 
npm install --save-dev @babel/plugin-proposal-object-rest-spread

Next, configure the necessary plugins and presets in your .babelrc file.

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

Finally, update your webpack.config.js accordingly (other code sections are omitted for clarity).

module: {
  rules: [
  {
     test: /\.(js|jsx|tsx|ts)$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
    }
  ]
},
resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},

Answer 3

Answer №2

When configuring loaders in webpack, it's important to consider the order of execution. Loaders always run from right to left, so make sure to place them in the correct sequence.

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/

This adjustment resolved the issue by ensuring that ts-loader is executed first.

Below is the updated webpack.config.js file:

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './dist/index.js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
    }],
  }
};

For a sample project using this configuration, visit brunolm/typescript-babel-webpack.

Answer 4

When configuring loaders in webpack, it's important to consider the order of execution. Loaders always run from right to left, so make sure to place them in the correct sequence.

test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/

This adjustment resolved the issue by ensuring that ts-loader is executed first.

Below is the updated webpack.config.js file:

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './dist/index.js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
    }],
  }
};

For a sample project using this configuration, visit brunolm/typescript-babel-webpack.

Answer 5

Answer №3

(4,32): error TS2304: Issue locating 'regeneratorRuntime'.

This indicates that the result of babel is being passed to ts. The sequence here is incorrect

Solution

Your compilation setup should direct TS output to Babel.

Alternatively, you could compile TypeScript using just Babel with @babel/preset-typescript.

Learn More

Further information on compiling TypeScript with Babel : https://babeljs.io/docs/en/babel-preset-typescript

Answer 6

(4,32): error TS2304: Issue locating 'regeneratorRuntime'.

This indicates that the result of babel is being passed to ts. The sequence here is incorrect

Solution

Your compilation setup should direct TS output to Babel.

Alternatively, you could compile TypeScript using just Babel with @babel/preset-typescript.

Learn More

Further information on compiling TypeScript with Babel : https://babeljs.io/docs/en/babel-preset-typescript

Answer 7

Answer №4

This post may be a bit outdated...
For those looking to integrate babel with ts-loader in the year 2023:

Installation Steps

npm install -D babel-loader @babel/core @babel/preset-env

Setting up Webpack Loaders

{
  entry: './src/index.tsx',
  // ... your other webpack configs
  module: {
    // ... your other module configs
    rules: [
      // ... your other roles configs
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: 'defaults' }],
              ],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },
}

Successfully tested using electron-forge.
(Environment includes NodeJS 19.0.0, TypeScript 5.0.2, @babel/core 7.21.3, babel-loader 9.1.2, and ts-loader 9.2.2)

Answer 8

This post may be a bit outdated...
For those looking to integrate babel with ts-loader in the year 2023:

Installation Steps

npm install -D babel-loader @babel/core @babel/preset-env

Setting up Webpack Loaders

{
  entry: './src/index.tsx',
  // ... your other webpack configs
  module: {
    // ... your other module configs
    rules: [
      // ... your other roles configs
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: 'defaults' }],
              ],
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
      },
    ],
  },
}

Successfully tested using electron-forge.
(Environment includes NodeJS 19.0.0, TypeScript 5.0.2, @babel/core 7.21.3, babel-loader 9.1.2, and ts-loader 9.2.2)

Setting up TypeScript along with Babel and Webpack: A step-by-step guide

Answer №1

Babel 7 no longer requires ts-loader.

A walkthrough of the setup process without using ts-loader.

Answer №2

Answer №3

Solution

Learn More

Answer №4

Installation Steps

Setting up Webpack Loaders

Similar questions

Navigating an HTML table with the precision of a battleship commander: A guide

Utilizing jQuery to incorporate a radio input function in a POST request

The like button animation works perfectly for individual posts, but for multiple posts, only the like button on the first post

Having trouble displaying options in VueJS Component using datalist

Working with HTTPS in Angular: A guide to using $http

The command `grunt.option('force', true) isn't functioning properly

What is the process for customizing the marker icon on a leaflet map using NUXT.js?

Sending various FormData instances to Node Express

What is the method for obtaining the most up-to-date JSON GET request URL?

Performing an Axios POST request in a React Native and React app using JSON.stringify and Blob functionality

TypeScript generic types allow you to create reusable components that

Exploring the Potential of CSS Styling within Vue.js

When an attempt to make a POST request using fetch() is made, a TypeError: Failed to fetch error is immediately thrown instead of

The module '@types/googlemaps/index.d.ts' cannot be found

Enhance the appearance of dynamically loaded JSON responses within prism.js using JavaScript

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

Stop the user from entering anything other than numbers

Issue encountered while serializing the `.product` object retrieved from the `getStaticProps` function in NextJS, in conjunction with

Challenges arise when attempting to modify an ArrowHelper without creating a new instance

fixing errors with express, angularJS, and socket.io