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';

或使用＆＃34; dist＆＃34;中的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?");

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

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

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

--- --- EDIT

这是错误的，似乎模块本身有一些可疑的东西。

--- --- UPDATE

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

import cf from 'conversational-form'

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

反应无法编译模块＆＃34;会话形式＆＃34;

1 个答案: