Error running webpack after adding typescript to existing JS project

Question

I'm having difficulty incorporating Typescript to my JS project which uses webpack. Here is my webpack.config.js:

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.ttf$/,
        use: ["file-loader"],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [new MonacoWebpackPlugin()],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

And the tsconfig I'm currently using:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "ES6",
    "target": "ES5",
    "jsx": "react",
    "moduleResolution": "node"
  }
}

I run the app with webpack serve --mode development but nothing is appearing in dist/bundle.js. I don't know if its because of the module specified in the tsconfig, or if I need to add an explicit tsc transpilation step, or what.

Does it output an error? Your serve command might not populate a bundle unless you configure it to. If you omit the serve it will probably output as needed, since that's what you'd be instructing it to do. — Jeff Bowman
– Jeff Bowman, Commented Jul 14, 2024 at 20:57
The tsconfig outDir configuration is ignored when you use Webpack or any bundler for that matter. Out of the box, as @JeffBowman said, the Webpack dev server does not emit files during development mode. — Harshal Patil
– Harshal Patil, Commented Jul 15, 2024 at 3:56

user6118986 · Accepted Answer · 2024-07-17 15:33:48Z

0

Adding a tsc transpilation step appears to fix the issue.

answered Jul 17, 2024 at 15:33

user6118986

4034 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Bowman Over a year ago

I'm glad this works for you, but be careful: the bundle that TSC emits in the answer and the bundle that Webpack would emit (if you run it without serve) are going to be fairly different, particularly if you're depending on any bundle aggregation, customization, or optimization that Webpack is willing to do for you.

Collectives™ on Stack Overflow

Error running webpack after adding typescript to existing JS project

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related