search

ryanditjia / gatsby-plugin-crisp-chat

Gatsby plugin to add Crisp Livechat to your site
MIT License
17 stars 5 forks source link

Can't use environment variables with Crisp Chat plugin and Gatsby #5

Closed interglobalmedia closed 4 years ago

interglobalmedia commented 4 years ago

Hi, I was trying for hours to use environment variables both using GATSBY_ prefix, imply using dotenv with a .env file, and also .env.development and production. None of the solutions provided to add environment variables to Gatsby worked. It would be nice to be able to not share the Crisp website id publically, even though Crisp says that it is not a security concern. It's just nice to be able to have the option. Thanks!

ryanditjia commented 4 years ago

Can you try this:

import dotenv from 'dotenv'
dotenv.config()

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-crisp-chat',
      options: {
        websiteId: process.env.CRISP_WEBSITE_ID
      }
    }
  ]
}

If that doesn’t work, the issue could be somewhere else, because this plugin uses the canonical implementation of Gatsby SSR API’s onRenderBody in how it reads the plugin options.

Last note: what Crisp says is true, your Crisp website ID is always there on the final rendered HTML, so it likely won’t matter much to hide it behind .env file.

interglobalmedia commented 4 years ago

Didn't quite do it like that, but I can give it a try. I used require for dotenv both with and without the environment development }} production and then placed the path to the .env.production or .env.development which I defined in a variable. I am willing to give this a try and will let you know how it works out.

interglobalmedia commented 4 years ago

first off, when I try to use import in gatsby-config.js` on build, I get the following error:

Error: /Users/mariacam/Development/interglobalmedia/gatsby-config.js:1
  (function (exports, require, module, __filename, __dirname) { import dotenv from 'dotenv'
                                                                ^^^^^^
  SyntaxError: Cannot use import statement outside a module
interglobalmedia commented 4 years ago

when I do the following at the top of gatsby-config.js, the build succeeds:

const dotenv = require('dotenv');
dotenv.config()
interglobalmedia commented 4 years ago

Now I pushed my new changes. Will let you know if build on remote succeeds. npx gatsby serve succeeded locally.

interglobalmedia commented 4 years ago

Your code does not work. Are you assuming a .env file in root of the project?

interglobalmedia commented 4 years ago

This is what I received in the Netlify console during deployment:

You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:46 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:47 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:48 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:49 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
11:50:50 AM: You have not provided websiteId, gatsby-plugin-crisp-chat will not take effect.
interglobalmedia commented 4 years ago

This is what I have in my gatsby-config.js file:

// at top of the file
const dotenv = require('dotenv')
dotenv.config()

// crisp configuration
{
            resolve: 'gatsby-plugin-crisp-chat',
            options: {
                websiteId: process.env.CRISP_WEBSITE_ID,
                enableDuringDevelop: true, // Optional. Disables Crisp Chat during gatsby develop. Defaults to true.
                defer: false, // Optional. Sets the Crisp loading script to defer instead of async. Defaults to false.
                enableImprovedAccessibility: true, // Optional. Sets aria-label attribute on pop-up icon for screen readers. Defaults to true.
            },
        },

With other configurations I had used, I never received an undefined website ID in the Netlify console. This was the first time it actually showed up.

interglobalmedia commented 4 years ago

And in my .env file in root:


CRISP_WEBSITE_ID=XXXXXXXXXXXXX
ryanditjia commented 4 years ago

Sorry I wasn’t watching my GitHub notifications so I missed this. Are you still struggling with this?

interglobalmedia commented 4 years ago

No. I simply removed the environment variables. They are superfluous and I don't think it matters given the set up.