Could not find a declaration file but the code works about react

[ScarpMetal]

@slack2450 @Ariaspect I believe main.d.ts is included in the next release, but until then, if you don't want to switch your module resolution to node, you can add these lines to your tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@p5-wrapper/react": [
        "node_modules/@p5-wrapper/react",
        "node_modules/@p5-wrapper/react/dist/component/main.d.ts"
      ],
    },
  }
}

[jamesrweb]

I will try to look into this one ASAP, I've honestly never seen this error before and I wonder if it's a change in vite itself somehow because the last release had no deployment issues and worked in both vite and next testing.

None of my own projects show this issue also but I will check it because this is a major issue if it's really like this.

I'm on it 🫡

[jamesrweb]

I can't seem to reproduce this, can you provide your node version, package manager version and any other debug logs you may have available?

[jhrtn]

Just experienced this issue as well when trying out the next.js version.

Seems changing "moduleResolution": "node16" to "moduleResolution": "node" in tsconfig.json turns off the error.

Related to this perhaps? microsoft/TypeScript#52363

Node: 18.12.0
NPM: 9.8.1
Typescript: 4.3.2

[jamesrweb]

@jhrtn so you think its a next js issue then? I don't see the issue when I try myself and so I assume this library is working as it should, all it does is take the @p5-wrapper/react library and rewrap it into a next dynamic component anyway, WDYT?

[jamesrweb]

Closing due to inactivity and the solution provided in #268 (comment).

[slack2450]

I seem to get this issue with "moduleResolution": "bundler", Which is the default when creating a new Vite React app

It also seems to break typing for p5:

import { P5CanvasInstance, ReactP5Wrapper } from "@p5-wrapper/react";

function sketch(p5: P5CanvasInstance) {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
  };
}

function App() {

  return (
    <>
      <ReactP5Wrapper sketch={sketch} />
    </>
  )
}

export default App

[slack2450]

This comment on the issue alluded to a fix:
microsoft/TypeScript#52363 (comment)

On this commit:
https://github.com/gxmari007/vite-plugin-eslint/pull/60/files

The fix appears to do with some weird package.json stuff that I really don't care for:

"exports": {
    ".": {
      "import": {
          "types": "./dist/component/main.d.ts",
          "default": "./dist/component/react.js"
      },
      "require": {
          "types": "./dist/component/main.d.ts",
          "default": "./dist/component/react.umd.cjs"
      }
    }
  },

Hopefully this fixes the issue for anyone 😊

[slack2450]

@jamesrweb Please could you take a look at this and see if it's worth including these changes?

[jamesrweb]

@jamesrweb Please could you take a look at this and see if it's worth including these changes?

@slack2450 Would you like to create a PR for a suggested solution that you have in mind? Happy to review!

If not, I'll check myself as soon as I can but I believe this is a TS / Node / Bundler issue and not a project one AFAICS. Still, if it can help then I'm open to changes so long as they don't break other compilation paths. 😊