Vuejs : firebase is not defined

[nmarseaud]

Hello there,

I am new to vuejs and grapesjs, and I was wondering if someone here could help me understand why the plugin doesn't find the firebase variable. I didn't manage to reproduce my local env on a codepen, because I used the vue-cli to install the project. So all I got is the base script.

Here is the error

In the plugin file, the error comes from the firebase.initializeApp. So the first time firebase is called. If I console.log the firebase variable before the editor.init, the "firebase" variable is set up. Even in previous lifecycle phases. So my first guess is that the plugin doesn't have access to the variable somehow ?

Other plugins like gjs-preset-newsletter seem to work fine, so I think it's just a problem on my part with the management of vue and the importation of the modules. Does anyone has an idea ?

// @ is an alias to /src
import { config } from '@/firebase';
import firebase from 'firebase/app';
import 'firebase/firestore';

import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-firestore';
import grapesjs from 'grapesjs';

export default {
  name: "editor",
  data() {
    return {

    };
  },
  methods: {
    init: function(){

    }
  },
  beforeMount() {
    console.log(firebase);
  },
  mounted() {
    console.log(firebase);
    const editor = grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: '#gjs',
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      fromElement: true,
      // Size of the editor
      height: '780px',
      width: 'auto',
      // Managing the storage
      storageManager: { type: 'firestore' },
      plugins: ['grapesjs-firestore'],
      pluginsOpts: {
        'grapesjs-firestore': {
          docId: 'testID',
          apiKey: config.apiKey,
          authDomain: config.authDomain,
          projectId: config.projectId,
        }
      },
      ...
    });
...
};

package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "firebase": "^5.7.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  }
}

[Fasteel]

Can you push a commit in another branch to see all the source ?

[artf]

Hi @nmarseaud this plugin is not bundled with firebase and firestore libraries so you have to include them manually (eg. https://www.gstatic.com/firebasejs/4.13.0/firebase.js and https://www.gstatic.com/firebasejs/4.13.0/firebase-firestore.js)