SyntaxError: Unexpected token 'export'

[devnostic]

I am getting this error when compiling my next app.

Here is my package.json { "name": "fundyouthsports-com-nextjs", "version": "1.0.0", "private": true, "scripts": { "dev": "next dev -p 3100", "lint": "next lint", "build": "next build", "start": "next start", "sass": "sass --no-source-map src/assets/scss:public/css" }, "dependencies": { "@marker.io/browser": "^0.16.0", "@popperjs/core": "^2.11.6", "@rumess/react-flip-countdown": "^1.2.6", "@stripe/stripe-js": "^1.46.0", "animate.css": "^4.1.1", "bootstrap": "^5.2.3", "bootstrap-icons": "1.10.3", "clipboard": "^2.0.11", "cookies-next": "^2.1.1", "date-fns": "2.29.3", "dayjs": "^1.11.7", "glightbox": "^3.2.0", "glob": "8.1.0", "isotope-layout": "^3.0.6", "itooltip": "^1.1.1", "next": "^13.3.2", "plyr-react": "^5.1.2", "progressbar.js": "^1.1.0", "react": "18.2.0", "react-avatar-editor": "^13.0.0", "react-countup": "^6.4.1", "react-dom": "18.2.0", "react-easy-crop": "^4.7.0", "react-flatpickr": "^3.10.13", "react-google-recaptcha-v3": "^1.10.1", "react-gtm-module": "^2.0.11", "react-scroll": "^1.8.9", "react-share": "^4.4.1", "react-syntax-highlighter": "^15.5.0", "scrollcue": "^2.0.0", "sharp": "^0.31.3", "stripe": "^11.11.0", "sweetalert2": "^11.7.1", "sweetalert2-react-content": "^5.0.7", "swiper": "^9.1.0", "typewriter-effect": "^2.19.0" }, "devDependencies": { "@types/bootstrap": "^5.2.6", "@types/isotope-layout": "^3.0.9", "@types/node": "18.14.6", "@types/progressbar.js": "^1.1.2", "@types/react": "18.0.28", "@types/react-countup": "^4.3.1", "@types/react-dom": "18.0.11", "@types/react-scroll": "^1.8.6", "@types/react-syntax-highlighter": "^15.5.6", "eslint": "^8.35.0", "eslint-config-next": "13.2.3", "sass": "^1.62.1", "typescript": "4.9.5" } }

[rhammel-aip]

this started happening on my builds today, looks like countup.js had a new release today that is causing the break

[devnostic]

Yes, I temporarily fixed it by adding this to dependencies

"countup.js": "2.5.0",

[rhammel-aip]

I added this to my package,json file to get around this issue

  "resolutions": {
    "react-countup/countup.js": "2.5.0"
  },

[aaron1999x]

thanks pointing this out , i thought i was going crazy as i kept getting an error , hope its resolved soon

[mmarkelov]

Hello, guys! Thanks for letting know. Seems like related to countup

[risuvoo]

I fetching the same issue

[SK-ERIC]

I added this to my package,json file to get around this issue

  "resolutions": {
    "react-countup/countup.js": "2.5.0"
  },

Thank you! I'm delighted to see your solution this early in the morning. I actually ran into the same issue when I deployed it last night.

[inorganik]

Sorry to hear about this issue. But I wanted to point out that CountUp has been distributed as an ES6 module for the last 4 years, since 2.0. But the change that I believe caused the issue was in 2.6.1 of CountUp (you can pin at 2.6.0 and not be affected by this) I set "main" in package.json to use the ES6 module, and previously it was using the UMD module.

before:

{
    "name": "countup.js",
    "main": "./dist/countUp.umd.js",
    "module": "./dist/countUp.min.js",

after:

{
    "name": "countup.js",
    "main": "./dist/countUp.min.js",
    "module": "./dist/countUp.min.js",

Hopefully the maintainers of this lib can fix it, but as an alternative I would like to suggest using CountUp directly in your react project instead of with this wrapper. It's actually pretty easy, and it gives you more direct control over CountUp:

https://gist.github.com/inorganik/2cf776865a4c65c12857027870e9898e

[mmarkelov]

Some investigations. We already have the pretty same situation 2 years ago: https://github.com/inorganik/countUp.js/issues/262 https://github.com/glennreyes/react-countup/issues/519

I am not sure what was the particular reasons to change "main" in package.json to use the ES6 module. Almost all libraries use the UMD module as the default entry point. I guess it can be fixed with defining exports in countup package:

// package.json
...
"main": "./dist/countUp.min.js",
"module": "./dist/countUp.min.js",
"types": "./dist/countUp.d.ts",
"exports": {
    ".": {
      "types": "./dist/countUp.d.ts",
      "require": "./dist/countUp.umd.js",
      "import": "./dist/countUp.min.js",
      "umd": "./dist/countUp.umd.js",
      "default": "./dist/countUp.min.js"
    },
    "./package.json": "./package.json"
  },
...

[mmarkelov]

but as an alternative I would like to suggest using CountUp directly in your react project instead of with this wrapper. It's actually pretty easy, and it gives you more direct control over CountUp

It is difficult to say without the repro, but i guess that it would not fix particular reason, cause there is still ES6 module is used as default entrypoint in countup. It will be nice if someone could try to use just countup without our wrapper

[inorganik]

There is a stackblitz link in the gist, here it is: https://stackblitz.com/edit/react-ts-nv5fxe?file=App.tsx

I updated the deps to use the latest version of CountUp.

@mmarkelov I'm open to reverting that change and making "main" point to the UMD module again, or adding exports section.

[mmarkelov]

There is a stackblitz link in the gist, here it is: https://stackblitz.com/edit/react-ts-nv5fxe?file=App.tsx

I updated the deps to use the latest version of CountUp.

@mmarkelov I'm open to reverting that change and making "main" point to the UMD module again, or adding exports section.

I'm referring to the reproduction of the next js bug. Unfortunately, I haven't been able to reproduce it myself. I'm curious if it is acceptable to use countup without a wrapper or is it still considered an error? Before reverting, i would like to confirm with certainty that it's not related to react-countup. Thank you for your help.

[EldinZaimovic]

I am getting the same error

[mmarkelov]

If you are encountering an issue and would like help in resolving it, please refrain from simply stating that you are facing an issue. Instead, kindly provide a representation of the bug. Ideally, it would be helpful if you could verify whether the error still persists after using countup without our wrapper. Otherwise, please, use workaround by @rhammel-aip https://github.com/glennreyes/react-countup/issues/805#issuecomment-1530117233 Thank you for your cooperation in this matter.

[AndjelaRis]

I was experiencing the same issue. I have a simple Next.js project. I've tried this workaround by @rhammel-aip https://github.com/glennreyes/react-countup/issues/805#issuecomment-1530117233 and it didn't work for me.

But this one did:

import dynamic from 'next/dynamic';

const CountUp = dynamic(() => import('react-countup'), { ssr: false });

// Usage example
const MyComponent = () => {
  return <CountUp start={0} end={10} />;
}

[rohrlaf]

@AndjelaRis proposal:

But this one did:

import dynamic from 'next/dynamic';

const CountUp = dynamic(() => import('react-countup'), { ssr: false });

// Usage example
const MyComponent = () => {
  return <CountUp start={0} end={10} />;
}

Using dynamic imports with React's lazy for react-countup works as well:

import React, {lazy} from 'react';

const CountUp = lazy(() => import('react-countup'));

export default function MyComponent() {
  return <CountUp start={0} end={10} />;
}

Note: I did not add a resolutions entry for react-countup/countup.js as proposed by @rhammel-aip https://github.com/glennreyes/react-countup/issues/805#issuecomment-1530117233

[diegoruelasgalaviz]

Guys you are amazing really! starting happening to me as well thanks god i find this link https://app.bountysource.com/issues/121541843-syntaxerror-unexpected-token-export, the answer for now is t change version "react-countup": "^2.5.0",

[saaiful]

I added this to my package,json file to get around this issue

  "resolutions": {
    "react-countup/countup.js": "2.5.0"
  },

Thank you, this solved my issue.

[evaei]

I added this to my package,json file to get around this issue

  "resolutions": {
    "react-countup/countup.js": "2.5.0"
  },

I appreciate it, this solution has indeed resolved my issue.

[nop1984]

as mentionend pinning v 2.6 by "resolutions" works

for nextjs this also works with v2.6.2 of countup.js

const withTM = require('next-transpile-modules')(["react-countup", "countup.js"]);

module.exports = withTM(...

[jorgegarba]

After reading and reading a tons of articles about this error, I had to start with another library called use-count-up. Regards

[inorganik]

Apologies for the delay, I was hoping this lib could update to use the module code instead of the umd module of CountUp.js which exposes a global variable. I went ahead and reverted the change so that "main" in package.json of CountUp.js points to the umd module again in the latest version, 2.7.0.

So now there should be 3 good options for using CountUp.js with react:

1. Use it directly, it's easy! https://gist.github.com/inorganik/2cf776865a4c65c12857027870e9898e
2. Use this lib, it is the original react wrapper and well-used
3. use-count-up - looks like it is something completely separate and does not use CountUp.js but looks good.

I believe this issue could be closed now.

[mmarkelov]

@inorganik apologies for any inconvenience. The principal reasons behind my decision not to introduce any changes to the library are as follows:

Firstly, the possible fix appears to be potentially unsafe, increasing the risk of introducing more bugs for all users. Secondly, I have not yet seen any concrete evidence confirming that the problem is specifically related to the react-countup library. Thus, I remained uncertain about the actual cause of the problem, leading me to refrain from taking action at this point.

I will keep this issue open for a while. Maybe someone provides a clear representation or further insight into this issue, so it would greatly assist me in understanding the root of the problem.

Once again, my apologies for any difficulties.

[diegoruelasgalaviz]

@mmarkelov i upgraded "react-countup/countup.js": "2.5.0" moths ago and is still working, can we close this issue, being the solution upgrading "react-countup/countup.js": "2.5.0" ?