survey-library: React is not defined

I have a fresh “create-react-app” install (https://github.com/facebookincubator/create-react-app).

  • I ran npm install survey-react --save (everything is alright, something new in node modules!)
  • Then I added import 'survey-react/dist/survey.react.min' right after import React, { Component } from 'react'; in App.js
  • Run the server with npm start

Running it says:

survey.react.min.js:10 Uncaught ReferenceError: React is not defined

Is there any way to work around this problem? (feel free to close this issue if it’s not relative to your lib!)

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 27 (15 by maintainers)

Most upvoted comments

@dmitrykurmanov I created a new react project and added your code. It is working: https://github.com/kbrown/surveyjs-create-react-app-example . I have not yet gone back to diff with my other project to see what was wrong. Thank you.

That looks like it fixed it. Thanks!

@cpruijsen I with @andrewtelnov are going to integrate webpack and es2015 modules to surveyjs and this should fix the problem.

@rap2hpoutre @andrewtelnov I will try to solve this problem

@dmitrykurmanov It’s not really important for me. I had the same message in one other project with some other code, and it’s just an advice (not really an error). It just says Input elements should not switch… but it has no impact as far as I know.

@jeffmax, I fixed the bug, could you check it, please?

I am new with all of this, so I may have done this incorrectly, but following the instructions to build off Dmitry’s branch I copied the dist/ folder into my creact-react-app project node_modules/surveyjs directory.

From debugging, it looked like the Survey object imported correctly with all of the other SurveyJs objects on it.

Then using this code:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import * as Survey from 'surveyjs/survey.react.min';

 let surveyJson = {
  pages: [
   {
    name: "page1",
    questions: [
     {
      type: "text",
      name: "age",
      title: "enter age"
     }
    ]
   }
  ]
 };

 var sendDataToServer = function (){

 }

 ReactDOM.render(
    <Survey.ReactSurvey json={surveyJson} onComplete={sendDataToServer} />,
   document.getElementById('root')
 );

I get the following runtime errors in Chrome

warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `t`.

and

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `t`.

@PAK90 I think that I understand the situation now. We have “classic script” which should be included into <script/> tag. We try to use it like “es2015” modules. I don’t know any way to do it and I can’t find it. Only Systemjs

So, we are working on webpack umd build for our library and it will do the trick. You can follow the progress in my fork.

Is there a quick fix for this while waiting for the official patch?

Experiencing the same issue. @dmitrykurmanov how are you planning to fix this? Happy to help.