Uncaught ReferenceError: React is not defined

Question

Uncaught ReferenceError: React is not defined

jwamsterdam opened this issue 7 years ago · comments

jwamsterdam commented 7 years ago

The default example on Github gives me the following error: Uncaught ReferenceError: React is not defined

jwamsterdam commented 7 years ago

great!

Selva · Answer 1 · Thu Jun 29 2017 18:47:11 GMT+0800 (China Standard Time)

@jwamsterdam

Make sure you've installed react.
If you're using webpack, try using webpack's Provideplugin to autoload the React module. Check https://stackoverflow.com/questions/35341994/uncaught-referenceerror-react-is-not-defined/41951849#41951849

jwamsterdam · Answer 2 · Thu Jun 29 2017 22:02:43 GMT+0800 (China Standard Time)

Hi @selvagsz Thank you. I am including your package in an already compiling react project. I think the include react from 'react', is missing in your package.. could that be the case? I am not sure if I can add ProvidePlugin to my create-react-app project without ejecting it..

Selva · Answer 3 · Thu Jun 29 2017 22:05:07 GMT+0800 (China Standard Time)

Can you check replacing your import with import React, { Component } from 'react'; in the example from readme ?

Selva · Answer 4 · Thu Jun 29 2017 22:17:45 GMT+0800 (China Standard Time)

@jwamsterdam Think I was able to reproduce the issue with CRA. Haven't tested the pkg with CRA before. Fixing it

jwamsterdam · Answer 5 · Thu Jun 29 2017 22:50:45 GMT+0800 (China Standard Time)

Hi @selvagsz while you are working on CRA, I also get this warning ;-)

bundle.js:11711 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

Selva · Answer 6 · Thu Jun 29 2017 23:02:40 GMT+0800 (China Standard Time)

Fixed the import issue & published 1.0.0-beta.5. Do check & lmk

Reg propTypes warning, had that in my todos. Have created new issue for it now #3

jwamsterdam · Answer 7 · Thu Jun 29 2017 23:06:33 GMT+0800 (China Standard Time)

Great, it is building!

jwamsterdam · Answer 8 · Thu Jun 29 2017 23:08:27 GMT+0800 (China Standard Time)

needs some more debugging, but until now, I dont see the component rendered to the frontend.. keep you posted..

jwamsterdam · Answer 9 · Thu Jun 29 2017 23:11:16 GMT+0800 (China Standard Time)

The following gets rendered to my DOM, when I use the code example on your page..

<div class="PowerSelect undefined " tabindex="0"><div class="PowerSelect__Trigger"><span class="PowerSelect__TriggerLabel"><span class="PowerSelect__Placeholder"></span></span><span class="PowerSelect__TriggerStatus"></span></div></div>

So it will not result in any visual component displayed..

Selva · Answer 10 · Thu Jun 29 2017 23:11:48 GMT+0800 (China Standard Time)

@jwamsterdam Import the CSS in your bundle import 'react-power-select/dist/react-power-select.css'. I've just updated the readme

jwamsterdam · Answer 11 · Thu Jun 29 2017 23:12:30 GMT+0800 (China Standard Time)

Great, works!

jwamsterdam · Answer 12 · Fri Jun 30 2017 01:59:51 GMT+0800 (China Standard Time)

One question though, does your package (in my case the type ahead component) not work with a value property to pass the value of the selected field to react?

Selva · Answer 13 · Fri Jun 30 2017 02:13:46 GMT+0800 (China Standard Time)

You can use selected prop. Have a look at the example https://github.com/selvagsz/react-power-select/blob/master/docs/app/Demos/TypeAhead/ArrayOfObjectsDemo.js#L27

jwamsterdam · Answer 14 · Fri Jun 30 2017 02:18:09 GMT+0800 (China Standard Time)

Thnx, works like a charm!