search

benjaminhoffman / gatsby-plugin-mailchimp

A simple, lightweight Gatsby plugin to subscribe new email addresses to your Mailchimp list
https://www.npmjs.com/package/gatsby-plugin-mailchimp
MIT License
138 stars 31 forks source link

_GATSBY_PLUGIN_MAILCHIMP_ADDRESS__ is not defined #42

Open isaacsultan opened 5 years ago

isaacsultan commented 5 years ago

System details

Usage

The endpoint is defined in gatsby-config.js as:

{
      resolve: 'gatsby-plugin-mailchimp',
      options: {
        endpoint: `https://gmail.us3.list-manage.com/subscribe/post?u=X&id=Y`, 
      }
    }

And called:

const IndexPage = props => {
  const [email, setEmail] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await addToMailChimp(email)
  }

  const handleChange = e => {
    setEmail(e.target.value)
  }
  return (
  ...
  <form onSubmit={handleSubmit}>
      <input type='text' value={email} onChange={handleChange}/>
      <input type="submit" value="Request access"/>
  </form>
}

Stacktrace


node_modules/gatsby-plugin-mailchimp/index.js:88
_callee$
src/pages/index.js:15
  12 | const IndexPage = (props) => {
  13 |   const [email, setEmail] = useState('')
  14 | 
> 15 |   const handleSubmit = async (e) => {
  16 |     e.preventDefault();
  17 |     const result = await addToMailChimp(email)
  18 |   }
View compiled
▼ 7 stack frames were expanded.
tryCatch
node_modules/regenerator-runtime/runtime.js:45
Generator.invoke [as _invoke]
node_modules/regenerator-runtime/runtime.js:271
Generator.prototype.<computed> [as next]
node_modules/regenerator-runtime/runtime.js:97
asyncGeneratorStep
node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3
_next
node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:25
(anonymous function)
node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:32
(anonymous function)
node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:21
▲ 7 stack frames were expanded.
handleSubmit
src/pages/index.js:15
  12 | const IndexPage = (props) => {
  13 |   const [email, setEmail] = useState('')
  14 | 
> 15 |   const handleSubmit = async (e) => {
  16 |     e.preventDefault();
  17 |     const result = await addToMailChimp(email)
  18 |   }
View compiled
▼ 20 stack frames were expanded.
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:150
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:200
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:257
invokeGuardedCallbackAndCatchFirstError
node_modules/react-dom/cjs/react-dom.development.js:271
executeDispatch
node_modules/react-dom/cjs/react-dom.development.js:562
executeDispatchesInOrder
node_modules/react-dom/cjs/react-dom.development.js:584
executeDispatchesAndRelease
node_modules/react-dom/cjs/react-dom.development.js:681
executeDispatchesAndReleaseTopLevel
node_modules/react-dom/cjs/react-dom.development.js:689
forEachAccumulated
node_modules/react-dom/cjs/react-dom.development.js:663
runEventsInBatch
node_modules/react-dom/cjs/react-dom.development.js:817
runExtractedEventsInBatch
node_modules/react-dom/cjs/react-dom.development.js:825
handleTopLevel
node_modules/react-dom/cjs/react-dom.development.js:4827
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:20440
batchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:2152
dispatchEvent
node_modules/react-dom/cjs/react-dom.development.js:4906
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:20491
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:255
interactiveUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:20490
interactiveUpdates
node_modules/react-dom/cjs/react-dom.development.js:2171
dispatchInteractiveEvent
node_modules/react-dom/cjs/react-dom.development.js:4883
benjaminhoffman commented 5 years ago

Taking a closer look at your endpoint... are you sure that's a Mailchimp URL? I'm trying to think what else this could be... did you have this working before and it just failed? Or did you just install this?

I usually recommend removing as much as possible from your environment and slowly adding stuff back in to see if there is a conflict. For example, try using the basic starter from Gatsby with your endpoint, see if you can get that working. If not, that means there is a problem with your endpoint. But if it does work then likely there is a conflict with another plugin.

domtaylor commented 5 years ago

@isaacsultan and also use the method defined in the docs i.e. addToMailchimp instead of camel case.

Okelm commented 5 years ago

The same issue observed in my case, which gets resolved after restarting node (npm start). I was able to add a couple of emails within the last couple of days and then I've run it today and had the same issue:

Uncaught (in promise) ReferenceError: __GATSBY_PLUGIN_MAILCHIMP_ADDRESS__ is not defined at addToMailchimp

which points to this piece of code:

    // eslint-disable-next-line no-undef
    var endpoint = __GATSBY_PLUGIN_MAILCHIMP_ADDRESS__;
Okelm commented 5 years ago

@isaacsultan and also use the method defined in the docs i.e. addToMailchimp instead of camel case.

it's okay, addToMailchimp has a default export

@benjaminhoffman Mailchimp URL looks correct

nh273 commented 4 years ago

Having the same issue. I have also tried passing my MC endpoint URL in as a param to addToMailChimp but the same ReferenceError: GATSBY_PLUGIN_MAILCHIMP_ADDRESS is not defined is still happening. Endpoint is ok because I send a POST to the same endpoint using Postman and got a 200 back. Could be an issue with conflicting es-lint settings? (shot in the dark, no exp with es-lint)

scarsam commented 4 years ago

@nh273 Any luck with this? I'm having the same issue all the sudden.

benjaminhoffman commented 4 years ago

this is so weird. does anyone here have repro steps i can do? no updates have been made to the plugin so 🤷‍♂️

scarsam commented 4 years ago

this is so weird. does anyone here have repro steps i can do? no updates have been made to the plugin so 🤷‍♂️

I'm going to try what you suggested and start removing plugins to see if there is a plugin conflict happening, I'll circle back here later today.

scarsam commented 4 years ago

I had a silly mistake in my gatsby-config.js causing this error. Two of my plugins were defined in the same object.. 🤦 

plugins: [{
  resolve: 'gatsby-plugin-mailchimp',
  options: {
    endpoint: 'xxxxx',
  },
  resolve: `gatsby-source-stripe`,
  options: {
    objects: ['Sku', 'Product'],
    secretKey: xxxx,
    downloadFiles: true,
  },
}]

The Stripe and Mailchimp plugin was defined in the same object causing this issue.

plugins: [{
  resolve: 'gatsby-plugin-mailchimp',
  options: {
    endpoint: 'xxxxx',
  },
},
{
  resolve: `gatsby-source-stripe`,
  options: {
    objects: ['Sku', 'Product'],
    secretKey: xxxx,
    downloadFiles: true,
  },
}]
domtaylor commented 4 years ago

No worries we've all been there, including me 🤦. I have just checked what's happening on my site and I can see it's still working, but it takes a super long time for the state to change and display the message (anyone else have this). Also sometimes get a cors warning in my console. I thought I'd taken care of that through micro-cors package but apparently not.

On Fri, May 1, 2020 at 7:26 PM Sam Ojling notifications@github.com wrote:

I had a silly mistake in my gatsby-config.js causing this error. Two of my plugins were defined in the same object.. 🤦

{

  resolve: 'gatsby-plugin-mailchimp',

  options: {

    endpoint: 'xxxxx',

  },

  resolve: `gatsby-source-stripe`,

  options: {

    objects: ['Sku', 'Product'],

    secretKey: xxxx,

    downloadFiles: true,

  },

},

The Stripe and Mailchimp plugin was defined in the same object causing this issue.

{

  resolve: 'gatsby-plugin-mailchimp',

  options: {

    endpoint: 'xxxxx',

  },

  resolve: `gatsby-source-stripe`,

  options: {

    objects: ['Sku', 'Product'],

    secretKey: xxxx,

    downloadFiles: true,

  },

},

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/benjaminhoffman/gatsby-plugin-mailchimp/issues/42#issuecomment-622504999, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABCIF5RJHEMTBVRZZ5ONCQDRPMH43ANCNFSM4IEQLGEA .

GenisDiaz commented 4 years ago

I had the same problem but I only had to restart the gatsby server and it worked again

benjaminhoffman commented 4 years ago

Looks like this may be solved? Would love to close it but if anyone is still experiencing issues, I am happy to keep it open.

MuhammadSalah99 commented 4 years ago

I have the same issue, when I try to import Mailchimp, I have this error, "Could not find a declaration file for module 'gatsby-plugin-mailchimp'. 'implicitly has an 'any' type. Try npm install @types/gatsby-plugin-mailchimp if it exists or add a new declaration (.d.ts) file containing declare module 'gatsby-plugin-mailchimp';ts(7016)"

my gatsby verson is 2.24.2, how can I get pass this error.

muntiMedia commented 2 years ago

I'm facing the same issue ,it keep saying https is not defined. Even after restart and installing npm install gatsby-plugin-mailchimp, i'm receiving the same message.

tobinharris commented 2 years ago

I had this issue and it was down to the formatting of my gatsby-config.js.

Weirdly, the previous plugin in the file didn't have a comma after a }. It was the last { in the list but putting the comma in made the the Mailchimp plugin suddenly start seeing the configured endpoint.