Strange syntax error (related to jsonp)

[dvzrd]

So I'm getting a very strange syntax error whenever I try to use the addToMailchimp function in my code. Same error comes up when I tried use jsonp to submit the form so these might be related.

Here's the error I get in the browser's console:

Uncaught SyntaxError: Unexpected token .

As you can see, it's very vague, so it'll probably help if I share my component's code. I'm using Formik as a dependency so that might also be part of the problem although I can't see why (my solution worked on older versions of the plugin).

Here's the relevant dependencies I have:

"formik": "^1.3.2",
"gatsby": "^2.0.55",
"gatsby-plugin-mailchimp": "^4.0.0",
"react": "^16.5.1",
"yup": "^0.26.6"

Here's how my form component looks like:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import addToMailchimp from 'gatsby-plugin-mailchimp';
import { Formik } from 'formik';

import { NewsletterContainer, NewsletterField, NewsletterInput, NewsletterButton, NewsletterInfo } from './newsletter.css';
import { validateEmail } from 'utils/validation';

class FormNewsletter extends Component {
  static propTypes = {
    action: PropTypes.string,
    method: PropTypes.string,
    name: PropTypes.string,
    pending: PropTypes.string,
    pass: PropTypes.string,
    fail: PropTypes.string,
    button: PropTypes.string,
    field: PropTypes.shape({
      type: PropTypes.string,
      name: PropTypes.string,
      placeholder: PropTypes.string,
    }),
  };

  state = {
    message: null,
    result: null,
  };

  handleFormSubmit = (payload, actions) => {
    addToMailchimp(payload.email).then(data => {
      if (data.result === 'success') actions.resetForm();

      actions.setSubmitting(false);
      this.setState({
        result: data.result,
        message: data.msg,
      });
    });
  };

  render() {
    const { message, result, status } = this.state;
    const { action, method, name, button, field } = this.props;

    return (
      <Formik
        displayName={name}
        initialValues={{ email: '' }}
        validate={validateEmail}
        onSubmit={this.handleFormSubmit}
        render={({
          errors,
          touched,
          values,
          handleBlur,
          handleChange,
          handleSubmit,
        }) => (
            <NewsletterContainer
              action={action}
              method={method}
              name={name}
              onSubmit={handleSubmit}
            >
              <NewsletterField>
                <NewsletterInput
                  type={field.type}
                  name={field.name}
                  placeholder={field.placeholder}
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                <NewsletterButton
                  type="submit"
                >
                  {button}
                </NewsletterButton>
              </NewsletterField>
              {errors.email && touched.email && (
                <NewsletterInfo>
                  {errors.email}
                </NewsletterInfo>
              )}
              {result && message && (
                <NewsletterInfo>
                  {message}
                </NewsletterInfo>
              )}
            </NewsletterContainer>
          )}
      />
    );
  }
}

export default FormNewsletter;

I'm not really sure what the error means since it's so vague. inspecting the error in console, common.js references this function as the cause:

/**
 * Save `namespaces`.
 *
 * @param {String} namespaces
 * @api private
 */

function save(namespaces) {
  if (null == namespaces) {
    // If you set a process.env field to null or undefined, it gets cast to the
    // string 'null' or 'undefined'. Just delete instead.
    delete {}.DEBUG;
  } else {
    {}.DEBUG = namespaces;
  }
}

Again, not much info to go on. Maybe it's an issue with my versions or maybe it's something to do with Formik. Also I set my node config to this in gatsby-node to remove the missing fs dependency issue that I was getting with previous attempts to make this plugin work.

node: {
      fs: 'empty',
      net: 'empty',
    },

This worked fine when I was on the older version (gatsby-plugin-mailchimp": "https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2") so it might be something to do with the latest version update.

Any help would be appreciated, thanks!

[benjaminhoffman]

is this still an issue? otherwise, I will close.