Browse recipes

Integrate Valyrian.js with Webpack or Rspack

Build the same Valyrian.js TSX entry through either Webpack or Rspack.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.

Run this recipe

Starting project
Start with an empty Node.js project and choose either the Webpack branch or the Rspack branch.
File
Create tsconfig.json, index.html, src/main.tsx, the selected bundler config and the package scripts shown.
Run
Run the selected dev command and open its URL, then run the matching production build command.
Observable result
The selected development server and build display Valyrian integration is working without TSX transform errors.

1. Install the common runtime

Install Valyrian.js and TypeScript, then use the same TSX compiler settings for either branch.

bash
npm i valyrian.js
npm i -D typescript

2. Configure TypeScript

json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "valyrian.js"
  }
}

3. Create index.html

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Valyrian bundled app</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

4. Create src/main.tsx

tsx
import { mount } from "valyrian.js";

function App() {
  return <main>Valyrian integration is working.</main>;
}

mount("#app", App);

5A. Install Webpack

Choose this branch for Webpack.

bash
npm i -D webpack webpack-cli webpack-dev-server ts-loader html-webpack-plugin

5B. Configure Webpack

js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: "./src/main.tsx",
  resolve: { extensions: [".tsx", ".ts", ".js"] },
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",
          options: { transpileOnly: true },
        },
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
  devServer: { port: 5173, historyApiFallback: true },
  output: { clean: true, filename: "assets/app.js" },
};

6A. Install Rspack

Choose this branch for Rspack instead of the Webpack branch.

bash
npm i -D @rspack/core @rspack/cli @rspack/dev-server

6B. Configure Rspack

js
const { rspack } = require("@rspack/core");

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: "./src/main.tsx",
  resolve: { extensions: [".tsx", ".ts", ".js"] },
  module: {
    rules: [
      {
        test: /\.[tj]sx?$/,
        exclude: /node_modules/,
        loader: "builtin:swc-loader",
        options: {
          jsc: {
            parser: { syntax: "typescript", tsx: true },
            transform: {
              react: { runtime: "automatic", importSource: "valyrian.js" },
            },
          },
        },
      },
    ],
  },
  plugins: [new rspack.HtmlRspackPlugin({ template: "./index.html" })],
  devServer: { port: 5174, historyApiFallback: true },
  output: { clean: true, filename: "assets/app.js" },
};

7. Add package scripts

json
{
  "scripts": {
    "dev:webpack": "webpack serve",
    "build:webpack": "webpack --mode production",
    "dev:rspack": "rspack serve",
    "build:rspack": "rspack build --mode production"
  }
}

8. Verify one branch

Run only the commands for the selected branch. The development server and production build must render the same entry without JSX transform errors.

bash
npm run dev:webpack
npm run build:webpack
# or
npm run dev:rspack
npm run build:rspack