wired-elements-react
wired-elements-react copied to clipboard
Doesn't work with react app project built with typescript support
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.
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.