Bundling and Import

This guide covers bundling your React components and importing them to Webflow. You’ll also learn how to customize the build process for your specific needs.

Import

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

$
npx webflow library share

CI/CD Pipelines

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

$
npx webflow library share --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)

Bundle limits

Maximum bundle size: 50MB

Customize webpack configuration

Create a webpack.webflow.js file to override the default configuration. Then reference it in your webflow.json:

1
{
2
    "library": {
3
      "name": "React Components Library",
4
      "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5
      "bundleConfig": "./webpack.webflow.js"
6
    }
7
  }
8
  

Debugging

Disable minification

For better error messages during development, disable minification:

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

Or use the --dev flag when bundling locally:

$
npx webflow library bundle --public-path http://localhost:4000/ --dev

Note: --public-path is required for local bundling.

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
  };
39
  

Bundle locally

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

$
npx webflow library 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.