Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

For access to the code, click here => https://codesandbox.io/s/sweet-mcclintock-dhczx?file=/pages/index.js

The initial issue arises when attempting to use @iconify-icons/cryptocurrency with next.js and typescript (specifically in typescript).

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///@iconify-icons/cryptocurrency/usdt:1:18)
    at Object.@iconify-icons/cryptocurrency/usdt (/sandbox/.next/server/pages/index.js:409:1)
    at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
    at eval (webpack-internal:///./pages/index.js:9:92)
    at Module../pages/index.js (/sandbox/.next/server/pages/index.js:398:1)
    at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
    at /sandbox/.next/server/pages/index.js:91:18
    at Object.<anonymous> (/sandbox/.next/server/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
/sandbox/node_modules/@iconify-icons/cryptocurrency/usdt.js:6
export default data;

This issue does not occur with all libraries. It appears that there may be a problem with the library syntax during the Babel transpilation process.

To address this, I attempted to transpile the library next-transpile-modules using the following code snippet.

const withTM = require("next-transpile-modules")([
  "@iconify-icons/cryptocurrency"
]);

module.exports = withTM();

However, a new error occurred.

Error: next-transpile-modules - an unexpected error occurred while trying to resolve "@iconify-icons/cryptocurrency"
Error: Can't resolve '@iconify-icons/cryptocurrency' in '/sandbox'
    at getPackageRootDirectory (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:87:11)
    at Array.map (<anonymous>)
    at generateModulesPaths (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:99:33)

In conclusion, my current approach involves transpiling the module to tackle the main goal, but it may not be necessary.

javascripttypescriptbabeljsnext.js

Answer №1

In order to use the @iconify-icons/cryptocurrency library, you must transpile each individual icon package that you plan to utilize.

const withTM = require("next-transpile-modules")([
  "@iconify-icons/cryptocurrency/usdt"
]);

module.exports = withTM();

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

Using getJSON to return key/value pair from local host URL in JSFiddle - A step-by-step guide

After following a tutorial on building an API using Python, Flask, SQLite, and SQLAlchemy, I have successfully tested the connection by hitting the localhost address in my browser. Now, I am curious if it is possible to test this connection and see the des ...

javascriptjsonajaxjsfiddle

Swap out a specific object within an observable array by comparing object properties

Currently, I am retrieving an observable array of custom IPix objects (Observable<IPix[]>) from a database using an API. After that, I update a record in the database by sending an edited version of the IPix object back to the API through a PUT reque ...

angulartypescriptobservableangular14

Input must be either a 12-byte string, a 24-character hexadecimal string, or an integer

As a beginner in coding, I am struggling to understand and fix this issue. If anyone could lend a helping hand, I would be truly grateful. Error Message: BSONTypeError - Argument passed in must be a string of 12 bytes or a string of 24 hex characters or a ...

javascriptnode.jsexpress

How much will it set me back for '`$(this)`?

Many individuals in this community frequently recommend caching the jQuery object generated from a DOM element, as illustrated by the following code snippet: $('#container input').each(function() { $(this).addClass('fooClass'); ...

javascriptjqueryperformance

Difficulty capturing emitted events from child components in Vue.js2

Currently, I'm working on developing a Bootstrap tabs component using Vuejs. The tabs component is divided into two parts - the parent tabs-list component that contains multiple tab-list-item components. Take a look at the code for both these componen ...

javascriptvue.jsvuejs2

Changing an array of arrays into an object using javascript

Here is an example array: var arrays = [ { "name": "aaa", "value": "bbb" }, { "name": "ccc", "value": "ccc" }, { "name": "ddd", "value": [ & ...

javascriptjqueryarraysstringobject

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

How to solve the issue "Error: Nextjs requires a column ID (or string accessor) in react-table"

() After attempting to follow the instructions in the react-table documentation regarding sub-components, I encountered the same error even when utilizing the basic table implementation. This is how my data.json file is structured: { "orderId&quo ...

reactjsnext.jsreact-table

Are you looking to load pictures using jQuery?

I am currently using a ul li menu setup as follows: <ul> <li><a href="#1">Image #1</a></li> <li><a href="#2">Image #2</a></li> <li><a href="#3">Image #3</a></li> ...

javascriptjqueryload

Encountering a problem in a NextJS application where an error occurs stating "cannot read property of undefined (reading setState)" within

In an attempt to resolve the issue, I have linked the method to this inside the constructor. Additionally, I have utilized the arrow function technique to address the problem at hand. Despite these efforts, I continue to encounter the following error: Unha ...

javascriptnode.jsreactjsnext.jsjsx

When clearInterval is used, the value of the variable is wiped out

My goal is to constantly update the text of a <p> element every 100ms, increasing the number by one each time. This process should only be triggered when the user clicks on the screen and stop once the user releases the click. The issue I'm fac ...

javascriptjquery

Updating a global variable in Angular after making an HTTP call

I'm facing a challenge where I have a global variable that needs to be updated after an HTTP GET call. Once updated, I then need to pass this updated variable to another function. I'm struggling to figure out the best approach for achieving this. ...

javascriptangularjs

Transforming TypeScript snapshot data in Firebase Cloud Functions into a string format for notification purposes

I've encountered the following code for cloud functions, which is intended to send a notification to the user upon the creation of a new follower. However, I'm facing an issue regarding converting the snap into a string in order to address the er ...

typescriptfirebasefirebase-cloud-messaginggoogle-cloud-functions

Error Encountered: Unexpected Identifier in Angular 7 External jQuery Plugin

Struggling to convert a jQuery template to Angular7, I'm facing an issue with loading .js files from the assets folder in the original template to make it functional. Upon starting the application with: ng serve, I encounter the following error in th ...

javascriptjqueryangularwebpacktsconfig

Utilizing PHP and JavaScript in a multi-page setting

Apologies for the length of this post in advance. I've been struggling with a coding issue for quite some time now and haven't been able to find a solution. To provide more context and help to those who might assist me, I'm including most of ...

javascriptphpjqueryajax

The Express request parameter ID throws an error due to the index expression not being of type 'number', causing the element to implicitly have an 'any' type

Is there a way to assign a type to an ID request parameter? It appears that the types of Express treat request params as any. This is the code snippet where I am trying to access the ID from the request: const repository: Repository = { ...reposit ...

typescriptexpress

What is the best way to delete previously entered characters in the "confirm password" field after editing the password

Is there a way to automatically remove characters in the confirm password field if characters are removed from the password field? Currently, when characters are entered into the password field, characters can also be entered into the confirm password fiel ...

htmlangulartypescript

Is the navigation component's loss of properties due to a React router error?

After implementing react router for the first time, I noticed that the props passed to my nav component get lost once a new route is rendered. It's like the items in the cart are disappearing when I click checkout, but reappear correctly when I go bac ...

javascriptreactjs

JavaScript may not display height as anticipated

Currently, I am experimenting with JavaScript in order to achieve a website section that is 100% the height of the screen minus the "nav" bar. Imagine it as having two visible components - the first one being large and the second one small at the bottom. ...

javascriptjqueryhtmlcss

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

limitExceed(params: any) { params.forEach((data: any) => { if (data.humidity === 100) { this.createNotification('warning', data.sensor, false); } else if (data.humidity >= 67 && data.humidity <= 99.99) { ...

javascriptangulartypescript