React#

Rspack has built-in support for JSX, which allows you to use JSX syntax directly in .jsx and .tsx files in your project. If you need to use JSX in .js or .ts files, you will need to configure it as follows:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        type: 'jsx',
      },
      {
        test: /\.ts$/,
        type: 'tsx',
      },
    ],
  },
};

Emotion#

Rspack has built-in support for emotion, which allows you to use emotion syntax directly in .jsx and .tsx files in your project. You can use emotion functionality through the following configuration:

module.exports = {
  builtins: {
    emotion: true,
    react: {
      importSource: '@emotion/react',
    },
  },
};

import { css } from '@emotion/react';

export function Button({ children }) {
  return (
    <button
      css={css`
        background: hotpink;
        &:hover {
          background: purple;
        }
      `}
    >
      {children}
    </button>
  );
}

Other CSS-in-JS solutions can be used by configuring the babel-loader.

Fast Refresh#

Rspack enables Fast Refresh functionality by default during development, allowing you to use it directly in your project. You can also disable the react-refresh feature through builtins.react.refresh.

Integrating SVGR#

SVGR is an universal tool for transforming Scalable Vector Graphics (SVG) files into React components.

The usage of SVGR with Rspack is exactly the same as with Webpack.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

For detailed usage of SVGR, please refer to SVGR Documentation - Webpack.