Survey-library: React is not defined

[rap2hpoutre]

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!)

[andrewtelnov]

@rap2hpoutre
Do you have the link to the react library? This is the react example from surveyjs.org. I am using the bootstrap version.

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="https://fb.me/react-0.14.8.js"></script>
<script src="https://fb.me/react-dom-0.14.8.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/js/survey.react.bootstrap.min.js"></script>
and the script should use the "text/babel" type:
<script type="text/babel">
var survey = new ReactSurveyModel({ questions: [
{ type: "radiogroup", name: "car", title: "What car are you driving?", isRequired: true,
colCount: 4, choices: ["None", "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"] }
]});
ReactDOM.render(<ReactSurvey model={survey} />, document.getElementById("surveyElement"));
</script>

Thank you,
Andrew

[rap2hpoutre]

Yes. "Create React App" does not work this way. It just create an almost empty index.html file (https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/public/index.html), and builds everything with webpack. Then I just have to edit this file: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/src/App.js

So I added an import in the beginning of the App.js file (that's the way I do for other lib & packages).

Side note: "Create React App" is the new default way to create a react app (https://facebook.github.io/react/docs/getting-started.html)

Thank you!

[andrewtelnov]

Yes, I see the problem.

Thank you,
Andrew

[dmitrykurmanov]

@rap2hpoutre @andrewtelnov I will try to solve this problem

[cpruijsen]

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

[dmitrykurmanov]

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

[gperreymond]

Hello,

Have you tried to use plugins in webpack to declare React global ?

Like this:

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      React: 'react'
    })

[PAK90]

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

[dmitrykurmanov]

@PAK90 As the quick fix you can try to add var React = require('react'); at the beginning of your survey.react.js script.

[PAK90]

Sure, ok, that worked. Can't get it to render to my page though.

import ReactSurvey from 'survey-react/dist/survey.react';
// In my class, render function:
return (
    <div>
    <ReactSurvey json={surveyJSON} onComplete={sendDataToServer}/>  
    <other components>
    </div>

I get the error: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method ofApp.

[dmitrykurmanov]

@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.

[andrewtelnov]

@rap2hpoutre @cpruijsen @gperreymond @PAK90
Guys, could you please check out Dmitry's Repo?
He did the webpack support and you may use the library in a react way. If everything is fine, I will include the Dmitry's changes.

PS: You will have to build the library from sources in that repository.

Thank you,
Andrew

[jeffmax]

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`.

[dmitrykurmanov]

@jeffmax, your code should work it is a bug. I am going to understand and fix it.

[dmitrykurmanov]

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

[jeffmax]

That looks like it fixed it. Thanks!

[jeffmax]

I did get this warning when I typed in the component it rendered- I am not sure if it is an issue or not:

 warning.js:36 Warning: t is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

[dmitrykurmanov]

@jeffmax, Yes I saw it, i will try to understand what is it. Is it important for work now?

[rap2hpoutre]

@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.

[dmitrykurmanov]

@jeffmax, @rap2hpoutre, it is because of react "controlled" and "uncontrolled" components. I found the decision in this stackoverflow question: http://stackoverflow.com/questions/37899794/why-is-this-component-switching-from-controlled-to-uncontrolled-react So I will discuss it with @andrewtelnov and we added it in our code. We need just change value={this.question.value} to value={this.question.value || ''} in the input.

[dmitrykurmanov]

Added default value to input for prevent react warning: "is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components"

[andrewtelnov]

I have merged @dmitrykurmanov branch.
If you are using the bootstrap version, please read: https://github.com/andrewtelnov/surveyjs/issues/86
There is only one react version. To use bootstrap style, please add this line:
ReactSurvey.cssType = "bootstrap";

[laportem]

where do you add ReactSurvey.cssType = "bootstrap";

[andrewtelnov]

@laportem
It is now: Survey.Survey.cssType = 'bootstrap';
It should be placed before rendering Survey object. It is a static property, so it can be called as the first line of your code, dealing with surveyjs.

Thank you,
Andrew

[kbrown]

@jeffmax

Jeff, could you share your App.js and index.js? I'm still seeing some of these errors with the 0.10.0 version. I expect I'm doing something wrong.

[dmitrykurmanov]

@kbrown, how do you use it? It should be something like that (App.js):

import React, {Component} from 'react';
import './App.css';
import * as Survey from 'survey-react';

class App extends Component {
    constructor() {
        super();
        this.surveyJson = {
            pages: [
                {
                    name: "page1",
                    questions: [
                        {
                            type: "text",
                            name: "age",
                            title: "enter age"
                        }
                    ]
                }
            ]
        }
    }

    sendDataToServer(){

    }

  render() {
    return (
        <Survey.Survey json={this.surveyJson} onComplete={this.sendDataToServer} />
    );
  }
}

export default App;

Could you check it, please.

[kbrown]

@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.