rough.js and Typescript

[puigfp]

Hi!

First of all, thanks for creating this package 😄

I had some trouble getting rough.js to work on a create-react-app / Typescript setup.

When importing rough.js using import rough from "roughjs/bundled/rough.esm.js", I got this error:

Could not find a declaration file for module 'roughjs/bundled/rough.esm.js'. '/Users/francisco/dev/puzzle-game/node_modules/roughjs/bundled/rough.esm.js' implicitly has an 'any' type.
Try npm install @types/roughjs if it exists or add a new declaration (.d.ts) file containing declare module 'roughjs/bundled/rough.esm.js'; TS7016

I'm a beginner with TypeScript, so I'm not sure what would be the best solution to fix that, but it seems that adding the following file solves the issue.

roughjs/bundled/rough.esm.d.ts

declare module "roughjs/bundled/rough.esm.js" {
  import rough from "roughjs/bin/rough";
  export default rough;
}

I'm assuming similar files could be created for the other bundles as well.

Would you be open to a PR for this change ? or do you think there is a better way of solving the issue?

[pshihn]

The types field is set in the package.json file.

Can you share a sample project setup where you are experiencing this? Thanks

[puigfp]

Here is a sample project setup: https://github.com/puigfp/roughjs-types-issue

I created it using npx create-react-app roughjs-types-issue --template typescript and then added roughjs to the dependencies.

I can see the types field in the package.json, maybe it's taken into account only when importing using import rough from "roughjs";, not using import rough from "roughjs/bundled/rough.esm.js" ?

[pshihn]

Perhaps. It may depend on the tsconfig set up for you by create-react-app.
Here's a vanilla project: https://github.com/pshihn/roughjs-typescript-example

You may be right as it depends on how you import it. Is
import rough from "roughjs" not working for you? Because the module file is correctly set in package.json.

I will try your sample repository later today.

[puigfp]

When using import rough from "roughjs";, the types get detected correctly by my editor (VS Code), but I get this error when I start a development server with npm run start:

TypeError: roughjs__WEBPACK_IMPORTED_MODULE_3___default.a.svg is not a function

[pshihn]

Argh it always comes down to Webpack! haha
Okay, I will take a look later today.

[puigfp]

Thanks !

[pshihn]

I looked at your project, and this should work:

import rough from "roughjs/bin/rough";

[puigfp]

Yes indeed it works. Thank you.

[steveruizok]

I looked at your project, and this should work:

import rough from "roughjs/bin/rough";

Would love to see this in the docs!