How to setup TypeScript + Babel + Webpack?

by

Babel 7 does not need ts-loader.

As of Babel 7 the ts-loader is unnecessary, because Babel 7 understands TypeScript. Complete details of a TypeScript + Babel7 + Webpack setup are here.

An overview of the set up without ts-loader.

Install Babel’s TypeScript support. Only @babel/preset-typescript is mandatory; the other three add additional features that TypeScript supports.

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

Configure the additional .babelrc plugins and presets.

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

And update your webpack.config.js (other code is omitted for clarity).

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

More Related Contents:

  1. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  2. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  3. Getting Unexpected Token Export
  4. Calling webpacked code from outside (HTML script tag)
  5. ES6 exporting/importing in index file
  6. How do I generate sourcemaps when using babel and webpack?
  7. Angular 2 – communication of typescript functions with external js libraries
  8. Arrow Function syntax not working with webpack?
  9. Webpack babel 6 ES6 decorators
  10. `this` is undefined in Dev Tools when using arrow function
  11. Error: Missing class properties transform
  12. Importing CSS files in Isomorphic React Components
  13. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  14. “You may need an additional loader to handle the result of these loaders.”
  15. Import ES module in Next.js ERR_REQUIRE_ESM
  16. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  17. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  18. how can I use top level “await” in typescript next.js
  19. Typescript: No index signature with a parameter of type ‘string’ was found on type ‘{ “A”: string; }
  20. javascript import from ‘/folder’ with index.js
  21. Scroll to element on click in Angular 4
  22. Is it possible to use dotenv in a react project?
  23. Typescript dynamically create interface
  24. Iterate over interface properties in TypeScript
  25. How to run Node.js app with ES6 features enabled?
  26. TypeScript: Why is that my filter method cannot narrow the type and eliminate the undefined and false from the array
  27. Configure webpack to allow browser debugging
  28. Property ‘catch’ does not exist on type ‘Observable’
  29. How to import ipcRenderer in vue.js ? __dirname is not defined
  30. How to implement a Typescript interface to an es5-style “class”?

Leave a Comment