Next.js SyntaxError “Unexpected token ‘export'”

by

UPDATE: All features of next-transpile-modules are now natively built-in Next.js 13.1. you should be able to use Next’s transpilePackages option to transpile external packages

Old Answer: So the dependency in node_modules folder exports a function using ES6 import/export module. The code will throw error when it running in browser since browser cannot recognize the ES6 module syntax.

The reason is that, by default, Next.js configs the babel-loader to only transpile the ES6 code in the src folder, any ES6 code imported from node_modules will directly go into final bundle without transpiling.

Try to modify the webpack config in next.config.js file to let the babel loader transpile the es6 dependency. You may want to use this package next-transpile-modules

More Related Contents:

  1. How to add new pages without rebuilding an app with +150k static pages?
  2. useRouter/withRouter receive undefined on query in first render
  3. NEXTJS: getServerSideProps not working into components
  4. Fresh NextJS App throwing errors before any changes
  5. Error: A required parameter (slug) was not provided as a string in getStaticPaths for /posts/[slug]
  6. How can I get (query string) parameters from the URL in Next.js?
  7. Dynamic Importing of an unknown component – NextJs
  8. Parsing error : Cannot find module ‘next/babel’
  9. Error: Image Optimization using Next.js default loader is not compatible with `next export`
  10. Next/Image’s components are too slow to appear
  11. import Router from ‘next/router’ is it ok?
  12. For Next.js Dynamic Routes, it is possible to combine a string with a [slug]?
  13. Cannot find module or type declarations while it works in local build
  14. Next failed to load SWC binary
  15. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  16. How to access files uploaded to the public folder in Next.js?
  17. How can I keep Google Cloud Functions warm?
  18. Next.js – Error: only absolute urls are supported
  19. Warning: Function components cannot be given refs
  20. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  21. Environment variables not working (Next.JS 9.4.4)
  22. How to override global CSS in a CSS module file?
  23. How to generate dynamic paths for non-default locales in Next.js?
  24. NextJs CORS issue
  25. How to dynamically import non-React client side libraries in Next.js?
  26. how to add domains to next.config.js for “next/image” while using a plugin
  27. React + Material-UI – Warning: Prop className did not match
  28. How to combine and use multiple Next.js plugins
  29. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  30. How to handle login failed error in NextAuth.js?

Leave a Comment