Declaration File #54

JRyGithub · 2023-06-27T14:28:41Z

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.

The text was updated successfully, but these errors were encountered:

sim51 · 2023-06-27T15:36:52Z

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 · 2023-06-28T08:00:51Z

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 · 2023-06-28T08:57:10Z

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 · 2023-06-28T09:53:34Z

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 · 2023-06-28T10:16:29Z

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

sim51 · 2023-06-28T14:41:50Z

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 · 2023-06-28T15:02:56Z

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 · 2023-06-28T15:13:05Z

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 · 2023-06-28T21:14:12Z

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

JRyGithub added the bug Something isn't working label Jun 27, 2023

sim51 closed this as completed in 67940c8 Jun 28, 2023

sim51 reopened this Jun 28, 2023

sim51 closed this as completed Oct 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Declaration File #54

Declaration File #54

JRyGithub commented Jun 27, 2023

sim51 commented Jun 27, 2023

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023 •

edited

Loading

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023

sim51 commented Jun 28, 2023

JRyGithub commented Jun 28, 2023 •

edited

Loading

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023

Declaration File #54

Declaration File #54

Comments

JRyGithub commented Jun 27, 2023

Example bug report

Steps to reproduce

sim51 commented Jun 27, 2023

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023 • edited Loading

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023

sim51 commented Jun 28, 2023

JRyGithub commented Jun 28, 2023 • edited Loading

JRyGithub commented Jun 28, 2023

sim51 commented Jun 28, 2023

sim51 commented Jun 28, 2023 •

edited

Loading

JRyGithub commented Jun 28, 2023 •

edited

Loading