search

sim51 / react-sigma

Sigma React component
https://sim51.github.io/react-sigma/
MIT License
172 stars 27 forks source link

Declaration File #54

Closed JRyGithub closed 11 months ago

JRyGithub commented 1 year ago

Example bug report

Could not find a declaration file for module '@react-sigma/core'. '/home/user/personal/network-graph-test/node_modules/@react-sigma/core/lib/react-sigma_core.esm.min.js' implicitly has an 'any' type.
  There are types at '/home/user/personal/network-graph-test/node_modules/@react-sigma/core/lib/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@react-sigma/core' library may need to update its package.json or typings.

@react-sigma/core 3.4.0 Sigma.js version:2.4.0 Graphology version: 0.25.1 Operating System: Windows 11/WSL2 Web browser: Chrome

Steps to reproduce

Just ran normal installation steps. Just have no typing's. Unsure if this intended.

sim51 commented 1 year ago

Is there a way for me to check the project ?

I use the lib in many projects that I have initialized with CRA, and I have no issue with the types. Moreover types are well defined in the package.json https://github.com/sim51/react-sigma/blob/main/project/packages/layout-core/package.json#L23 , but I don't know if it's enough or not.

Can you share your tsconfig file ? What is your NPM version ?

Thanks

JRyGithub commented 1 year ago

Yep I've made a mini playground for myself just seeing how it can handle different sized datasets etc. https://github.com/JRyGithub/React-Sigma-Graphology-Playground

npm: v8.19.3 node: v18.12

You can see the configs in the repo I've linked but for time saving: tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Could be a interaction with Vite.

Thanks

sim51 commented 1 year ago

The issue comes from TS 5.0 and its new moduleResolution : bundler. But, by changing my package.json export section, it works : 

"exports": {
  ".":  { "default": "./lib/react-sigma_core.esm.min.js", "types": "./lib/index.d.ts"},
}
JRyGithub commented 1 year ago

In my own package.json? 

{
  "name": "network-graph-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-sigma/core": "^3.4.0",
    "@react-sigma/layout-circular": "^3.4.0",
    "@react-sigma/layout-forceatlas2": "^3.4.0",
    "graphology": "^0.25.1",
    "graphology-layout-force": "^0.2.4",
    "graphology-types": "^0.24.7",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sigma": "^2.4.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  },
  "exports": {
    ".":  { 
      "default": "./lib/react-sigma_core.esm.min.js", 
      "types": "./lib/index.d.ts"
    }
  }
}

Even directly setting seems to not work.

sim51 commented 1 year ago

nop, in the package.json of react-sigma.

sim51 commented 1 year ago

I just did a new release with the modification. Can you try again with the version 3.4.1 and see if it works ?

Thanks

JRyGithub commented 1 year ago

Manually making the change seemed to fix the issue, so ported over that test build to the main project I was testing it for and install the new v3.4.1. Typing issues are all correct now.

Though now the project won't build due to (Side note test project is working perfectly):

[ERROR] Could not resolve "graphology-layout/circular"

    node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js:1:13:
      1 │ import o from"graphology-layout/circular";import{useLayoutFactory as r}from"@react-sigma/layout-core";const a=r(o,{});export...
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout/circular" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "graphology-layout-forceatlas2"

    node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:13:
      1 │ import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as...
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout-forceatlas2" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "graphology-layout-forceatlas2/worker"

    node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:171:
      1 │ ...om"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterat...
        ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout-forceatlas2/worker" as external to exclude it from the
  bundle, which will remove this error.

/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1575
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 3 errors:
node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js:1:13: ERROR: Could not resolve "graphology-layout/circular"
node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:13: ERROR: Could not resolve "graphology-layout-forceatlas2"
node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:171: ERROR: Could not resolve "graphology-layout-forceatlas2/worker"
    at failureErrorWithLog (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1575:15)
    at /home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1033:28
    at runOnEndCallbacks (/home/usery/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1447:61)
    at buildResponseToResult (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1031:7)
    at /home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1143:14
    at responseCallbacks.<computed> (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:680:9)
    at handleIncomingPacket (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:735:9)
    at Socket.readFromStdout (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:656:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 13,
        file: 'node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js',
        length: 28,
        line: 1,
        lineText: 'import o from"graphology-layout/circular";import{useLayoutFactory as r}from"@react-sigma/layout-core";const a=r(o,{});export{a as useLayoutCircular};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout/circular" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout/circular"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 13,
        file: 'node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js',
        length: 31,
        line: 1,
        lineText: 'import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as r}from"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterations:100}),u=a(e),c=({id:o,className:t,style:a,settings:e={},autoRunFor:l,children:c,labels:y})=>{const i={id:o,className:t,style:a,settings:e,autoRunFor:l,labels:y,layout:u};return s.createElement(r,Object.assign({},i),c)};export{c as LayoutForceAtlas2Control,l as useLayoutForceAtlas2,u as useWorkerLayoutForceAtlas2};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout-forceatlas2" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout-forceatlas2"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 171,
        file: 'node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js',
        length: 38,
        line: 1,
        lineText: 'import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as r}from"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterations:100}),u=a(e),c=({id:o,className:t,style:a,settings:e={},autoRunFor:l,children:c,labels:y})=>{const i={id:o,className:t,style:a,settings:e,autoRunFor:l,labels:y,layout:u};return s.createElement(r,Object.assign({},i),c)};export{c as LayoutForceAtlas2Control,l as useLayoutForceAtlas2,u as useWorkerLayoutForceAtlas2};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout-forceatlas2/worker" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout-forceatlas2/worker"'
    }
  ],
  warnings: []
}
JRyGithub commented 1 year ago

Manually making the change seemed to fix the issue, so ported over that test build to the main project I was testing it for and install the new v3.4.1. Typing issues are all correct now.

Though now the project won't build due to (Side note test project is working perfectly):

[ERROR] Could not resolve "graphology-layout/circular"

    node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js:1:13:
      1 │ import o from"graphology-layout/circular";import{useLayoutFactory as r}from"@react-sigma/layout-core";const a=r(o,{});export...
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout/circular" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "graphology-layout-forceatlas2"

    node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:13:
      1 │ import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as...
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout-forceatlas2" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "graphology-layout-forceatlas2/worker"

    node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:171:
      1 │ ...om"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterat...
        ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "graphology-layout-forceatlas2/worker" as external to exclude it from the
  bundle, which will remove this error.

/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1575
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 3 errors:
node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js:1:13: ERROR: Could not resolve "graphology-layout/circular"
node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:13: ERROR: Could not resolve "graphology-layout-forceatlas2"
node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js:1:171: ERROR: Could not resolve "graphology-layout-forceatlas2/worker"
    at failureErrorWithLog (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1575:15)
    at /home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1033:28
    at runOnEndCallbacks (/home/usery/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1447:61)
    at buildResponseToResult (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1031:7)
    at /home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:1143:14
    at responseCallbacks.<computed> (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:680:9)
    at handleIncomingPacket (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:735:9)
    at Socket.readFromStdout (/home/user/projects/smol-cls-mmps-web/ui/node_modules/esbuild/lib/main.js:656:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 13,
        file: 'node_modules/@react-sigma/layout-circular/lib/react-sigma_layout-circular.esm.min.js',
        length: 28,
        line: 1,
        lineText: 'import o from"graphology-layout/circular";import{useLayoutFactory as r}from"@react-sigma/layout-core";const a=r(o,{});export{a as useLayoutCircular};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout/circular" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout/circular"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 13,
        file: 'node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js',
        length: 31,
        line: 1,
        lineText: 'import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as r}from"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterations:100}),u=a(e),c=({id:o,className:t,style:a,settings:e={},autoRunFor:l,children:c,labels:y})=>{const i={id:o,className:t,style:a,settings:e,autoRunFor:l,labels:y,layout:u};return s.createElement(r,Object.assign({},i),c)};export{c as LayoutForceAtlas2Control,l as useLayoutForceAtlas2,u as useWorkerLayoutForceAtlas2};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout-forceatlas2" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout-forceatlas2"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 171,
        file: 'node_modules/@react-sigma/layout-forceatlas2/lib/react-sigma_layout-forceatlas2.esm.min.js',
        length: 38,
        line: 1,
        lineText: 'import o from"graphology-layout-forceatlas2";import{useLayoutFactory as t,useWorkerLayoutFactory as a,WorkerLayoutControl as r}from"@react-sigma/layout-core";import e from"graphology-layout-forceatlas2/worker";import s from"react";const l=t(o,{iterations:100}),u=a(e),c=({id:o,className:t,style:a,settings:e={},autoRunFor:l,children:c,labels:y})=>{const i={id:o,className:t,style:a,settings:e,autoRunFor:l,labels:y,layout:u};return s.createElement(r,Object.assign({},i),c)};export{c as LayoutForceAtlas2Control,l as useLayoutForceAtlas2,u as useWorkerLayoutForceAtlas2};',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "graphology-layout-forceatlas2/worker" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "graphology-layout-forceatlas2/worker"'
    }
  ],
  warnings: []
}

Seems to fix this I had to npm install graphology-layout

sim51 commented 1 year ago

it seems that you have to install all the peer dependencies to avoid that.