0

While trying to kickstart my app I'm getting that both React or ReactDOM are undefined. This is when using the es2015 import syntax, preprocessed with babel. Using the regular require it loads fine. The snippet is like this:

import $ from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import SearchForm from './utils/components.jsx';
$(function () {
    var form = $('#search-form');
    ReactDOM.render(<SearchForm />, form.get(0)); // react is undefined. raises InvariantViolation
})

Actual traceback reads like this:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Which looks like a react error, but using a breakpoint in the offending line (before ReactDOM) and trying to evaluate both React or ReactDOM it returns undefined, it's not the same for $ or any other import in the same module.

What gives?

tutuca
  • 3,444
  • 6
  • 32
  • 54
  • It's probably undefined in the console due to sourcemaps not translating the name correctly. What's the content of "./utils/components.jsx"? Seems like it doesn't export a component. – Matt Zeunert Feb 05 '16 at 21:39
  • Check whether you export default the component is components.jsx. Since you name the file components.jsx I assume you have multiple components in the file. If that's the case export each component and import it with import { SearchForm } from './utils/components.jsx'. Check ES6 syntax that's what you're using. – Michiel Feb 05 '16 at 22:00
  • isn't `import foo from 'bar'` the same as `import { foo } from 'bar'`. I'm export `SearchForm` like: module.exports = { SearchForm, } But it's not being imported, same than React... – tutuca Feb 05 '16 at 22:33
  • Is `SearchForm` really a `.jsx` file and not `.js`? – Chris Feb 05 '16 at 22:48
  • 1
    @tutuca no those two statements are not the same. `import foo` without the braces expects `export default` on the other side. `module.exports = { foo }` on the other hand can be consumed with `import { foo }` – azium Feb 06 '16 at 05:05
  • @Chris, both are preprocessed by babel with the same directive. – tutuca Feb 06 '16 at 17:17
  • @azium: ohhhh. Good to know... brb, be checking all my exports :) – tutuca Feb 06 '16 at 17:17
  • Can you show the code for this `SearchForm` component? – Chris Feb 06 '16 at 17:41
  • @Chris: this is the definition of [SearchForm](http://dpaste.com/2FP5EKN) – tutuca Feb 06 '16 at 18:42
  • @Chris.. If you put that on an answer I'll accept it. – tutuca Jun 29 '16 at 18:02
  • lol... Reading again I think I should've mention @azium.... – tutuca Jun 29 '16 at 20:22

0 Answers0