Troubleshooting SDK Integration with Axeptio in Nuxt3

I am currently developing a Nuxt3 project and I'm looking to integrate a script provided by Axeptio, a cookie platform.

To achieve this integration, I created a custom plugin in Nuxt3.


export default defineNuxtPlugin((useNuxtApp) => {
  ;(<any>window).axeptioSettings = {
    clientId: '...',
    cookiesVersion: '...',
  }

  ;(function (d, s) {
    var t:any = d.getElementsByTagName(s)[0],
      e: any = d.createElement(s)
    e.async = true
    e.src = '//static.axept.io/sdk.js'
    t.parentNode.insertBefore(e, t)
  })(document, 'script')
})

However, when I tried implementing the code, I encountered an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR')

Surprisingly, the same code worked perfectly fine in Nuxt2. Any suggestions on how to resolve this issue in Nuxt3?

Answer №1

Nuxt3 takes advantage of Vite's technology, eliminating the need for process.env like in Nuxt2 using Webpack4.
This guide explains how to access environment variables in Nuxt3 by utilizing

import.meta.env.YOUR_COOL_ENV_VAR
.

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

Is there a way for me to retrieve form information?

I have encountered a challenge with my React app. The login form data appears to be empty when I attempt to send it to the backend. // Login component class submitLoginForm = (event) => { event.preventDefault(); const target = event.target; ...

Challenges encountered with the "load" event handler when creating a Firefox Extension

I am currently troubleshooting a user interaction issue with my Firefox extension. The tasks that my extension needs to complete include: Checking certain structures on the currently viewed browser tab Making backend server calls Opening dialogs Redirect ...

React: Error - Unable to use this.setState as a function

When attempting to pass a value from the Child Class to the Parent Class and set it in the Parent's state, I encounter the following error: TypeError: this.setState is not a function Parent Class class Header extends React.Component { constr ...

How can I achieve the same result as npm run start:ci with yarn?

I need help setting up Bitbucket CI/CD to run cypress tests on my vue app that utilizes yarn as its package manager. Is there a method to launch the server in the background using yarn? Appreciate any assistance. Thanks in advance! ...

Is there a way to remove a value from the search bar while updating the table at the same time?

Although I can successfully search the table based on the values in my search bar, I am having trouble with updating the state when deleting a value. To see my code in action, check out my sandbox here. ...

Looking for assistance in determining a solution for progress bar implementation

Currently, I am developing a simple application using web technologies like HTML, CSS, and jQuery Mobile. This app enables me to create goals and save them to a listview using the <li> element. Every <li> representing a goal will have an assoc ...

Instructions on how to insert a hyperlink into the information within the generated div utilizing an API

Currently, I am fetching information from an API based on the user's input (zipcode). The data retrieved includes the name of the institution, address, and webpage. I've been trying to make the webpage link clickable by adding a hyperlink to the ...

Node.js encountering unexpected pattern during RegExp match

Currently, I'm developing a script that aims to simplify local testing by creating a Node server for all my Lambda functions. My main challenge lies in extracting all the dbconfig objects from each file. To test out various patterns, I rely on . Surpr ...

While constructing my Node.js application, I encountered an issue related to the vue-cli-service

I encountered an issue while attempting to build my nodejs app using "vue-cli-service". The error message is as follows: 20 error code ELIFECYCLE 21 error errno 1 22 error @ozu/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0 ...

Implementing Angular routing within the Express framework can enhance the user experience

I'm diving into Angular and Node/Express for the first time. I've successfully set up a node/express server and loaded the main index.jade file. However, I'm struggling to use Angular for routing between links on this page. The console consi ...

Executing a function upon loading a page triggered by a submitted form

Recently on my index.php page, I implemented a form that posts data into a third-party newsletter system. After the form submission, the page reloads to index.php?mail&. Is there a way to detect when the page is loaded and determine if the form has bee ...

Tips for enhancing image resolution when converting from canvas toDataURL

After grabbing an image from a DIV with HTML2CANVAS, I noticed that the image quality is disappointingly poor and pixelated. The resolution of the captured image is only 96 dpi. Is there a way to boost the resolution for a clearer, high-quality image? Cou ...

What would be an effective method for sending a multitude of parameters to a controller?

I am currently working on an application that utilizes Java with the Spring framework and Javascript with AngularJs framework. The application features a table displaying a list of objects along with two text fields for filtering these objects. The filteri ...

Can you explain the contrast between using require('d3') and require('d3-selection')?

While working on a nodejs application with javascript, I encountered an interesting issue. In my code, I am passing a d3 selection to a function as shown below. // mymodule.js exports.myfunc = function(ele){ if(ele instanceof d3.selection){ // do so ...

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Is there a way to require the user to click one of the toggle buttons in a react form? I need to display an error message if the user submits the form without selecting a button. I tried using the "required" attribute in the form but it didn't work. H ...

In Vue.js, cycle through items and create a new row for every group of 3 items

I am currently working on a code that displays 3 items in each row. <b-container class="tags"> <b-row v-for="index in 3" :key="index"> <b-col> <MovieItem /> </b-col> <b-col> ...

Updating JavaScript files generated from TypeScript in IntelliJ; encountering issues with js not being refreshed

Struggling with a puzzling issue in IntelliJ related to the automatic deployment of changes while my server is running (specifically Spring Boot). I've made sure to enable the "Build project automatically" option in my IntelliJ settings. Whenever I ...

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

One method I am utilizing to pass data through link components looks like this: <div> {data.map((myData) => ( <h2> <Link href={{ pathname: `/${myData.title}`, query: { ...

Error encountered while exporting TypeScript module

While I am working with Angular, TypeScript, and Gulp, my module system is CommonJS. However, I encountered an error when trying to import a module into my main.ts file: Error: Cannot find external module 'modules.ts'. Here is the snippet from ...

Having difficulties showing selectors content in Cheerio

Seeking assistance with extracting a table from a website, specifically trying to retrieve all the columns first. When I make the request and load the html into cheerio, I am facing an issue where the selector content does not display anything on the conso ...