Let's get this bread: Error - Whoops! It looks like there's a hiccup with the '?' token in the mobile browser for

Have you checked for any existing problems?

  • [X] I have searched the existing issues

Package Version

0.8.6

Issue Description

An error occurs when attempting to set up wagmi and use it on a mobile browser with NextJS. SyntaxError: Unexpected token '?'.

Expected Outcome

No errors should be thrown.

Steps To Recreate

To reproduce, you can utilize the example application (yarn create wagmi) and view it in Chrome or any mobile browser. I also tried setting up wagmi configurations in a vanilla NextJS project which resulted in an error. https://github.com/lucaford/wagmi-test

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

The issue can be replicated using the example application

Further Comments

Could it be that wagmi is not compatible with mobile browsers and there is something I am overlooking?

Thank you.

javascriptmobilenext.jsethereumethers.js

Answer №1

After testing your repository link on my mobile device (iPhone SE 2nd generation running Safari on iOS 16.1.1), I can confirm that it performed well without any issues.

It's possible that the default Next configuration is not optimized for the specific device you are currently using for testing.

To address this, you have the option to customize Next to support targeted browsers by leveraging browserslist.

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

Capture all form inputs in a JavaScript array

I am struggling to collect all the form values into a regular array[]. Initially, I was able to achieve this for input tags but after adding some select tags, I am facing difficulties. Previously, for only input tags, this code worked: var content = docu ...

javascriptjqueryhtmlarrays

Using jQuery to Delete a DOM Element Once the Ajax Call is Successful

I'm currently facing an issue with removing an element after a successful ajax request. Below is my ajax code snippet: verifyRequest.denyUser = function(requestId,element){ $.ajax({ url: loaderURL+'idverified/denyRequest', ...

javascriptjqueryajaxdom

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...

javascriptjqueryhtmlcsscss-selectors

In NextJS, where is the best place to run sensitive code to ensure it is only executed server-side?

I'm currently exploring the world of NextJS and I am in the process of figuring out how to structure my project with a solid architecture that prioritizes security. However, I find myself at a crossroads when it comes to determining the best place to ...

javascriptreactjsnext.js

How to address additional attributes received from the server in Next.JS

Encountering an error while trying to render a canvas with specified height and width within a child component in a NextJs app. The issue arises when attempting to integrate this mouse effect into my NextJS application. Everything functions correctly until ...

javascriptreactjsnext.jsserver-side-rendering

I'm interested in developing a React function that generates recipe components based on a set of instructions provided in an array, along with a separate parameter specifying the recipe name

I am currently immersed in the book "Learning React" written by O'Reilly. The book mentions a method of creating components by using a function known as the "component creating function". It advises supplying the necessary parameters as the second par ...

javascriptreactjs

Getting access to scope variables in an Angular controller written in ES6 style can be achieved by using

In my new Angular project, I decided to switch to using ES6 (Babel). However, I encountered an issue where ES6 classes cannot have variables. This led me to wonder how I could set my $scope variable now. Let's consider a simple controller: class Mai ...

javascriptangularjsecmascript-6ecmascript-harmonyangular-controller

Show/Hide sections of content that transition and rearrange the layout of the page

I have a layout with 9 squares on a page. When clicking on a square, I want a full-width div to appear underneath it, pushing the other squares down. I've tried following a tutorial to understand the JavaScript behind this functionality, but I'm ...

javascriptjqueryhtmlcss

What is the best way to showcase information retrieved from a Route Handler in NextJS v13.4?

I have successfully utilized the new app router to create a route handler for a GET request and received the data in my console. Now, I am looking to integrate this data into NextJS v13.4. How can I achieve this? Below is the route handler I created to fe ...

reactjsnext.jsvercelnext.js13

Links have a longer transition delay compared to the content

In a unique JavaScript function I've developed, the my-content-section-visible class is removed and replaced with my-content-section-hidden. This change is being made to hide a particular div using a smooth transition effect. The transition itself is ...

javascripthtmlcss

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

javascripthtmlnode.jsforms

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

I am a beginner with angular 2 and I am attempting to integrate the Miso Dataset JavaScript library into my angular 2 project. The Miso library requires other JavaScript libraries as dependencies. Although I have included all the necessary JavaScript file ...

javascriptangular

In Next.js 13.1.2, what is the CLI command that asks "Do you want to utilize the `src/` folder for this project?"

We have a system in place for creating images automatically, utilizing a CLI to generate a standard Next.js application and install necessary dependencies. Here is the relevant code snippet: WORKDIR / RUN npx --yes create-next-app next --use-npm --js --e ...

next.js

Error encountered during NextJS build process: The use of dynamic code evaluation methods such as 'eval', 'new Function', and 'WebAssembly.compile' is restricted in Edge Runtime

My project, which is a React with NextJS application using middleware, consists of a frontend that consumes a backend. I'm facing issues building it. Below is the content of my package.json file: { "name": "xxxx", "versio ...

reactjsnext.jsbuild

Can the root directory of a node module be customized or specified?

When publishing a node module with source files in a src directory, users typically need to specify the full path from the module when importing a file into their project. For example: Directory Structure: my-module --src ----index.js ----something-else ...

javascriptnode.jsnpm

Htmlunit driver encounters difficulty executing Javascript

Recently, I switched my Selenium test from using FirefoxDriver to HtmlunitDriver in Java. The test was running smoothly in the Firefox browser but encountered an issue when I made this change: driver = new FirefoxDriver(); to driver = new HtmlUnitDriver ...

javascriptseleniumselenium-webdriverhtmlunithtmlunit-driver

The 'initializeOnMount' property is a necessary requirement within the definition of the 'MoralisProviderInitializedProps' type

I encountered an unexpected issue with the code below: Type '{ children: Element; appId: string | undefined; serverUrl: string | undefined; }' is not compatible with type 'IntrinsicAttributes & MoralisProviderProps'. The property ...

reactjstypescriptnext.jsmoralis

AngularJS directive facing a callback problem

Having trouble with callbacks while calling a service function This is the function defined in registrationService function checkUserAccess(incentiveLevel, callback, displayRegistrationView) { var url = "..."; httpWrapperService. ...

javascriptangularjscallback

What is the best way to store an ES6 Map in local storage or another location for later use?

let map = new Map([[ 'a', 1 ]]); map.get('a') // 1 let storageData = JSON.stringify(map); // Saving in localStorage. // Later: let restoredMap = JSON.parse(storageData); restoredMap.get('a') // TypeError: undefined is not a ...

javascriptjsondictionaryecmascript-6

I cannot seem to find any output or errors, and I am unsure of the reason behind it

I am experiencing an issue where I am not receiving any output, and I'm unsure of the cause as no errors are appearing in either the browser or command prompt. At the start of execution, I did encounter this error: WebSocketClient.js:16 WebSocket co ...

javascriptnode.jsreactjsmongodbexpress