Connect your Nuxt.js application with Mailchimp for seamless integration

I've tried the solution recommended in this thread, but unfortunately, it's not working for me.

Every time I run npm run dev, I encounter an error message:

ERROR - Compilation failed with 1 error at 11:21:24

The following dependency was not found:

  • mojo/signup-forms/Loader in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["D://Code//frontend//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue

To resolve this issue, you can install it using: npm install --save mojo/signup-forms/Loader

However, when I attempt to install it through npm, I face the following error:

$ npm install --save mojo/signup-forms/Loader npm ERR! code ENOLOCAL npm ERR! Could not install from "mojo/signup-forms/Loader" as it does not have a package.json file.

I'm stuck and unsure of what steps to take next.

For reference, here is my complete default.vue code snippet:

   
<template>
  <div>
    <header-block></header-block>

    <nuxt/>

    <footer-block></footer-block>
  </div>
</template>
<script>
import HeaderBlock from '~/components/Header.vue'
import FooterBlock from '~/components/Footer.vue'

require(['mojo/signup-forms/Loader'], function (L) {
  L.start({'baseUrl': 'mc.us9.list-manage.com', 'uuid': 'xxxx', 'lid': 'xxxx'})
})
export default {
  components: {HeaderBlock, FooterBlock}
}
</script>

Answer №1

Despite encountering occasional error notifications on sentry with the message "require is not defined" on the line containing the function showMailingPopUp, I managed to implement the following solution.

If anyone has insights on resolving this issue, please do share :) It's good to have a starting point.

app.html (main file)

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
  {{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}

<script src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js"></script>
<script>
function showMailingPopUp(){require(["mojo/signup-forms/Loader"],function(i){i.start({baseUrl:"xxxx",uuid:"xxxxx",lid:"xxxx"})})}
</script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues with compiling the Firebase NPM package on Vue 3

After adding firebase as an npm package and importing it into the vue project, I encountered a specific error when attempting to run the project. The error message stated: ERROR Failed to compile with 1 error ...

Troubleshooting: Issue with Updating Views in Angular JS

I've been attempting to change the view from the controller, but it's just not working properly. app.js var app = angular.module('vla', ['ngRoute']); app.config(function ($routeProvider){ $routeProvider ...

Tips on placing an li element into a designated DIV

Just starting out with jquery and working on a slider project. Here's what I have so far: <ul> <li> <img src="image.jpg"><p>description of the current image</p></li> <li> <img src="image.jpg"> ...

Adjust image size based on the size of the screen

I am facing an issue with two images that are created for a 1024 x 768 resolution but I need to use them in a higher resolution. The challenge is to align these two images so that the circle from the first image falls between the second image. Although I ...

using hover/click functionality with a group of DIV elements

I have a group of DIV elements that I want to apply an effect to when hovering over them with the mouse. Additionally, when one of the DIVs is clicked, it should maintain the hover effect until another DIV is clicked. <div class="items" id="item1"> ...

React Native application fails to return any values from an asynchronous operation in App function

Completely new to React Native, this is my first attempt at coding. I'm struggling with returning jsx from my App() function due to an asynchronous operation within it. Here's the code that I believe clearly demonstrates my issue: import React fr ...

Updating the positions of Mesh objects in Three.js asynchronously

I'm currently working on a Three.js application where I am creating a grid to display various objects. These objects are rendered on the grid based on their positions, which are obtained from data fetched from a REST API that I poll every 300 millisec ...

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

I've been using Typescript 5, React 18, and Next.js 14 as my tech stack, and I keep encountering similar errors with various libraries. One of the errors I often face is ReferenceError: window is not defined. This error originates from a third-party ...

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Currently, I'm researching HTML5 Drag and Drop functionality by using this resource. However, I've encountered an issue with the dragenter event that seems to fire twice for child elements before the dragleave event. Because of this, the dashed b ...

What steps should I take to resolve this issue? ERROR TypeError: Unable to access property 'user' of null object

Is there a way to resolve the error I'm encountering in my project? The error message is: ERROR TypeError: null is not an object (evaluating 'userdata.user'). Using React Native Expo, I am facing this issue after logging into my app and navi ...

Experiencing Issues with File Downloading on Express Server with Axios and Js-File-Download Library

I developed a feature on my express server that allows users to download a file easily. app.post("/download", (req, res) => { let file_name = req.body.name; res.download(path.join(__dirname, `files/${file_name}.mp3`), (err) => { ...

The toggle feature doesn't seem to be working properly in Bootstrap 5

I've tested it in the latest Bootstrap version and still can't get it to work. I even switched to version 5, but the toggle functionality remains a problem. I've tried various solutions from StackOverflow with no luck ** I've added all ...

What is the best way to display information using axios.get?

I am currently working on a small project with PHP and Axios. I am attempting to display data in an HTML table using the v-for directive, but I am facing issues as I receive server feedback. Although I am able to retrieve the JSON response successfully, wh ...

Converting primary key strings to BSON for the _id field in MongoDB using Mongoskin

The primary key in Mongodb is typically _id and its data type is bson. For example: {_id : "4e7020cb7cac81af7136236b"} I am interested in setting another field's value as the primary key. For instance: apple How can I convert the string "apple" to ...

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

CodeIgniter: Redirecting Made Easy

I'm attempting to redirect to a specific page using the code below: window.location.href="'<?php echo base_url() ?>'/index.php/user/view_cart/viewCart"; However, the URL it's being sent as is: http://localhost/CI/index.php/user ...

Incorporate the coordinates of Google Maps markers into your form submission

After a user clicks a position on the map, the following javascript function retrieves a javascript variable named marker containing coordinates. var marker; function placeMarker(location) { if ( marker ) { marker.setPosition(location); } else { ...

Creating a Perfect Arc with a Consistent Fixed Focal Point

Trying to achieve a unique sunflower effect on canvas with an arc, but my geometry skills are a bit rusty. To begin, I set the origin point in the middle of the canvas as (X1, Y1). Then I determine the Mouse Position as (Xm, Ym). If I draw an imaginary l ...

Utilizing Regular Expressions in AngularJS to validate name, a 10-digit mobile number, and a 12-digit number through the ng-blur event and match

I am struggling to validate the three inputs mentioned above and having trouble using the right functions. Can someone please assist me with this? Here is the HTML code for the 3 inputs: <input id="name" ng-model="user.name" ng-blur="checkIfNameIsVali ...

Data is not being successfully passed through Ajax

Having some issues with passing data through ajax. I've used this method multiple times before without any problems, but now it's not returning anything. Here is the javascript code: $('#contactformbtn').click(function(){ var full ...