Use a bundler
You can use a bundler, such as webpack or vite, to compile TypeScript code and make a bundle. If you do this, ensure the target is ["web", "es2020"] as shown in the following example of a webpack config file.
Note
If you based your code on any of the TypeScript examples provided, make sure that the TypeScript is compiled to JavaScript.
Tip
The Sitecore Content Hub - External Components video available on the Discover Sitecore channel covers using a bundler.
RequestResponse
const path = require("path");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./index.tsx",
target: ["web", "es2020"],
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
fallback: {
fs: false,
https: false,
},
},
devtool: "source-map",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
library: {
type: "module",
},
},
experiments: { outputModule: true, backCompat: false },
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 4000,
},
optimization: {
minimize: false,
},
plugins: [
new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
process: "process/browser",
}),
],
};