@issue/bun + webpack + typescript 환경에서 interface 등의 특정 키워드 사용 불가능한 문제 해결

bun+webpack+typescript 환경에서 interface 등의 특정 키워드 사용 불가능

---

// src/index.ts

interface someInterface {}

console.log("Hello!");

이후 bun webpack 을 실행하게 되면, Module parse failed: The keyword 'interface' is reserved 오류가 나게 된다

ERROR in ./src/index.ts 3:0
Module parse failed: The keyword 'interface' is reserved (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import "./styles/index.scss";
| 
> interface someInterface {}
| 
| console.log("hello!");

webpack 5.88.2 compiled with 1 error in 199 ms
error: script "build" exited with code 1 (SIGHUP)

babel을 이용한 해결

---

babel과 babel 프리셋으로 해결해 보자,

패키지 설치

bun add -D babel-loader @babel/core @babel/preset-env @babel/preset-typescript

웹팩 설정

import path from "path";
import { Configuration } from "webpack";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";

  

const commonConfig: Configuration = {
	entry: "./src/index.ts",
	output: {
		path: path.resolve(__dirname, "../dist"),
	},
	module: {
		rules: [
			{
				test: /\.html$/,
				use: ["html-loader"],
			},
			{
				test: /\.tsx?$/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env", "@babel/preset-typescript"],
					},
				},
			},
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "src/template.html",
		}),
		new CleanWebpackPlugin(),
	],
};

export default commonConfig;

기존에 작성했던 config 에서 module에 babel-loader를 추가하면 된다.

전체 코드 보기