0

I'm trying to integrate vue-email-editor into my source. I followed the instructions but still can't integrate vue-email-editor. And here is how I do it and the error I'm getting:

Step 1: npm install vue-email-editor --save

Step 2: In App.vue

<template>
  <div id="app">
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor
        :appearance="appearance"
        :min-height="minHeight"
        :project-id="projectId"
        :locale="locale"
        :tools="tools"
        :options="options"
        ref="emailEditor"
        v-on:load="editorLoaded"
        v-on:ready="editorReady"
      />
    </div>
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor';

  export default {
    name: 'app',
    components: {
      EmailEditor,
    },
    data() {
      return {
        minHeight: '1000px',
        locale: 'en',
        projectId: 0, // replace with your project id
        tools: {
          // disable image tool
          image: {
            enabled: false,
          },
        },
        options: {},
        appearance: {
          theme: 'dark',
          panels: {
            tools: {
              dock: 'right',
            },
          },
        },
      };
    },
    methods: {
      // called when the editor is created
      editorLoaded() {
        console.log('editorLoaded');
        // Pass your template JSON here
        // this.$refs.emailEditor.editor.loadDesign({});
      },
      // called when the editor has finished loading
      editorReady() {
        console.log('editorReady');
      },
      saveDesign() {
        this.$refs.emailEditor.editor.saveDesign((design) => {
          console.log('saveDesign', design);
        });
      },
      exportHtml() {
        this.$refs.emailEditor.editor.exportHtml((data) => {
          console.log('exportHtml', data);
        });
      },
    },
  };
</script>

And then I run source and get the error:

Uncaught TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:166893:41)
    at app.js?id=ee06f5f7860fd239b953:186888:68
    at app.js?id=ee06f5f7860fd239b953:187073:2
    at ./node_modules/vue-email-editor/dist/vue-email-editor.common.js (app.js?id=ee06f5f7860fd239b953:187075:12)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:117639:74)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:110481:194)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue (app.js?id=ee06f5f7860fd239b953:110445:91)

Reference links : https://github.com/unlayer/vue-email-editor

I have searched a lot but there is not a solution that helps me to fix this error. If anyone has successfully integrated, please give me a solution to fix the above error. Thanks.

1 Answer 1

1

This issue is also reported here, and it says to downgrade the version to 1.0.0 to make it workable.

Here is the codesandbox demo of vue-email-editor with version 1.0.0.

(I could not create snippet because CDN of this library is not available.)

Sign up to request clarification or add additional context in comments.

12 Comments

Can you reproduce it in the codesanbox?
I would suggest opening a new question of it otherwise it will be two questions in the comments. I am also looking into your code.
I think you should not use this package. Because this issue is already reported here and no one respond. This seems to be the package's issue itself. See here- github.com/yakoue/vue-email-builder/issues/1
Can you check the code sandbox link, I mentioned in the answer? Maybe you can provide your code details and how are you using it there and then I can debug that.
I have seen the code you demo on the sandbox. It actually ran. Now my tool is a huge tool of the company. Now I don't know how to share the most details with you. I will try to share the most details. Thanks for your help
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.