反应未能编译模块“对话形式”

Question

我正在尝试将这个 conversational-form npm module 导入到我的 Create-React-App 应用程序中，但在任何尝试这样做时都会遇到编译错误。

这是确切的错误：

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

到目前为止，我已经尝试像这样导入它

import ConversationalForm from 'conversational-form';

或使用“dist”文件夹中的js文件的绝对路径，甚至只是将那个js文件包含在我的项目中，但总是会出现编译错误。

模块is supposed to work with React。

任何想法可能导致这种情况？也许 Create-React-App 与此不兼容？我应该只包含该模块中的 JQuery 插件吗？谢谢。

更新：模块现在似乎已修复，但在尝试将示例调整为 Webpack/React/Component 结构时仍然出现错误

错误：

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?");

---

代码

    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

错误的原因可能是您使用导入的方式。由于ConversationForm 可能是模块中的几个组件之一 你需要像这样导入它：

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

---编辑---

这是错误的，模块本身似乎有问题。

---更新---

模块背后的人非常好，并且已经发布了修复程序。问题似乎出在 webpack 处理依赖项的方式上。现在该模块按预期工作：

import cf from 'conversational-form'

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