Skip to main content

Output Options

These options configure the build output generated by chayns-toolkit build.

All options aswell as the toolkit.config.js file itself are optional.

/toolkit.config.js
module.exports = {
    output: {
        /**
         * Change the file-name your of primary output bundle. You can use any
         * of the [webpack substitutions](https://webpack.js.org/configuration/output/#template-strings)
         * as well as the `[package]` substitution, which will be replaced by
         * the package name specified in your `package.json`. Defaults to
         * `[package].[contenthash].js`.
         *
         * @type {string}
         */
        filename: "[package].[contenthash].js",

        /**
         * Set an absolute path where your output will be emitted to.
         *
         * @type {string}
         */
        path: "//my-qa-server/example-project",
        entryPoints: {
            // key defines the name of the resulting html-file (here index.html)
            index: {
                pathIndex: "./src/index", // path to your entry point index.js/index.ts
                pathHtml: "./src/index.html", // path to the html template
            },
        },
        /**
         * Prefixes all css selectors with the name (in snake case) from the package.json.
         * This requires that you wrap your application with a div which has that name as className.
         * Known issue: Using this option does not work with css modules. (fixed with version 3.1.3)
         */
        prefixCss: true,
        /**
         * The css version which should be used for the CHAYNS_TOOLKIT_CSS_TAG variable
         */
        cssVersion: "4.2",
        /**
         * The option to use for transforming React JSX. The default value is "automatic", which means that the new JSX transform will be used. If you want to use the old JSX transform, you can set this option to "classic". Note that the old JSX transform is deprecated and will be removed in a future version of React.
         * @type {'automatic' | 'classic'}
         */
        reactRuntime: "automatic",
        /**
         * Enables and configures the React Compiler.
         *
         * By default, the compiler is automatically enabled when
         * `babel-plugin-react-compiler` is installed.
         *
         * Use `false` to disable that auto-enable behavior, `true` to force it on,
         * or provide an object to configure it explicitly.
         *
         * @type {boolean | { target?: string }}
         */
        reactCompiler: {
            target: "18",
        },
        /**
         * Expose modules via Module Federation.
         * See the Module Federation documentation for more details.
         *
         * @type {Record<string, string>}
         */
        exposeModules: {
            "./MyComponent": "./src/MyComponent",
        },
        /**
         * Disable automatic React sharing in Module Federation.
         *
         * @type {boolean}
         */
        disableReactSharing: false,
        /**
         * Overrides the `requiredVersion` used for Module Federation shared
         * React packages.
         *
         * See the Module Federation documentation for details.
         *
         * @type {string | { react?: string, reactDom?: string }}
         */
        reactRequiredVersions: {
            react: "^19.0.0",
            reactDom: "^19.0.0",
        },
    },
    // ... other options ...
}

React Compiler​

If babel-plugin-react-compiler is installed, chayns-toolkit enables the React Compiler automatically.

You can override this behavior via output.reactCompiler:

  • false disables the compiler even if the package is installed
  • true forces it on
  • { target: "18" } enables it and configures the target explicitly

Module Federation​

To expose modules that can be consumed by other applications at runtime, configure the exposeModules option. This enables Module Federation.

For detailed information about Module Federation, including version compatibility requirements with chayns-api and overriding React required versions, see the Module Federation documentation.