Problem installing BuilderDevToolsPlugin on bare React app

Technical Questions
1

Hi. I’m trying to integrate with builder.oi using npm init builder.io@latest 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”
})]
}).merge({
plugins:[new _builderioDevtoolsWebpack.BuilderDevToolsPlugin()]
}).merge({
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 (___\node_modules@builder.io\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 builder.io package doesn’t depend on Webpack as I can see.

1 Like
2

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.

3

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 builder.io@latest but “builder.io” builder.io - npm has less than 383 downloads. I also found @builder.io/react - npm which seems to be more credible. Am I using the right package?

4

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

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

1 Like
5

So, for React it’s

npm install @builder.io/react

?

based on Developer Quickstart - Builder.io.

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

npm init builder.io

See here Mapping Figma Components with Visual Copilot - Builder.io

(I’m particulary intrasted in Visual Copilot)

6

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 @builder.io/react:

  • Manual Installation: Directly installs the React SDK for Builder.io.
  • 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 builder.io@latest:

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

When to Use Each Command:

  • Use npm install @builder.io/react if:
    • You are manually integrating Builder.io into an existing React project.
    • You want to have detailed control over the installation and integration process.
  • Use npm init builder.io@latest if:
    • You are starting a new project or want an automated way to set up Builder.io.
    • 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!