0

I built a react-app that is implemented on 3rd party sites as widget. The widget uses a REST API and renders different content in a react-modal depending on the app's state. For building the app I use webpack. Now the following problem appears:

**On one specific site the modal still opens on click, but no content is rendered (although there are quite many child components with proper values). **

  • this issue appears only on one specific site. The site is a magento page with a lot of other stuff going on
  • if I copy the HTML markup of the site in question and place it on my own server, my react app works as intended. This is why I rule out any conflict between js libraries because they would appear here, too.
  • on any other site my react app works as intended
  • there are no console errors or warnings in chrome dev tools
  • all tests have been run with cleared storage to make sure nothing is working/not working because of cached files

Here are some bits of code which I hope are relevant but I am not sure the problem actually lies in this part. Within render() based on the state different components are defined: 

let component;
switch (this.state.currentView) {
    case 'questionnaire':
        component = <QuestionnaireView
            {...commonComponentProps}

            intro={this.state.intro}
            questions={this.state.questions}
            advance={this.advanceView}
            updateQuestions={this.updateQuestions}
        />;
        break;
    case 'closure':
        component = <ClosureView
            {...commonComponentProps}

            closure={this.state.closure}
            submit={this.submitAnswers}
            goBack={this.goBackView}
        />;
        break;
    case 'results':
        component = <ResultsView
            {...commonComponentProps}
            results={this.state.results}
            reset={this.resetApp}
            userToken={this.state.userToken}
        />;
        break;
    default:
        return false;
}

Then in the modal the value is rendered

<Modal
    className="questionnaire-component"
    isOpen={this.state.modalIsOpen}
    onRequestClose={() => this.setState({modalIsOpen: false})}
    style={ModalStyles}
    contentLabel="Questionnaire"
    onClick={this.closeModal}
>
    {this.state.loading ?
        <div style={{display: 'flex',justifyContent: 'center',margin: '50px'}}>
            <Loading type='balls' color='#3C3C3B'/>
        </div>
        :
        component
    }
</Modal>

By inspecting the values I can say that component actually contains the correct values. Also if I make a test and render <Modal><p>Hello World!</p></Modal>this also does not render BUT as said in the beginning this applies only to one specific host site, it usually works everywhere.

Gegenwind
  • 1,388
  • 1
  • 17
  • 27
  • Does it work correctly if you output plain HTML in the widget? To check if the problem is related to the widget... – Rick Wolff Nov 21 '17 at 14:10
  • Good question. I see that I need to be more detailed. So if I replace "" with "
    test
    " it renders correctly. But everything inside does not render.     – Gegenwind Nov 22 '17 at 06:17
  • Hmm. If you inspect the Html, you can see the "" tag there, right? But it does not contain anything inside, is that correct? Maybe the references to react or to react-modal are not set correctly, then the browser would not recognize the "" tag as a react tag... But I don't know how to check that... Maybe trying to output a simpler "Hello world" from react instead of the modal... – Rick Wolff Nov 22 '17 at 11:25
  • Thank you for your thoughts, Rick! The Modal-Tag does not appear in the HTML markup. I can confirm that some of the code that belongs to the react-modal is actually executed, but at least the rendered code is missing. So I can say for sure that this is not simply treated as HTML tag. – Gegenwind Nov 22 '17 at 11:52
  • That's sad :( I think I ran out of ideas... Sorry. Maybe the guys from react-modal can help you through their github, I saw you already opened the issue there :) – Rick Wolff Nov 22 '17 at 12:44

0 Answers0