Error: Cannot find module './ILI9341-element' or its corresponding type declarations

[Sharvin26]

Hello I am trying to run wokwi elements in my local machine and I get the following error:

> rimraf dist && tsc --sourceMap false && tsc -m esnext --outDir dist/esm --sourceMap false && rollup -c rollup.config.js && terser -c -m -o dist/wokwi-elements.bundle.min.js dist/wokwi-elements.bundle.js

src/react-types.ts:45:32 - error TS2307: Cannot find module './ILI9341-element' or its corresponding type declarations.

45 import { ILI9341Element } from './ILI9341-element';

Steps to reproduce:

1. Cloned the repo using: git clone git@github.com:wokwi/wokwi-elements.git
2. Installed the dependencies using npm i

Here I get the error mentioned above.

System Configuration:

• OS: Linux Mint 20.2 Cinnamon
• Cinnamon version: 5.0.4
• NodeJS version: 14.7.6
• Npm version: 6.14.15

[urish]

Thanks for reporting! Should be fixed now, can you please give it another go?

[Sharvin26]

Thanks for fixing it. Now it's working on repo but when I use npm package I get following error:

node_modules/@wokwi/elements/dist/esm/index.d.ts:46:32 - error TS2307: Cannot find module './ili9341-element' or its corresponding type declarations.

46 export { ILI9341Element } from './ili9341-element';
                                  ~~~~~~~~~~~~~~~~~~~

node_modules/@wokwi/elements/dist/esm/react-types.d.ts:1:23 - error TS2688: Cannot find type definition file for 'react'.

1 /// <reference types="react" />
                        ~~~~~

node_modules/@wokwi/elements/dist/esm/react-types.d.ts:44:45 - error TS2503: Cannot find namespace 'React'.

44 declare type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
                                              ~~~~~

NPM package is "@wokwi/elements": "^0.50.0"

Package I am using from is https://www.npmjs.com/package/@wokwi/elements

I have used command npm i @wokwi/elements to install the package.

The project is created using typescript

[urish]

For the last two errors, either:

1. npm i @types/react

2. or - - edit tsconfig.json to ignore library errors:

   {
       "compilerOptions": {
           "skipLibCheck": true,
           ...
       },
       ...
   }
   

As for the first error, let me check and get back to you

[urish]

Uploaded a new version, 0.50.1, that should fix the first error. Can you please check and report?

[Sharvin26]

Tried the npm package it's working properly. For react types error I am using skiplibcheck for now. Thank you for resolving the issue.

[urish]

You are welcome :) What project are you working on?

[Sharvin26]

Actually I came around wokwi playground and was just trying to understand how it works for my own educational purpose.

So i found this library and was trying to utilise it. Then I came accross this bug.

I was wondering for ardunio ( for example mega ) how do you detect that hover event for each individual box ( Like for 13 and if it's clicked ). I found that in Wokwi Elements storbook you have mentioned pin info with x and y axis values for each component. Becuase in the svg there may be a chance that user clicked on 13 but x or y axis might be slightly different. The playground seems a lot interesting and just was trying to understand this for my understanding purpose.

Any way again thank you for such a great library and the help.

[urish]

Thanks for explaining! If you have any questions, I'm here to help. Also, there's a very active community on our discord chat.

[Sharvin26]

Yes it would be great if you could help me understand this:

I was wondering for ardunio ( for example mega ) how do you detect that hover event for each individual box ( Like for 13 and if it's clicked ). I found that in Wokwi Elements storbook you have mentioned pin info with x and y axis values for each component. Becuase in the svg there may be a chance that user clicked on 13 but x or y axis might be slightly different. The playground seems a lot interesting and just was trying to understand this for my understanding purpose.

[urish]

You understood it pretty well - the pinInfo tells the X and Y coordinates of each of the pins, in relation to the top-left corner of the SVG. The coordinates are HTML coordinates, so they are unaffected by the SVG coordinate system.

If you are interested, you can find here an early version of the code that draws the wires between the pins, based on their pinInfo coordinates:

https://codesandbox.io/s/uve1b?file=/src/index.ts:9225-9280

Note: it's pretty messy piece of code!