react failed to compile module "conversational-form"

Question

I'm trying to import this conversational-form npm module to my Create-React-App application and I've been getting compile errors on any attempts to do so.

Here is the exact error:

./~/conversational-form/dist/conversational-form.js
Module not found: Can't resolve 'conversationalform' in '/Users/user/Desktop/app_name/node_modules/conversational-form/dist'

So far I've tried to import it like

import ConversationalForm from 'conversational-form';

or using an absolute path to the js file in the "dist" folder, or even just including that js file in my project, but there are always compile errors.

The module is supposed to work with React.

Any ideas what may be causing this? Is perhaps Create-React-App incompatible with this? Should I just include the JQuery plugin from that module instead? Thank you.

UPDATE: Module seems to have been fixed now, but I still get errors when trying to adapt the example to a Webpack/React/Component structure

Error:

TypeError: Cannot read property 'setAttribute' of undefined

componentDidMount(){
13 |    // add Conversational Form info
> 14 |  this.refs.name.setAttribute('cf-questions', "Your name?");
15 |    this.refs.email.setAttribute('cf-questions', "Your email?");
16 |    this.refs.description.setAttribute('cf-questions', "What is description?");

---

CODE

    import React, { Component } from 'react';
    import { CSSTransitionGroup } from 'react-transition-group';
    import ConversationalForm from './conversational_form';

    class ConversationForm extends Component {

        constructor(props) {
            super(props);
            this.cf = null; // <-- Conversational Form ref
        }

        componentDidMount(){
            // add Conversational Form info
            this.refs.name.setAttribute('cf-questions', "Your name?");
            this.refs.email.setAttribute('cf-questions', "Your email?");
            this.refs.description.setAttribute('cf-questions', "What is description?");
            this.cf = window.cf.ConversationalForm.startTheConversation({
                formEl: this.refs.form,
                context: document.getElementById("cf-context"),
                    flowStepCallback: function(dto, success, error){
                        success();
                    },
                    submitCallback: function(){
                    // this callback could also be added to the React.createElement it self...
                        alert("You made it!")
                        console.log("Form submitted...");
                    }
            });
        }
        render() {

            var conversation;

            if (this.props.visible) {
            conversation = 
            <div>
                    <form id="form" ref={form => this.input = form} className="form">
                        <input type="text" ref={name => this.input = name} placeholder="Name (required)" defaultValue={this.props.name} />
                        <input type="email" ref={email => this.input = email} placeholder="Email" defaultValue={this.props.email} />
                        <textarea ref={description => this.input = description} placeholder="Description" defaultValue={this.props.description} />
                        <button type="submit">Submit</button>
                    </form>
                    <section id="cf-context" role="cf-context" cf-context>

                    </section>
                </div>
            }

            return (
                <CSSTransitionGroup
              transitionName="success"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
                {conversation}
            </CSSTransitionGroup>
            )
        }
    }

    export default ConversationForm;

Answer 1

The reason for the error is likely the way you are using your import. Since ConversationForm is probably one of several components in the module you need to import it like this:

import {ConversationForm} from 'react-conversational-form';

---EDIT---

This is wrong, it seems like there is something fishy going on with the module itself.

---UPDATE---

The guys behind the module are super good and already issued a fix. The problem seemed to be with the way webpack handles dependencies. Now the module works as expected:

import cf from 'conversational-form'

var myForm = document.querySelector('#my-form');
var c = new cf.startTheConversation({formEl: myForm})