Problem installing BuilderDevToolsPlugin on bare React app

Hi. I’m trying to integrate with builder.oi using npm init package.
I have a complex Webpack configuration, I don’t think I can send you all of this, but, I have 2 parts, client and server configs. On the client config I added like this, at the very end of plugins (this is the last merge that mentions “plugins”).

}).mergeIf(process.env.WEBPACK_ANALYZE === “true”, {
plugins: [new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
defaultSizes: “gzip”
plugins:[new _builderioDevtoolsWebpack.BuilderDevToolsPlugin()]
devServer: {
hot: true,
open: true,
I’ve tried a couple of other things, but I’m always keep getting this error:

[server] [CMD] npx rimraf ./dist/*
[server] Converting locales…
[client] TypeError: Cannot read properties of undefined (reading ‘Compilation’)
[client] at ze.apply (___\\dev-tools\webpack\index.cjs:15:3010)
[client] at webpack (___\node_modules\webpack\lib\webpack.js:51:13)
[client] at startDevServer (___\node_modules\webpack-dev-server\bin\webpack-dev-server.js:94:16)
[client] at ___\node_modules\webpack-dev-server\bin\webpack-dev-server.js:166:3
→ Sending SIGTERM to other processes…


(I used “___” to hide some parts of the paths)

I’m using Webpack 4 and I don’t have an option to lift it up, if this is an issue, though, I read that Compilation property have been in Webpack for many versions before. Also the package doesn’t depend on Webpack as I can see.

1 Like

Hello Nikolai,

Can you share your complete Dependencies list and Node Version with me?
I’d like to confirm you are using Node 18 or more recent.

Hi Julius,

Actually we’re on Node 16. I’m not sure I can share all the dependencies( So, it has to be Node 18?

Now, I’m not sure I’m using the right package. From the documentation, it’s npm init but “ - npm has less than 383 downloads. I also found - npm which seems to be more credible. Am I using the right package?

I would strongly suggest using node 18 or more recent.
I could also point you out to the follwing Documentation: Developer Quickstart -

Please feel free to use the dropdowns to select your Frameworks and SDK. You should be presented with the correct package.

1 Like

So, for React it’s

npm install


based on Developer Quickstart -

At the same time there’s another part of documentation that referes to

npm init

See here Mapping Figma Components with Visual Copilot -

(I’m particulary intrasted in Visual Copilot)

Hi Nikolai,

I have below a summary of the differences between the two methods. Note: they will both get you to be able to work with our Visual Copilot!

npm install

  • Manual Installation: Directly installs the React SDK for
  • Use Case: Preferred if you want detailed control over the integration steps and configurations.
  • Scope: Only installs the SDK and does not automate further setup or configurations.

npm init

  • Automated Setup: Bootstraps a project or adds to an existing project with more automated setup steps.
  • Use Case: Useful for new projects or when you prefer an automated way to integrate with minimal manual configuration.
  • Scope: May include multiple steps such as dependency installation, configuration, and setting up dev tools.

When to Use Each Command:

  • Use npm install if:
    • You are manually integrating into an existing React project.
    • You want to have detailed control over the installation and integration process.
  • Use npm init if:
    • You are starting a new project or want an automated way to set up
    • You prefer a guided setup that handles various configurations and installations for you.

Let me know if you have any further questions I may be able to clarify!