React.createElement: type is invalid #193
Comments
|
From the error it looks like something weird is going on when ReactPlayer is being imported. Have you tried logging out import * as React from "react";
import { render } from "react-dom";
import "../public/css/main.css";
import ReactPlayer from "react-player";
console.log(ReactPlayer); // Does this log undefined?
render(
(
<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
),
document.querySelector("#app")
);Next thing I would do is check that ReactPlayer installed correctly, ie that |
|
Thanks for your fast support. I did not check against undefined earlier, because I was sure I had installed it correctly. And it is installed (correctly). logs logs If I try to create a new instance of the player with JSX (e.g.
I took a look at the typings there (line 42) is not constructor (nor in your JavaScript code). In TypeScript specification at 8.3, you can read a constructor is optional. So... I am not sure if this could be an entry points for further thoughts? I am new in React development, so I am sorry, that investigation of stacks like this are still hard for me. |
|
Hey @jankarres, I've had a quick look around and it might be worth trying the I think the problem is related to the fact that ReactPlayer gets compiled into ES5 in |
|
@cookpete Thanks for your investigation. It tinkered with it, but this was not the solution. Anyway, it was a good point to look for a reference to the issue. The issue seems to be discussed at ES6 Modules default exports interop with CommonJS #2719. It seems to be a ES6 backwards compatibility issue. You can read the issue for details. If figured out a solution, which works, but I am not sure if this is an appropriate solution for your Babel workflow, because this lines of code are generated by Babel. lib/ReactPlayer.js end of file (line 227)
replace with
The function _extends (wraps the export intro an es_modules definition) is a function of the ES6 classes standard, which is supported by all modern browsers except of IE 11 (see caniuse.com). But, this incompatibility with IE 11 should also not an issue, because with React you use packaging bundler like webpack. These bundler compress the code and stick it intro one file, which should follow in replacing export statements. Do you see a possibility to replace this line of code in the project or configure Babel to solve this issues? Attachment: Demo projects in TypeScript and JavaScript with replaced line. Run |
|
Ok, a bit more digging and it looks like the problem is that we use the
From mui/material-ui#3594 It's worth building without that plugin and seeing if it helps? The plugin was added when I added support for a bower build, so we may be able to remove it from the babel config file and just use the plugin for the bower build only. |
|
Yes, I think it would be worth, because using React Player with TypeScript is currently not possible at all. Removing lib/ReactPlayer.js end of file (line 227), as described, works for me.
I have tried to remove the plugin at my own to contribute a pull request (see commit), but if I fetch via npm I do not get a lib/ folder (nor an error). So I would be pleased if you could try to remove the plugin. Thanks a lot for your time! |
Do you mean fetch via git? You will need to either manually run |
|
I mean via npm (as package manager) fetching the git repo. (not frpm npmjs). Anyway, it tested it and it works. Thanks for your support! It should works for both JavaScript and TypeScript. I would be pleased, if you would accept the pull request. |
|
@cookpete @jankarres I'm also facing this issue, can you please tell me what the workaround? Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: symbol. Check the render method of |
|
Same issue as @octocat01, the code: import React from "react";
import ReactPlayer from 'react-player';
export default class myComponent extends React.Component {
render() {
return (
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
)
}
}Gives message: This is on: |
|
Open a new issue, perhaps with an example repo? It's hard to debug an issue I can't reproduce. |
I would love to use your react-player package with its well documented API, but I get an issue by just using your example. I write my code in TypeScript 2.x compiled to ES5. So the code looks a little bit different to normal JavaScript, but you provide an index.d.ts, so I think it should work with Typescript, too.
Integration of your player (simplified):
Stacktrack:
Do you have any idea what is wrong here? Thanks!
The text was updated successfully, but these errors were encountered: