search

antvis / G6VP

G6VP is an online visual analysis tool for graphs and a low-code platform for building graph applications.
https://insight.antv.antgroup.com
Apache License 2.0
794 stars 110 forks source link

React CRA Webpack build error #370

Closed RackweLLizm closed 1 year ago

RackweLLizm commented 1 year ago

As of today, I have upgraded all libraries of G6VP to the latest versions and I am getting the error below. @pomelo-nwu 

ERROR in ./node_modules/@antv/gi-assets-scene/node_modules/@antv/gi-sdk/es/index.js 9:53-60
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/Component.js 50:0-37 53:19-37
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/index.js 1:0-36 7:13-22
 @ ./node_modules/@antv/gi-assets-scene/es/index.js 1:0-38 8:14-24
 @ ./src/components/GraphinSonuc/Sonuc.tsx 12:0-57 50:28-54
 @ ./src/pages/User/SonucPage.tsx 5:0-56 8:30-35
 @ ./src/index.tsx 21:0-47 143:55-64 160:55-64

ERROR in ./node_modules/@antv/gi-assets-scene/node_modules/@antv/gi-sdk/es/index.js 29:0-38
Should not import the named export 'version' (reexported as 'version') from default-exporting module (only default export is available soon)
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/Component.js 50:0-37 53:19-37
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/index.js 1:0-36 7:13-22
 @ ./node_modules/@antv/gi-assets-scene/es/index.js 1:0-38 8:14-24
 @ ./src/components/GraphinSonuc/Sonuc.tsx 12:0-57 50:28-54
 @ ./src/pages/User/SonucPage.tsx 5:0-56 8:30-35
 @ ./src/index.tsx 21:0-47 143:55-64 160:55-64

ERROR in ./node_modules/three-render-objects/dist/three-render-objects.mjs 132:18-32
export 'SRGBColorSpace' (imported as 'SRGBColorSpace') was not found in 'three' (possible exports: ACESFilmicToneMapping, AddEquation, AddOperation, AdditiveAnimationBlendMode, AdditiveBlending, AlphaFormat, AlwaysDepth, AlwaysStencilFunc, AmbientLight, AmbientLightProbe, AnimationClip, AnimationLoader, AnimationMixer, AnimationObjectGroup, AnimationUtils, ArcCurve, ArrayCamera, ArrowHelper, Audio, AudioAnalyser, AudioContext, AudioListener, AudioLoader, AxesHelper, AxisHelper, BackSide, BasicDepthPacking, BasicShadowMap, BinaryTextureLoader, Bone, BooleanKeyframeTrack, BoundingBoxHelper, Box2, Box3, Box3Helper, BoxBufferGeometry, BoxGeometry, BoxHelper, BufferAttribute, BufferGeometry, BufferGeometryLoader, ByteType, Cache, Camera, CameraHelper, CanvasRenderer, CanvasTexture, CatmullRomCurve3, CineonToneMapping, CircleBufferGeometry, CircleGeometry, ClampToEdgeWrapping, Clock, Color, ColorKeyframeTrack, CompressedTexture, CompressedTextureLoader, ConeBufferGeometry, ConeGeometry, CubeCamera, CubeReflectionMapping, CubeRefractionMapping, CubeTexture, CubeTextureLoader, CubeUVReflectionMapping, CubeUVRefractionMapping, CubicBezierCurve, CubicBezierCurve3, CubicInterpolant, CullFaceBack, CullFaceFront, CullFaceFrontBack, CullFaceNone, Curve, CurvePath, CustomBlending, CustomToneMapping, CylinderBufferGeometry, CylinderGeometry, Cylindrical, DataTexture, DataTexture2DArray, DataTexture3D, DataTextureLoader, DataUtils, DecrementStencilOp, DecrementWrapStencilOp, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DepthTexture, DirectionalLight, DirectionalLightHelper, DiscreteInterpolant, DodecahedronBufferGeometry, DodecahedronGeometry, DoubleSide, DstAlphaFactor, DstColorFactor, DynamicBufferAttribute, DynamicCopyUsage, DynamicDrawUsage, DynamicReadUsage, EdgesGeometry, EdgesHelper, EllipseCurve, EqualDepth, EqualStencilFunc, EquirectangularReflectionMapping, EquirectangularRefractionMapping, Euler, EventDispatcher, ExtrudeBufferGeometry, ExtrudeGeometry, FaceColors, FileLoader, FlatShading, Float16BufferAttribute, Float32Attribute, Float32BufferAttribute, Float64Attribute, Float64BufferAttribute, FloatType, Fog, FogExp2, Font, FontLoader, FrontSide, Frustum, GLBufferAttribute, GLSL1, GLSL3, GammaEncoding, GreaterDepth, GreaterEqualDepth, GreaterEqualStencilFunc, GreaterStencilFunc, GridHelper, Group, HalfFloatType, HemisphereLight, HemisphereLightHelper, HemisphereLightProbe, IcosahedronBufferGeometry, IcosahedronGeometry, ImageBitmapLoader, ImageLoader, ImageUtils, ImmediateRenderObject, IncrementStencilOp, IncrementWrapStencilOp, InstancedBufferAttribute, InstancedBufferGeometry, InstancedInterleavedBuffer, InstancedMesh, Int16Attribute, Int16BufferAttribute, Int32Attribute, Int32BufferAttribute, Int8Attribute, Int8BufferAttribute, IntType, InterleavedBuffer, InterleavedBufferAttribute, Interpolant, InterpolateDiscrete, InterpolateLinear, InterpolateSmooth, InvertStencilOp, JSONLoader, KeepStencilOp, KeyframeTrack, LOD, LatheBufferGeometry, LatheGeometry, Layers, LensFlare, LessDepth, LessEqualDepth, LessEqualStencilFunc, LessStencilFunc, Light, LightProbe, Line, Line3, LineBasicMaterial, LineCurve, LineCurve3, LineDashedMaterial, LineLoop, LinePieces, LineSegments, LineStrip, LinearEncoding, LinearFilter, LinearInterpolant, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, LinearToneMapping, Loader, LoaderUtils, LoadingManager, LoopOnce, LoopPingPong, LoopRepeat, LuminanceAlphaFormat, LuminanceFormat, MOUSE, Material, MaterialLoader, Math, MathUtils, Matrix3, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshDistanceMaterial, MeshFaceMaterial, MeshLambertMaterial, MeshMatcapMaterial, MeshNormalMaterial, MeshPhongMaterial, MeshPhysicalMaterial, MeshStandardMaterial, MeshToonMaterial, MinEquation, MirroredRepeatWrapping, MixOperation, MultiMaterial, MultiplyBlending, MultiplyOperation, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, NeverDepth, NeverStencilFunc, NoBlending, NoColors, NoToneMapping, NormalAnimationBlendMode, NormalBlending, NotEqualDepth, NotEqualStencilFunc, NumberKeyframeTrack, Object3D, ObjectLoader, ObjectSpaceNormalMap, OctahedronBufferGeometry, OctahedronGeometry, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, OrthographicCamera, PCFShadowMap, PCFSoftShadowMap, PMREMGenerator, ParametricGeometry, Particle, ParticleBasicMaterial, ParticleSystem, ParticleSystemMaterial, Path, PerspectiveCamera, Plane, PlaneBufferGeometry, PlaneGeometry, PlaneHelper, PointCloud, PointCloudMaterial, PointLight, PointLightHelper, Points, PointsMaterial, PolarGridHelper, PolyhedronBufferGeometry, PolyhedronGeometry, PositionalAudio, PropertyBinding, PropertyMixer, QuadraticBezierCurve, QuadraticBezierCurve3, Quaternion, QuaternionKeyframeTrack, QuaternionLinearInterpolant, REVISION, RGBADepthPacking, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBDEncoding, RGBEEncoding, RGBEFormat, RGBFormat, RGBIntegerFormat, RGBM16Encoding, RGBM7Encoding, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, RawShaderMaterial, Ray, Raycaster, RectAreaLight, RedFormat, RedIntegerFormat, ReinhardToneMapping, RepeatWrapping, ReplaceStencilOp, ReverseSubtractEquation, RingBufferGeometry, RingGeometry, SRGB8_ALPHA8_ASTC_10x10_Format, SRGB8_ALPHA8_ASTC_10x5_Format, SRGB8_ALPHA8_ASTC_10x6_Format, SRGB8_ALPHA8_ASTC_10x8_Format, SRGB8_ALPHA8_ASTC_12x10_Format, SRGB8_ALPHA8_ASTC_12x12_Format, SRGB8_ALPHA8_ASTC_4x4_Format, SRGB8_ALPHA8_ASTC_5x4_Format, SRGB8_ALPHA8_ASTC_5x5_Format, SRGB8_ALPHA8_ASTC_6x5_Format, SRGB8_ALPHA8_ASTC_6x6_Format, SRGB8_ALPHA8_ASTC_8x5_Format, SRGB8_ALPHA8_ASTC_8x6_Format, SRGB8_ALPHA8_ASTC_8x8_Format, Scene, SceneUtils, ShaderChunk, ShaderLib, ShaderMaterial, ShadowMaterial, Shape, ShapeBufferGeometry, ShapeGeometry, ShapePath, ShapeUtils, ShortType, Skeleton, SkeletonHelper, SkinnedMesh, SmoothShading, Sphere, SphereBufferGeometry, SphereGeometry, Spherical, SphericalHarmonics3, SplineCurve, SpotLight, SpotLightHelper, Sprite, SpriteMaterial, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, StaticCopyUsage, StaticDrawUsage, StaticReadUsage, StereoCamera, StreamCopyUsage, StreamDrawUsage, StreamReadUsage, StringKeyframeTrack, SubtractEquation, SubtractiveBlending, TOUCH, TangentSpaceNormalMap, TetrahedronBufferGeometry, TetrahedronGeometry, TextGeometry, Texture, TextureLoader, TorusBufferGeometry, TorusGeometry, TorusKnotBufferGeometry, TorusKnotGeometry, Triangle, TriangleFanDrawMode, TriangleStripDrawMode, TrianglesDrawMode, TubeBufferGeometry, TubeGeometry, UVMapping, Uint16Attribute, Uint16BufferAttribute, Uint32Attribute, Uint32BufferAttribute, Uint8Attribute, Uint8BufferAttribute, Uint8ClampedAttribute, Uint8ClampedBufferAttribute, Uniform, UniformsLib, UniformsUtils, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShort565Type, UnsignedShortType, VSMShadowMap, Vector2, Vector3, Vector4, VectorKeyframeTrack, Vertex, VertexColors, VideoTexture, WebGL1Renderer, WebGLCubeRenderTarget, WebGLMultipleRenderTargets, WebGLMultisampleRenderTarget, WebGLRenderTarget, WebGLRenderTargetCube, WebGLRenderer, WebGLUtils, WireframeGeometry, WireframeHelper, WrapAroundEnding, XHRLoader, ZeroCurvatureEnding, ZeroFactor, ZeroSlopeEnding, ZeroStencilOp, sRGBEncoding)
 @ ./node_modules/3d-force-graph/dist/3d-force-graph.module.js 4:0-54 137:47-65 278:18-36
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/ForceGraph/index.js 50:0-42 131:25-37
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/Component.js 52:0-38 76:50-60
 @ ./node_modules/@antv/gi-assets-scene/es/LargeGraph/index.js 1:0-36 7:13-22
 @ ./node_modules/@antv/gi-assets-scene/es/index.js 1:0-38 8:14-24
 @ ./src/components/GraphinSonuc/Sonuc.tsx 12:0-57 50:28-54
 @ ./src/pages/User/SonucPage.tsx 5:0-56 8:30-35
 @ ./src/index.tsx 21:0-47 143:55-64 160:55-64
pomelo-nwu commented 1 year ago

@RackweLLizm The error should be caused by the scene assets not using the common gi-sdk, because the export version problem in the sdk has been solved : https://github.com/antvis/G6VP/blob/master/packages/gi-sdk/src/index.tsx#L16

It is recommended that you reinstall the dependencies and set pacakges.json

"overrides": { 
"@antv/gi-sdk": "latest"
}

make the sdk globally unique

RackweLLizm commented 1 year ago

@pomelo-nwu

@antv\gi-assets-scene\node_modules\@antv\gi-sdk\es

import { version } from '../package.json';

changed

import version from '../package.json';

import version from '../package.json'; I got rid of the problem when I replaced it with . the issue was the { } parentheses.

I couldn't see the gi-sheetbar in the new version. Am I missing something or did you remove it?

pomelo-nwu commented 1 year ago

@RackweLLizm import version from '../package.json'; This has been solved in G6VP

We have removed Sheetbar and plan to reimplement it. The previous design idea was to implement the container layout through React.createPortal: https://www.yuque.com/antv/gi/ypom6l?translate=en , then we found this way also has many disadvantages, such as multiplelayout container assets may have conflict, so we used the new mechanism, You can refer to the SegementLayout：https://github.com/antvis/G6VP/blob/master/packages/gi-assets-basic/src/components/SegmentedLayout/component.tsx#L54

RackweLLizm commented 1 year ago

@pomelo-nwu I understand The main reason why I wanted to switch to the new version was that when I made a mass selection with the mouse on a canvas with an average of 500 nodes, the selection was shrinking. When I tried it in the new version, the same thing happened again, the stuttering problem continues. HTML and UMD versions don't have this problem. In the NPM version, the problem of mass selection with the mouse is too much. Is there any information or a known bug about this issue?

pomelo-nwu commented 1 year ago

@RackweLLizm It is necessary to see if the versions of Graphin and G6 are correct. Under umd and html, the versions of g6 and graphin are determined

RackweLLizm commented 1 year ago

@pomelo-nwu 

{
  "name": "projev2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@antv/g6": "^4.7.10",
    "@antv/gi-assets-advance": "^2.1.1",
    "@antv/gi-assets-algorithm": "^2.0.0",
    "@antv/gi-assets-basic": "^2.1.1",
    "@antv/gi-assets-scene": "^2.0.0",
    "@antv/gi-sdk": "^2.0.2",
    "@antv/gi-theme-antd": "^0.3.0",
    "@antv/graphin": "^2.7.13",
    "@antv/graphin-components": "^2.4.0",
    "@antv/graphin-icons": "^1.0.0",
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@microsoft/signalr": "^6.0.1",
    "@react-awesome-query-builder/antd": "^6.2.0",
    "@react-leaflet/core": "^1.1.1",
    "@types/styled-components": "^5.1.26",
    "antd": "^4.24.8",
    "axios": "^0.24.0",
    "devextreme": "^23.1.3",
    "devextreme-aspnet-data-nojquery": "^2.9.2",
    "devextreme-react": "^23.1.3",
    "exceljs": "^4.3.0",
    "file-saver-es": "^2.0.5",
    "font-awesome": "^4.7.0",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.9.3",
    "leaflet-css": "^0.1.0",
    "leaflet-draw-locales": "^1.2.2",
    "leaflet-easyprint": "^2.1.9",
    "leaflet-mouse-position": "^1.2.0",
    "leaflet.markercluster": "^1.5.3",
    "leaflet.offline": "^3.0.0",
    "localforage": "^1.10.0",
    "mobx": "^6.3.8",
    "mobx-react-lite": "^3.2.2",
    "prunecluster-exportable": "^1.0.0",
    "react": "^17.0.2",
    "react-contextmenu": "^2.14.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^17.0.2",
    "react-full-screen": "^1.1.1",
    "react-hot-toast": "^2.2.0",
    "react-html-parser": "^2.0.2",
    "react-leaflet": "^3.2.5",
    "react-leaflet-draw": "^0.20.4",
    "react-leaflet-fullscreen-plugin": "^1.0.1",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-pro-sidebar": "^1.0.0",
    "react-router-dom": "^6.11.2",
    "react-scripts": "5.0.0",
    "source-map-loader": "^4.0.1",
    "styled-components": "^5.3.10",
    "typescript": "^4.4.4",
    "ulid": "^2.3.0",
    "use-immer": "^0.8.1",
    "uuid": "^8.3.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts --max_old_space_size=14096 start",
    "build": "react-scripts --max_old_space_size=14096 build",
    "serve": "serve build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/file-saver-es": "^2.0.1",
    "@types/leaflet": "^1.9.3",
    "@types/leaflet-draw": "^1.0.3",
    "@types/node": "^17.0.29",
    "@types/react": "^17.0.52",
    "@types/react-dom": "^18.0.10",
    "@types/react-html-parser": "^2.0.2",
    "@types/react-leaflet-fullscreen-plugin": "^1.0.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/uuid": "^8.3.4"
  },
  "engines": {
    "node": "17.x"
  }
}

My package.json file is like this now. To test, I installed the latest versions and checked, the result was still the same for me and the stuttering problem persisted. I went back to my old versions because I made various changes to the library codes. When G6 DEMO version is combined with G6VP and as you said, 2000 nodes and above support is added, I will install the latest versions from scratch.

Do you have any predictions for the package.json to shrink as it is now?

pomelo-nwu commented 1 year ago

@RackweLLizm We have added internationalization for G6VP. Currently, it is all machine translation, and we will proofread it manually later image

RackweLLizm commented 1 year ago

@pomelo-nwu Thank you. I used to use https://graphinsight.antgroup.com/#/workspace?type=case website I guess it is not updated anymore

https://insight.antv.antgroup.com/#/open/assets-list?assetKey=StyleSetting

All innovations are posted here. Do I understand correctly, should I not use https://graphinsight.antgroup.com anymore?

pomelo-nwu commented 1 year ago

@RackweLLizm yes，we are currently working on version 2.x 1.x site ：https://graphinsight.antgroup.com 2.x site ：https://insight.antv.antgroup.com