# Problem installing BuilderDevToolsPlugin on bare React app **URL:** \ **Category:** Technical Questions\ **Tags:** react\ **Created:** [May 10, 2024, 10:46am UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549 "2024-05-10T10:46:31Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Nikolai](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nikolai](https://forum.builder.io/u/Nikolai)\ **Post date:** [May 10, 2024, 10:46am UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/1 "2024-05-10T10:46:31Z")
Hi. I’m trying to integrate with builder.oi using npm init [builder.io](http://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](http://builder.io) package doesn’t depend on Webpack as I can see. ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [May 14, 2024, 5:18pm UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/2 "2024-05-14T17:18:34Z")
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. ---
**Author:** ![Nikolai](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nikolai](https://forum.builder.io/u/Nikolai)\ **Post date:** [May 15, 2024, 9:05am UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/3 "2024-05-15T09:05:56Z")
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](http://builder.io)@latest but “[builder.io](http://builder.io)” [builder.io - npm](https://www.npmjs.com/package/builder.io) has less than 383 downloads. I also found [@builder.io/react - npm](https://www.npmjs.com/package/@builder.io/react?activeTab=dependencies) which seems to be more credible. Am I using the right package? ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [May 15, 2024, 3:21pm UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/4 "2024-05-15T15:21:52Z")
I would strongly suggest using node 18 or more recent. I could also point you out to the follwing Documentation: [Developer Quickstart - Builder.io](https://www.builder.io/c/docs/quickstart#step-1-add-builder-as-a-dependency) Please feel free to use the dropdowns to select your Frameworks and SDK. You should be presented with the correct package. ---
**Author:** ![Nikolai](https://avatars.discourse-cdn.com/v4/letter/n/8491ac/32.png) [@Nikolai](https://forum.builder.io/u/Nikolai)\ **Post date:** [May 16, 2024, 11:49am UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/5 "2024-05-16T11:49:44Z")
So, for React it’s ```auto npm install @builder.io/react ``` ? based on [Developer Quickstart - Builder.io](https://www.builder.io/c/docs/quickstart#step-1-add-builder-as-a-dependency). At the same time there’s another part of documentation that referes to ```auto npm init builder.io ``` See here [Mapping Figma Components with Visual Copilot - Builder.io](https://www.builder.io/c/docs/vcp-components#connecting-devtools-to-your-app) (I’m particulary intrasted in Visual Copilot) ---
**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\ **Post date:** [May 21, 2024, 7:38pm UTC](https://forum.builder.io/t/problem-installing-builderdevtoolsplugin-on-bare-react-app/5549/6 "2024-05-21T19:38:12Z")
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](http://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](http://Builder.io) project or adds [Builder.io](http://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](http://Builder.io) with minimal manual configuration. - **Scope** : May include multiple steps such as dependency installation, configuration, and setting up [Builder.io](http://Builder.io) dev tools. ### When to Use Each Command: - **Use `npm install @builder.io/react`** if: - You are manually integrating [Builder.io](http://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](http://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!