wired-elements-react icon indicating copy to clipboard operation
wired-elements-react copied to clipboard

Doesn't work with react app project built with typescript support

Open raynor85 opened this issue 3 years ago • 1 comments

I've tried to use the plugin in a project created with the following command:

yarn create react-app my-app --template typescript

After running yarn start, webpack dev server fails building the project throwing an error:

Module not found: Error: Can't resolve './WiredButton' in '/Users/myuser/Documents/my-app/node_modules/wired-elements-react/lib'
Did you mean 'WiredButton.js'?
BREAKING CHANGE: The request './WiredButton' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

raynor85 avatar Dec 23 '21 01:12 raynor85

I got around this specific error by importing right from each js file

import { WiredCard } from "wired-elements-react/lib/WiredCard";

But I'm still getting this error when trying to run it

webpack compiled with 1 warning
ERROR in src/App.tsx:72:8
TS2746: This JSX tag's 'children' prop expects a single child of type '(HTMLCollection & 
(string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null)) | undefined', 
but multiple children were provided.
    70 |   return (
    71 |     <div className="App">
  > 72 |       <WiredCard>
       |        ^^^^^^^^^
    73 |         <p>Game</p>
    74 |         <p>{message.gameId}</p>
    75 |       </WiredCard>

But after wrapping the two <p> tags in a <React.Fragment> I'm getting this error instead

Type 'ReactElement<any, any>' is not assignable to type 'HTMLCollection & ReactPortal'.
Type 'ReactElement<any, any>' is missing the following properties from type 
'HTMLCollection': namedItem, length, item, [Symbol.iterator]

I'm going to go back to using "wired-elements as globals for now. This comment helped me.

TylerSustare avatar Jun 13 '22 14:06 TylerSustare