liuliu-dev / CommitGraph

An interactive React component for visualizing commit log graphs with support for pagination.
MIT License
15 stars 1 forks source link

With vite it's give below error. not work with Vite typescript template #266

Open BhavinShiroya opened 1 day ago

BhavinShiroya commented 1 day ago

Steps to reproduce 1) take latest vite tempalte 2) integration commit-graph package. 3) It's stopped working, and the error below is given.

Screenshot 2024-11-27 at 11 32 28 AM

liuliu-dev commented 9 hours ago

I could not reproduce the issue. Here are the steps I followed:

  1. create a vite react typescript template:
    npm create vite@latest my-vite-project --template react-ts
  2. In vite.config.ts, I added the following:
    
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({ plugins: [react(), nodePolyfills()], define: { "process.env": {}, // Mock environment variables "process.argv": [], // Mock an empty argument list "process.platform": '"browser"', // Mock platform as 'browser' }, });

3. Installed the package and render the graph using some sample data in App.tsx:
 ```tsx
import { CommitGraph } from 'commit-graph';
import './App.css'

export const twoBranches = [
 {
    commit: { author: { name: "liuliu", date: 1677867843000 }, message: "Merge pull request #3 from main" },
    parents: [{ sha: "4ttu5nqqifptnuqo6bk1hps3lu484jnu" }, { sha: "qvsacjqo5q72mcg512ahhqj7hjmtmec0" }],
    sha: "euu20mq1b1d9ct2grotrka8jogsh6apl",
  },
  // Additional commits...
];

function App() {

  return (
    <div>
      <h1>Commit Graph Example</h1>
      <CommitGraph commits={twoBranches} branchHeads={[]}/>
    </div>
  );
}

export default App
  1. run the project:
    npm run dev

The commit graph renders as expected without any errors.

The configuration mocks process properties to make the package compatible with the browser environment. If you're still facing issues, ensure all dependencies are up to date and try clearing your node_modules and .vite cache.

rm -rf node_modules .vite
npm install
npm run dev