A simple, lightweight Gatsby plugin to subscribe new email addresses to your Mailchimp list
Home Page: https://www.npmjs.com/package/gatsby-plugin-mailchimp
License: MIT License
If you test with firefox, it is blocking the submissions because of tracking issues
I'm getting an error Uncaught SyntaxError: Unexpected token < when submitting the form using this plugin with Chrome.
I guess this is related to the html that's getting returned upon submit? <!DOCTYPE html>.
Any ideas?
Great plugin! 😎
In Mailchimp form builder output, there's a field that looks something like:
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_1a45e336541f2uhe6ef351e00_f58763f205" tabindex="-1" value="" />
</div>
Is there a way to make this work through your plugin?
Thanks!!
Looking at the code, specifically getPluginOptions, it imports the entire gastby-config, anything sensitive that might be in there, and loads it into your webpack bundles.
I'm thinking this might need a gatsby-ssr.js to set the mailchimp specific configs somewhere public so you don't need the entire config object.
Following instruction and step 1 does not work. List is nowhere to be found!
Hi,
I've recently published my Gatsby blog and subscribed to TinyLetter, a service owned by MailChimp.
Can I use this plugin to add users to my TinyLetter? (https://tinyletter.com/slorber)
Honestly I have no idea if this issue even makes sense (all this is new to me), but as I don't find any discussion regarding this it may be helpful to others too...
When testing the v2 example in the Brave browser (https://brave.com/), the plugin throws an error upon submission rather than returning the Mailchimp response:
err Error: Timeout
at index.js:63
index.js is /node_modules/jsonp/index.js
Hi there! Nice plugin, it helped me a lot!
I was thinking about adding a timeout field on the options, so it can be specified by the plugin user and set a default value of the current 3500ms instead of fixing it.
What you think about it?
Great job!
I cloned the repo to get the simple example working for v2: I see everything in the console, but the submission does not work. I keep the same error regarding the email not being the right format so it won't go through.
In my personal project, the values of the submit (the handleChange does show up) do not show up in the console because the whole page re-renders when the submit button is clicked. I am using the gatsby-starter-netlify-cms.
Thanks in advice for any thoughts...
Running
yarn add https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git\#gatsby-v1
returns
Couldn't find match for "gatsby-v1" in "refs/heads/lint,refs/heads/master,refs/tags/4.1.0,refs/tags/5.0.0,refs/tags/5.1.1,refs/tags/v5.2.0" for "https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git"
Looks like v1 branch is missing?
Hey guys,
I'm building a Gatsby site that needs to use 2 MailChimp endpoints (2 different lists). I suspect this may be somewhat common, and the way the current configuration is leaves this plugin a bit inflexible. It might be better to pass the endpoint as a parameter to addToMailChimp as opposed to defining it in the config file. Thoughts?
Hey, I cant seem to install the latest version of this package. Im getting
"gatsby-plugin-firebase": "^0.2.0-beta.4",
I have a sign-up form in mailchimp and it also has fields for the user to input their address. When I list these parameters in list fields, I am getting the error.
{
msg: "3 - enter complete address"
result: "error"
}
Looking at the headers I believe this is due to the address parameters being capitalized and not matching the exact name in HTML address fields. The names in my embedded html form has names in this way for the address fields:
<input type="text" maxLength="70" name="ADDRESS[addr1]" className="form-control mb-3" placeholder="Address / line 1*" />
<input type="text" maxLength="70" name="ADDRESS[addr2]" className="form-control mb-3" placeholder="Address / line 2" />
When I take a look at the headers in the network tab, I am seeing that the address sub-fields are being capitalized and I am thinking that may be the issue and should instead be 'ADDRESS[addr1]', etc.. in the request to mailchimp. (see below)
Please let me know if there is a work around for this issue or if I can be pointed to any solution, that would be great!
If you have a mailing list with the setting for Enable reCAPTCHA turned on, publishing to the list will fail with the error message: captcha.
To get things working I turned off this setting, but it would be nice to have an option for having this feature enabled. I am not exactly sure of the best course of action to get this resolved. At a minimum, the README should be updated to document this issue.
It would be nice to have the option to using this feature within this plugin, if their API supports it then it should be added.
I see this was fixed in #2 but it seems to still be happening for me using 5.1.2
Example code:
export default class IndexPage extends React.Component {
state = {
email: null,
firstname: null,
lastname: null
}
_handleChange = (e) => {
this.setState({
[`${e.target.name}`]: e.target.value,
});
}
_handleSubmit = e => {
e.preventDefault()
console.log('submit', this.state)
addToMailchimp(this.state.email, {
FNAME: this.state.firstname,
LNAME: this.state.lastname
})
.then(({ msg, result }) => {
console.log('msg', `${result}: ${msg}`)
if (result !== 'success') {
throw msg
}
alert(msg)
})
.catch(err => {
console.log('err', err)
alert(err)
})
}
render() {
return (
<form onSubmit={this._handleSubmit}>
<div className='form-group'>
<label htmlFor='email'>Email Address</label>
<input type='email' name='email' className='form-control' id='email' aria-required='true' onChange={this._handleChange} />
</div>
<div className='form-group'>
<label htmlFor='firstname'>First Name</label>
<input type='text' name='firstname' className='form-control' id='firstname' aria-required='true' onChange={this._handleChange} />
</div>
<div className='form-group'>
<label htmlFor='lastname'>Last Name</label>
<input type='text' name='lastname' className='form-control' id='lastname' aria-required='true' onChange={this._handleChange} />
</div>
</form>
)
}
}
The jsonp request simply times out when you have privacy plugins like Disconnect or Ghostery installed. It also happens when you use the privacy mode in Firefox Quantum. The error does get caught, but jsonp's default timeout is 60s. Do you think we could this set to maybe, let's say, 5 or 10 seconds, using jsonp's timeout option? I don't think there's too much value waiting for a request if it didn't respond after 5 seconds - it will likely not ever return.
Firstly, thanks for this plugin - super simple and perfect for what I need.
I was just wondering what the status is with email validation? If I submit the form with some malformed text, I get the error in the console:
Uncaught gatsy-plugin-mailchimp: email must be of type string and a valid email address. See README for more information.
Which suggests something is validating the email address somewhere - is there a built in way to report that out to the user? I'm happy adding in my own validation to my form, but it seems like it already exists in some form.
Thanks!
Try submitting an email which looks like this: test@test. An unhandled exception will be thrown. The stracktrace doesn't say anything, but I assume it's because the error is thrown, instead I think the function should return a promise by default and reject it if the email is invalid. If this is confirmed, I'd be glad to send a PR.
"gatsby-plugin-mailchimp" threw an error while running the onCreateWebpackConfig lifecycle
Seeing the above error when I run a gatsby develop.
The code that I have written seems to work and updates the mailchimp endpoint but I get this Error in the terminal when running gatsby develop.
It says that I haven't added my endpoint but I have entered it in the plugins section as illustrated in the ReadMe.
I've tried to do a yarn upgrade to see if it was a dependency out of date causing the problem but it doesn't seem to be.
Hi,
When I follow the instructions in the readme and use a matching URL from my MC account as the endpoint the response I get back from API is an html document.
It should be JSON I think. I compared my code against GatsbyJS's newsletter form signup and it seems similar. Not sure if theres a bug in this project or if I havent changed something correctly but I followed the README pretty closely.
Here's my component code (I mirrored the GatsbyJS code to minimize issues):
class Content extends React.Component {
constructor() {
super()
this.state = {
email: ``,
}
this._handleEmailChange = this._handleEmailChange.bind(this);
this._handleFormSubmit = this._handleFormSubmit.bind(this);
}
// Update state each time user edits their email address
_handleEmailChange = e => {
this.setState({ email: e.target.value })
}
// Post to MC server & handle its response
_postEmailToMailchimp = (email, attributes) => {
addToMailchimp(email, attributes)
.then(result => {
// Mailchimp always returns a 200 response
// So we check the result for MC errors & failures
if (result.result !== `success`) {
this.setState({
status: `error`,
msg: result.msg,
})
} else {
// Email address succesfully subcribed to Mailchimp
this.setState({
status: `success`,
msg: result.msg,
})
}
})
.catch(err => {
// Network failures, timeouts, etc
this.setState({
status: `error`,
msg: err,
})
})
}
_handleFormSubmit = e => {
e.preventDefault()
e.stopPropagation()
this.setState({
status: `sending`,
msg: null,
},
// setState callback (subscribe email to MC)
this._postEmailToMailchimp(this.state.email, {
pathname: document.location.pathname,
})
)
}
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!
Hi everybody!
i implemented a subscription form in gatsby.when i run the server with "gatsby develop" everything works just fine.
but when i tried to build the website with "gatsby build" it gives error both on netlify and my computer.
ERROR DETAILS:
11:17:22 PM: error "gatsby-plugin-mailchimp" threw an error while running the onCreateWebpackConfig lifecycle:
11:17:22 PM: Mailchimp endpoint required and must be of type string. See repo README for more info.
11:17:22 PM: 10 |
11:17:22 PM: 11 | if (!isString) {
11:17:22 PM: > 12 | throw new Error(
11:17:22 PM: | ^
11:17:22 PM: 13 | 'Mailchimp endpoint required and must be of type string. See repo README for more info.',
11:17:22 PM: 14 | );
11:17:22 PM: 15 | } else if (endpoint.length < 40) {
11:17:22 PM:
11:17:22 PM:
11:17:22 PM: Error: Mailchimp endpoint required and must be of type string. See repo README for more info.
11:17:22 PM:
this is my configrutaion of gatsby-plugin-mailchimp , dotenv
gatsby-config.js:
require("dotenv").config({
path:.env.${process.env.NODE_ENV},
})
{
resolve: "gatsby-plugin-mailchimp",
options: {
endpoint: process.env.MAILCHIMP_ENDPOINT, // string
timeout: 3500,
},
},
i set MAILCHIMP_ENDPOINT in .env.development file.In netlify i also set environment variables with same value.
and MAILCHIMP_ENDPOINT is string.
if you have any ideas you can comment.any response will be appreciated.
btw thank you for this plugin.
/node_modules/gatsby-plugin-mailchimp/examples/gatsby-v1/src/layouts/index.js
Hello!
I have a question if there is any functionality for updating an existing entry in a Mailchimp list as of now?
I have a list where i would like to update an existing entry with additional data if it exists prior to the function call.
Am I wrong or is there only an add function right now? Can you modify that function or will a new function be needed to perform this sort of update?
I looked around a bit and there seems to be functionality for this in Mailchimps API.
Thanks!
I'm getting an error that I'm missing fs and net node dependenices whenever I import addToMailchimp.
I get the same issue trying to import jsonp package so I'm guessing it's tied to that. I tried adding net and fs packages by installing them to package.json but the error for fs doesn't go away. From what I understand, fs is a core package that doesn't need to be added as a dependency but for some reason I can't get this error to go away. I tried updating node and npm to latest version (10.10.0 and 6.4.1) and the error still persists
These dependencies were not found:
* fs in ./node_modules/debug/src/node.js
To install them, you can run: npm install --save fs
Any ideas what could be causing this?
The readme should be updated to reflect that, is that correct?
Hi Benjamin,
Love this plugin and very easy to implement mailchimp with gatsby thanks to this.
I'm wondering if there's a way to change the returned promise messages? The error message I get right now when the user is already subscribed is:
msg: "[email protected] is already subscribed to list Famiglia Newsletter. <a href="https://famigliasantoni.us10.list-manage.com/subscribe/send-email?e=ai5yb29zQGhvdG1haWwuY29t&u=0cf873aed312fe44c7055b3b6&id=389d29">Click here to update your profile</ a>"I'd like it to only be something like "It seems that you already are subscribed!".
Thank you,
Joakim
Might be a very specific request, but, I'm working on a site currently where users will be able to sign up to a mailchimp list to get future updates whenever the product is release (it's a pre-order campaign).
There are three unreleased products which customers can apply for future stock availability. Let's say a customer tries to sign up for two of the products, I imagine Mailchimp will throw an error saying the email already exist in the list, no?
Would be awesome to be able check if the content of the specified listField is the same as before, or different and in that case, update the existing listField to include (important not to erase previous value) the new listField value.
Thoughts?
Getting this error in Netlify all of a sudden using Gatsby v2.
2:55:32 PM: warning Using the global `graphql` tag is deprecated, and will not be supported in v3.
2:55:32 PM: Import it instead like: import { graphql } from 'gatsby' in file:
2:55:32 PM: /opt/build/repo/node_modules/gatsby-plugin-mailchimp/examples/gatsby-v1/src/layouts/index.js
2:55:42 PM: error #85901 GRAPHQL
2:55:42 PM: There was an error in your GraphQL query:
2:55:42 PM: Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:
2:55:42 PM: - SiteTitleQueryI forked the project and nuked the /examples folder and it worked for me after that.
First of all thanks so much for the plugin and any help you can provide me with!
I want to use it to capture some emails from my blog, but can't make it work for some reason.
I have my email in state and my component is quite simple for now, as I am trying to figure out why it's not working:
class SubscriptionForm extends React.Component {
state = {
email: '',
isSubmitted: false
}
handleChange = (event) => {
this.setState({ email: event.target.value });
}
handleSubmit = (event) => {
event.preventDefault();
this.setState({ isSubmitted: true })
addToMailchimp(this.state.email).then(data => console.log(data))
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.email} onChange={(event) => this.handleChange(event)} />
</form>
)
}
}
I get the following error Unhandled promise rejection Error: "Timeout"
I would appreciate any help or advice!
It appears this plugin does not work on browsers that aggressively block ads and certain network requests. It will cause a timeout.
Not sure of the correct solution here but it's been suggested to simply embed the form. That's worth looking into but it may take a rewrite of the plugin.
In the meantime, it's probably better to show a warning, as suggested here.
Gatsby now has officially released version 2. 🎉
This library should now support version 2 by default, so the separate v2 branch can be merged to master.
As part of this PR, the README should also be updated to reflect the new behavior.
Optional: maybe add a peerDependencies attribute to package.json
Hej, I've successfully included the plugin in my project, so first of all: thank you for making this a breeze for me!
I was interested in the code and had a look. One thing I couldn't explain to myself though.
gatsby-plugin-mailchimp/src/index.js
Lines 39 to 41 in 4019e22
I understand that this is intended to keep groups lowercased, and the .substring(0, 6) call is most likely to figure out whether it starts with group[, but there is no such check.
The only way to make the above statement is when there's a key with an empty string ('') - but frankly there's no need to uppercase an empty string 🙃
Is the intention to have it like this?
const fieldTransformed = field.substring(0, 6) === 'group[' ? field : field.toUpperCase();Hi everybody !
I am working to implement a registration form for my mailchimp audience list with Gatsby and I would like to use your plugin for this 😃
However, we succeed to use the Groups function, but we did not succeed to tag our new contacts with the plugin :/
Is there any possibility to use my tags from mailchimp to tag my new contacts ?
I am adding a colleague to the topic : @knabeth
Thank you for your work !
Please fix the gatsby-plugin-mailchimp plugin to work with gatsby-source-contentful plugin.
The Mailchimp form does not show up when both plugins are added to Gatsby.
This issue was originally posted on gatsby-theme-novela repository as issue #223.
Upon import addToMailchimp from 'gatsby-plugin-mailchimp' returns error:
This dependency was not found:
* fs in ./~/dotenv/lib/main.js
May be related to #2107, but I can't seem to find the solution. Could it be related to the way data is imported from gatsby-config.js?
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>
}
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
Hey,
I am building a site that needs to handle submissions to different mailing lists from different pages. E.g. there is 1 main mailing list present in the footer of the website and on a page such as events we need to capture submissions to a different mailing list.
I saw another simillar issue opened, but there was no solution offered.
Hello there!
I want to use MailChimp pop-up form and was curious if i can do that with this plugin?
If yes, is there any specifics i need to know?
Thanks!
when building my gatsby website after migrating to v2, I'm getting this error:
The plugin "[email protected]" is exporting a variable named "modifyWebpackConfig" which isn't an API.
@Gatsby Import Plugin Instructions
Within the instructions e.preventDefault; should be e.preventDefault();
I have set up the code and configured the plugin in the gatsby-config.js file, but when I click submit the form, I do not get any of the console.log that I expect to see.
Any ideas on what I am missing?
`import React from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'
export default class JoinNewsletter extends React.Component {
state = {
email: null,
firstName: null,
lastName: null,
}
_handleChange = e => {
console.log({ [${e.target.name}]: e.target.value });
this.setState({
[${e.target.firstName}]: e.target.value,
})
}
_handleSumbit = e => {
e.preventDefault();
console.log('submit', this.state)
addToMailchimp(this.state.email, {firstName: this.state.firstName, lastName: this.state.lastName})
.then(({msg, result}) => {
console.log('msg', ${result}: ${msg});
if(result !== 'success') {
throw msg;
}
})
.catch(err => {
console.log('err', err);
alert(err);
});
}
render() {
return (
After I install this plugin, and import the addToMailchimp function into a component, the site will fail to compile.
import addToMailchimp from 'gatsby-plugin-mailchimp'; into a componentIF your gatsby-config.js file imports dotenv because you are using environment variables, the command yarn develop will fail with the following error:
ERROR Failed to compile with 2 errors 08:39:41
This dependency was not found:
* fs in ./gatsby-config.js, ./~/dotenv/lib/main.js
To install it, you can run: npm install --save fs
WAIT Compiling... 08:39:41
ERROR Failed to compile with 2 errors 08:39:42
This dependency was not found:
* fs in ./gatsby-config.js, ./~/dotenv/lib/main.js
To install it, you can run: npm install --save fs
Here is the line in my gatsby-config, where if I comment it out then build will then work.
const dotenv = require('dotenv').config({ path: '.env.gatsby' });
How should I redirect the user once the form gets submitted, to show the success message. If I add action="/success/" to form tag it doesn't redirects. Please advise.
<form onSubmit={this._handleSubmit} action="/success/">
<TextField
id="outlined-email-input"
label="Email"
type="email"
name="email"
autoComplete="email"
variant="outlined"
onChange={this.handleChange}
/>
<Button
variant="contained"
color="primary"
label="Submit"
type="submit"
>
<Typography variant="button">Sign Up</Typography>
</Button>
</form>
Gatsby build (even develop) fails with the following error:
7:43:47 AM: /opt/build/repo/node_modules/gatsby-plugin-mailchimp/examples/gatsby-v1/src/layouts/index.js
7:43:47 AM: error Multiple "root" queries found: "SiteTitleQuery" and "SiteTitleQuery".
7:43:47 AM: Only the first ("SiteTitleQuery") will be registered.
7:43:47 AM: Instead of:
7:43:47 AM: 1 | query SiteTitleQuery {
7:43:47 AM: 2 | site {
7:43:47 AM: 3 | #...
7:43:47 AM: 4 | }
7:43:47 AM: 5 | }
7:43:47 AM: 6 |
7:43:47 AM: 7 | query SiteTitleQuery {
7:43:47 AM: 8 | site {
7:43:47 AM: 9 | #...
7:43:47 AM: 10 | }
7:43:47 AM: 11 | }
7:43:47 AM: Do:
7:43:47 AM: 1 | query siteTitleQueryAndSiteTitleQuery {
7:43:47 AM: 2 | site {
7:43:47 AM: 3 | #...
7:43:47 AM: 4 | }
7:43:47 AM: 5 | site {
7:43:47 AM: 6 | #...
7:43:47 AM: 7 | }
7:43:47 AM: 8 | }
7:43:47 AM: This can happen when you use two page/static queries in one file. Please combine those into one query.
7:43:47 AM: If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.
node: v11.10.1"dependencies": {
"@contentful/gatsby-transformer-contentful-richtext": "12.1.2",
"@mdx-js/mdx": "^1.6.1",
"@mdx-js/react": "^1.6.1",
"@researchgate/react-intersection-observer": "0.7.4",
"babel-plugin-styled-components": "1.10.0",
"cheerio": "1.0.0-rc.2",
"gatsby": "^2.0.76",
"gatsby-image": "^2.0.26",
"gatsby-plugin-catch-links": "^2.0.9",
"gatsby-plugin-google-analytics": "^2.0.13",
"gatsby-plugin-mailchimp": "^4.0.0",
"gatsby-plugin-manifest": "^2.0.9",
"gatsby-plugin-mdx": "^1.2.5",
"gatsby-plugin-netlify": "^2.0.6",
"gatsby-plugin-netlify-cache": "^1.0.0",
"gatsby-plugin-react-helmet": "^3.0.2",
"gatsby-plugin-sharp": "^2.6.1",
"gatsby-plugin-sitemap": "^2.0.4",
"gatsby-plugin-styled-components": "^3.0.4",
"gatsby-remark-copy-linked-files": "^2.3.2",
"gatsby-remark-images": "^3.3.1",
"gatsby-source-apiserver": "^2.1.0",
"gatsby-source-contentful": "^2.0.26",
"gatsby-source-filesystem": "^2.2.5",
"gatsby-transformer-yaml-plus": "^0.2.2",
"grommet": "2.3.1",
"intersection-observer": "0.5.1",
"js-cookie": "2.2.0",
"jsonframe-cheerio": "3.0.1",
"lodash.countby": "4.6.0",
"lodash.uniqby": "4.7.0",
"lottie-api": "^1.0.2",
"lottie-react-web": "2.1.4",
"node-fetch": "2.3.0",
"prop-types": "15.6.2",
"react": "16.8.1",
"react-dom": "16.8.1",
"react-hanger": "1.1.2",
"react-helmet": "5.2.0",
"react-jsx-parser": "1.13.0",
"react-player": "1.9.3",
"remark-html": "^11.0.1",
"rich-text-react-renderer": "mgmolisani/rich-text-react-renderer",
"styled-components": "4.1.3",
"styled-icons": "6.8.0"
}
NOTE: when I go to the mentioned file (examples/gatsby-v1/src/layouts/index.js) and remove the code from the Layout component , everything works fine.
I'm getting the following error when I build my gatsby project... I'm using Gatsby v2, and I'm wondering if that's the issue.
Your plugins must export known APIs from their gatsby-node.js.
[1] The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?
[1]
[1] See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby Node APIs
[1]
[1] - The plugin "[email protected]" is exporting a variable named "modifyWebpackConfig" which isn't an API.
Tried to follow the README, but I can't get my "name" field to come through. The email address entered is pushing through to my Mailchimp list with no issues, but the Name field entry doesn't come with it. I'm new to JS so I'm assuming I have something wrong in my code (maybe this.state.name?) but I'm not sure. Anybody mind taking a look? Thank you in advance.
import React, { Component } from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'
export default class Mailchimp extends Component {
state = {
name: null,
email: null
}
_handleChange = e => {
console.log({
[`${e.target.name}`]: e.target.value
})
this.setState({
[`${e.target.name}`]: e.target.value
})
}
_handleSubmit = e => {
e.preventDefault()
console.log('submit', this.state)
addToMailchimp(this.state.email, this.state.name)
.then(({ msg, result }) => {
console.log('msg', `${result}: ${msg}`)
if (result !== 'success') {
throw msg
}
alert(msg)
})
.catch(err => {
console.log('err', err)
alert(err)
})
}
render() {
return (
<FormWrapper>
<div className='container'>
<h1>Sign Up!</h1>
<p>
Join our newsletter to receive updates on special offers and events!
</p>
<div className='form'>
<form onSubmit={this._handleSubmit}>
<input
type='text'
onChange={this._handleChange}
placeholder='Name'
name='name'
/>
<input
type='email'
onChange={this._handleChange}
placeholder='Email'
name='email'
/>
<input type='submit' />
</form>
</div>
</div>
</FormWrapper>
)
}
}
const FormWrapper = styled.div``
I have an error when deploying with Netlify :
3:32:49 PM: /opt/build/repo/node_modules/gatsby-plugin-mailchimp/examples/gatsby-v1/src/layouts/index.js
3:32:49 PM: error Multiple "root" queries found in file: "SiteTitleQuery" and "SiteTitleQuery".
3:32:49 PM: Only the first ("SiteTitleQuery") will be registered.
3:32:49 PM: Instead of:
3:32:49 PM: 1 | query SiteTitleQuery {
3:32:49 PM: 2 | bar {
3:32:49 PM: 3 | #...
3:32:49 PM: 4 | }
3:32:49 PM: 5 | }
3:32:49 PM: 6 |
3:32:49 PM: 7 | query SiteTitleQuery {
3:32:49 PM: 8 | foo {
3:32:49 PM: 9 | #...
3:32:49 PM: 10 | }
3:32:49 PM: 11 | }
3:32:49 PM: Do:
3:32:49 PM: 1 | query siteTitleQueryAndSiteTitleQuery {
3:32:49 PM: 2 | bar {
3:32:49 PM: 3 | #...
3:32:49 PM: 4 | }
3:32:49 PM: 5 | foo {
3:32:49 PM: 6 | #...
3:32:49 PM: 7 | }
3:32:49 PM: 8 | }
You would have to modify your code for it to work 👍
Thank you,
Hi,
Maybe it's a dumb question but I can't figure out how to do it without having a backend. I set up the Mailchimp URL to be the environment variable to be used in a form, but whoever knows where to look will easily be able to find it in Dev Tools -> Network -> request -> Headers in any browser. How do people usually handle such sensitive information so it's not so easily discoverable?
Thanks!
I get the following error:
There was an error in your GraphQL query:
Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:
the mentioned query is used duplicated in the gatsby v1 example and gatsby v2 example in the layouts/index.js
/node_modules/gatsby-plugin-mailchimp/examples/gatsby-v1/src/layouts/index.js
during yarn dev and build
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.