Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not drag canvas after build by vite #480

Open
BQXBQX opened this issue Aug 25, 2024 · 0 comments
Open

Can not drag canvas after build by vite #480

BQXBQX opened this issue Aug 25, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@BQXBQX
Copy link
Collaborator

BQXBQX commented Aug 25, 2024

Issue : can not move canvas after build by vite

After calling the studio-graph-editor package packaged with vite, the canvas cannot be dragged and the newly added nodes are not visible. However, when exporting the image, the added nodes are on the image. There is no problem using the component index.tsx directly without vite packaging

vite config

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(({ mode }) => {
  if (mode === 'production') {
    return {
      build: {
        lib: {
          entry: path.resolve(__dirname, 'src/index.tsx'),
          name: '@graphscope/studio-graph-editor',
          fileName: format => `studio-graph-editor.${format}.js`,
        },
        outDir: './dist',
        rollupOptions: {
          external: ['react', 'react-dom'],
        },
      },
      resolve: {
        dedupe: ['react', 'react-dom'],
      },
      plugins: [react()],
    };
  } else {
    return {
      root: './',
      server: {
        port: 8000,
        open: '/',
      },
      build: {
        outDir: './dist',
      },
      plugins: [react()],
    };
  }
});

package.json

{
  "name": "@graphscope/studio-graph-editor",
  "version": "0.1.0",
  "description": "",
  "main": "./dist/studio-graph-editor.umd.js",
  "module": "./dist/studio-graph-editor.es.js",
  "types": "./dist/index.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/GraphScope/portal.git"
  },
  "files": [
    "es",
    "lib",
    "dist"
  ],
  "scripts": {
    "start": "vite dev",
    "build": "vite build && tsc"
  },
  "peerDependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "dependencies": {
    "@graphscope/studio-components": "workspace:*",
    "antd": "^5.17.0",
    "d3-force": "latest",
    "dagre": "latest",
    "html-to-image": "^1.11.11",
    "lodash": "^4.17.21",
    "react-intl": "^6.6.1",
    "reactflow": "latest",
    "rxjs": "^7.8.1",
    "uuid": "^9.0.1",
    "valtio": "2.0.0-rc.1",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@types/d3-force": "latest",
    "@types/lodash": "^4.14.202",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.12"
  },
  "author": "",
  "license": "ISC"
}

after changing module and main to ./src/index.tsx, no problem and normal operation.

@BQXBQX BQXBQX changed the title can not move canvas after build by vite Can not drag canvas after build by vite Aug 25, 2024
@pomelo-nwu pomelo-nwu added the bug Something isn't working label Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants