Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
raynor85 opened this issue Dec 23, 2021 · 1 comment
Open

Comments

@raynor85
Copy link

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 raynor85 changed the title Doesn't work with react app project build with typescript support Doesn't work with react app project built with typescript support Dec 23, 2021
@TylerSustare
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants