Bundling and Import

This reference covers bundling your React components and importing them to Webflow.

Import

Import your components to Webflow using DevLink. DevLink bundles your component files and uploads them to your Workspace as a shared library.

Use the following command to import your components to Webflow:

$
webflow devlink import

CI/CD pipelines

For automated workflows, add the --no-input flag to skip interactive prompts:

$
webflow devlink import --no-input

Important: Add change detection to prevent inadvertently removing components:

• Compare current library state with previous import
• Only share when components have actually changed

For more options, see the Webflow CLI reference. →.

Bundling

Webflow uses Webpack to bundle your component libraries. During this process, the bundler handles TypeScript compilation, resolves all dependencies and imports, optimizes your code for production, and generates bundles ready for import.

The default configuration handles most use cases automatically. Extend it when you need:

• Custom CSS processing
• Specialized file handling (SVG, images, fonts)
• Build optimizations (tree shaking, code splitting)

To override the default configuration, see the guide on Webpack configuration overrides.

Bundle limits

Maximum bundle size: 50MB

Debugging

This section provides common debugging techniques for troubleshooting the bundling process and resolving configuration issues.

Disable minification

By default, the bundler minifies your code to reduce file size for production. To troubleshoot issues, you can disable minification in your webpack configuration.

This keeps your bundled code readable and ensures that any errors you see in the browser’s developer console will have accurate line numbers that map back to your original source code.

1
module.exports = {
2
    mode: "development",
3
  };

1
{
2
  "library": {
3
    "name": "My Library",
4
    "components": ["./src/components/**/*.webflow.{js,ts,tsx}"],
5
    "bundleConfig": "./webpack.webflow.js"
6
  }
7
}

CSS modules

CSS Modules scope styles by generating unique class names, preventing conflicts between components.

By default, you must use bracket notation to access CSS classes:

1
import * as styles from "./Button.module.css";
2
3
export const Button = (text: string) => {
4
    return (
5
        <a className={(styles as any)["my-button"]}>
6
            {text}
7
        </a>
8
    );
9
};

To enable dot notation, and to use the default import syntax for CSS modules, update the css-loader configuration:

1
module.exports = {
2
    module: {
3
      // Override the existing rules to modify CSS processing
4
      rules: (currentRules) => {
5
        return currentRules.map((rule) => {
6
          // Find the rule that handles CSS files
7
          if (
8
            rule.test instanceof RegExp &&
9
            rule.test.test("test.css") &&
10
            Array.isArray(rule.use)
11
          ) {
12
13
              for (const [index, loader] of rule.use.entries()) {
14
15
              // Find the css-loader
16
              if (typeof loader === "object" && loader?.ident === "css-loader") {
17
18
                // Preserve existing options and add a custom configuration
19
                const options =
20
                  typeof loader.options === "object" ? loader.options : {};
21
                rule.use[index] = {
22
                  ...loader,
23
                  options: {
24
                    ...options,
25
                    modules: {
26
                      exportLocalsConvention: "as-is", // Use original class names
27
                      namedExport: false, // ⚠️ Allow dot notation access
28
                    },
29
                  },
30
                };
31
              }
32
            }
33
          }
34
          return rule;
35
        });
36
      },
37
    },
38
  };

Bundle locally

To test and debug your React components locally, you can bundle your library using the Webflow CLI command.

$
webflow devlink bundle --public-path http://localhost:4000/

The public path is the URL where you can serve your bundled library. The CLI will generate a dist folder with your bundled library.

To inspect the final configuration being used by webpack, use the --debug-bundler option.