one react js project that consume bundle of another react project

You can achieve this by creating two React projects: 1️⃣ The first project (project-x) will contain the X and Y components, and be bundled for reuse. 2️⃣ The second project (project-y) will consume the bundled components from project-x.

✅ Step 1: Create project-x (Component Provider)

Run:

npx create-react-app project-x --template javascript

Inside project-x/src/components, create two sample components:

X.js

import React from "react";

const X = () => <div>Hello from Component X!</div>;

export default X;

Y.js

import React from "react";

const Y = () => <div>Hello from Component Y!</div>;

export default Y;

✅ Step 2: Bundle project-x for Use in project-y

1️⃣ Install Webpack & Babel for bundling:

npm install --save-dev webpack webpack-cli babel-loader @babel/preset-env @babel/preset-react

2️⃣ Create webpack.config.js (at root of project-x):

const path = require("path");

module.exports = {
  entry: "./src/components/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    library: "ProjectX",
    libraryTarget: "umd",
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: "babel-loader" },
    ],
  },
};

3️⃣ Create src/components/index.js

export { default as X } from "./X";
export { default as Y } from "./Y";

4️⃣ Bundle project-x Run:

npx webpack

This will generate dist/bundle.js.

✅ Step 3: Create project-y (Consumer)

Run:

npx create-react-app project-y --template javascript

Inside project-y, install the bundled project-x:

npm install ../project-x/dist/bundle.js

✅ Step 4: Use X and Y Components in project-y

Modify project-y/src/App.js:

import React from "react";
import { X, Y } from "project-x";

function App() {
  return (
    <div>
      <h1>Using Components from Project X</h1>
      <X />
      <Y />
    </div>
  );
}

export default App;

🚀 Final Step: Run project-y

Inside project-y, start the React app:

npm start

✅ Now project-y successfully consumes bundled components from project-x! Let me know if you need refinements.

The command npm install ../project-x/dist/bundle.js installs the bundled file locally into node_modules of your project, but it's not a standard npm package installation.

✅ Where Does It Install?

• The bundle.js file is copied into your project's node_modules, but not as a proper package.

• It may not appear in package.json under "dependencies", because it's being installed directly from a path rather than an npm registry.

🗑️ How to Uninstall or Remove It Completely?

Since it's not a registered npm package, follow these steps:

1️⃣ Remove the Installed bundle.js

Manually delete the entry from node_modules:

rm -rf node_modules/project-x

2️⃣ Clean node_modules and package-lock.json

Run:

rm -rf node_modules package-lock.json
npm install

This reinstalls all dependencies without the bundle.js.

3️⃣ Check package.json

Make sure project-x is not listed in "dependencies". If it is, remove the entry and save the file.

🚀 Alternative: Use Local Package Instead

Instead of installing bundle.js directly, package project-x as a proper npm package: 1️⃣ In project-x, run:

npm init -y

2️⃣ Link it:

npm link

3️⃣ In project-y, run:

npm link project-x

This way, project-x behaves like a real npm package and can be installed/uninstalled properly.