Error: Unexpected token 'export' in NextJS Syntax

A situation has arisen where a library that was functioning perfectly in an app utilizing react-create-app is now needed for use in NextJS (using npx create-next-app --ts). However, upon attempting to integrate the library, an error was encountered:

error - /home/ubuntu/workspace/uikit-showcase-next/node_modules/@orgname/uikit/index.js:1
export * from './components/atom';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.@orgname/uikit (/home/ubuntu/workspace/uikit-showcase-next/.next/server/pages/index.js:87:18)
    at __webpack_require__ (/home/ubuntu/workspace/uikit-showcase-next/.next/server/webpack-runtime.js:25:42)
    at Object../pages/index.tsx (/home/ubuntu/workspace/uikit-showcase-next/.next/server/pages/index.js:20:75) {
  page: '/'
}
reactjstypescriptnext.js

Answer №1

Resolved the problem by switching the library target from 

"target": "es6",
to 
"target": "es5",

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

Steps for Properly Defining Next.js getServerSideProps as a Function Declaration

I've been working on implementing getServerSideProps (additional information available here, and detailed API documentation here), but my challenge lies in utilizing it as a function declaration instead of an expression. Despite searching for relevant ...

typescriptnext.js

Changing the Material UI imported Icon on click - a step-by-step guide

Hey there, I'm currently working with React JS and Redux. I have a challenge where I need to change the star outline icon to a filled star icon on click. The icon is located just after emailRow in the emailRow__options section. Can someone assist me w ...

javascriptreactjsreduxmaterial-ui

What is the best way to show 'A & B' instead of 'A & B' in a NextJs project?

Upon fetching data from an API, I encountered an issue where 'A & B' is being displayed as A & B in NextJs. Can someone provide guidance on how to revert symbols like '&' or others back to their original form instead ...

reactjsnext.js

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

javascripthtmlangulartypescript

The variable 'React' has been declared but appears to be unused, what might be causing this problem?

Currently, I am developing a contact application using Python with React. While utilizing Vite and Flask for development, I encountered an error stating that 'React' is defined but never used. Below is a snippet of my code structure: This sectio ...

reactjspython-3.xflaskvite

Create a list using ReactJS

I've been working on rendering a dynamic list in JSX, but I'm facing issues displaying the items. Below is my code snippet where I attempted to use useState const [orderList, setOrderList] = useState([]) and setOrderList(prev => [...prev, chil ...

javascriptreactjs

customized autocomplete with visual symbols

Hello, I'm currently working on incorporating a material UI autocomplete dropdown with an icon next to the displayed text. While my implementation is functional, I've encountered an issue where the selected option is not being displayed. The prob ...

reactjsselectautocompleteiconsmaterial-ui

How can I display input only when a checkbox is selected? React with Next.js

I'm trying to figure out how to handle this task, but I'm a bit confused on the approach. I would like to display the promo code field only when the checkbox (I have a promo code) is checked. Additionally, it would be ideal to reveal this field ...

javascriptreactjsnext.js

What could be causing the TypeError I encounter when trying to import @wordpress/element?

Encountering a similar issue as discussed in this related question. This time, I've switched to using '@wordpress/element' instead of 'react-dom/client' based on the recommendation that it also leverages React functionalities. Ho ...

javascriptphpreactjswordpressreact-dom

Using React.js to select and change the color of an element

I'm developing a movie theater app, in which I am building a feature to select seats in the cinema hall and add them to the cart. Here is the function that displays the cinema hall: export default function CinemaHall(props) { const row = props.row ...

javascriptreactjs

Nextjs: Fallback for Loading or Suspense will not be displayed in a production environment

After updating to nextjs v13, I have successfully moved my personal page to the app directory. I experimented with adding loaders for RSCs by first using the fallback prop of the Suspense component and also including a loading component within each route ...

reactjsnext.jsvercelreact-server-components

What is the reason behind TS not using Symbols for enums?

When it comes to enums, ES6 symbols provide a great solution for avoiding collisions. Initially, I assumed that TypeScript's enum type used Symbols for enums if the target was set to 'es6', but it turns out it doesn't: enum Role {Emplo ...

typescriptenums

Please provide the link to your ReactJS app that is hosted on Azure's static web app, or simply refresh the

I currently have a ReactJS application hosted on Azure StaticWebApp that interacts with API endpoints for backend functionality. I am looking to share specific URLs, similar to how we include them in emails, so users can easily access pages like https://w ...

reactjsazure-static-web-app

What is the best way to add a button over an image using Tailwind CSS in Next.js?

I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWrite ...

htmlcssnext.jstailwind-css

Implementing ESM in your next.config.js file is critical for optimizing

Currently, I am in the process of optimizing a Next.js project and came across the requirement to include type: 'module' in thepackage.json file. However, this led to an error being thrown: Error [ERR_REQUIRE_ESM]: Must use import to load ES Mo ...

javascriptnode.jsnext.js

Receiving a "Failed prop type" warning when passing a NavLink to a Material UI component using the containerElement prop

<RaisedButton containerElement={NavLink} to="/somewhere"> Somewhere </RaisedButton> Generates the following warning message: Warning: Failed prop type: Invalid prop `containerElement` provided to `RaisedButton`. in RaisedButton (located at ...

reactjsreact-routermaterial-ui

Experiencing issues with implementing npm package oddslib

Has anyone experienced issues with using the oddslib npm package for converting betting odds? I keep getting an error message stating "invalid odds" when trying to use this package. If you have any tips on how to properly utilize it or if you have successf ...

reactjsnpmreact-forms

Obtain an instance tuple from tuple classes using TypeScript 3.0 generic rest tuples type

When it comes to retrieving the correct instance type from a class type, the process typically involves using the following code: type Constructor<T = {}> = new (...args: any[]) => T class Foo {} function getInstanceFromClass<T>(Klass: Co ...

typescripttuplestypescript-genericstypescript3.0

Sending data to Layout for customizable routes (App Router) in Next.js version 13

Looking to pass props to the Layout component for dynamic routes in my project structure: /app -/(site) --/layout.tsx --/page.tsx --/[slug]/page.tsx --/[slug]/layout.tsx In the site layout: export default async function IndexRoute({ children }: { chil ...

javascriptnext.jsnext.js13nextjs-dynamic-routing

React - Uncaught Error: e.preventDefault is not a function due to Type Error

Encountering an issue with Axios post and react-hook-form: Unhandled Rejection (TypeError): e.preventDefault is not a function The error arises after adding onSubmit={handleSubmit(handleSubmitAxios)} to my <form>. Seeking to utilize react-hook-form ...

javascriptreactjsmaterial-uireact-hook-form