Next.js SyntaxError "Unexpected token 'export'"

Question

I'm trying to import a functions from a dependency to my next/react functional component, but somehow I keep getting the following error:

SyntaxError: Unexpected token 'export'

That's the function I'm trying to import:

export function classes(...args) {
    const list = [];
    for (let i = 0; i < args.length; i++) {
        const entry = args[i];
        if (typeof entry === "string") {
            list.push(entry);
        }
        else {
            for (let key in entry) {
                if (entry[key]) {
                    list.push(key);
                }
            }
        }
    }
    return list.join(" ");

There additionally is a classes.d.ts next to the classes.js above:

export declare function classes(...args: Array<string | {
    [key: string]: any;
}>): string;

Exporting this code identically from within the project works fine, but not when I use an external library from node_modules. How so?

Read about next-transpile-module, but haven't been able to make it run with this one either.

The only way to make the import work is using relative paths ../../node_modules/thedependency/class - how can I make it work properly?

Cobwebby

So this comes from node_modules? If not, could you try to move the first curly braces on the same line as the declaration? This is the only thing which looks kind of wrong to me. Ah, and is it a ts file? – Overcoat

@Overcoat yes it comes from node_modules and it's a .js file – Cobwebby

I tried using the above solution but didn't succeed. Please help. #68212791. – Preindicate

Answer 1

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

Betts

I have no idea.. I think it depends on how mojave package structure its code. from the readme of next-transpile-module, it needs the transpiling package has a valid main field in package.json – Betts

@Tim I also have ERR_MODULE_NOT_FOUND error, have you been able to overcome this? – Buran

Why do we still need a plugin if Nextjs 12 "supports" native ES modules ? – Supererogatory

github.com/martpie/next-transpile-modules/releases/tag/the-end – Tera

Answer 2

There's another way:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('package'),
  { ssr: false }
)

// ...


// use it in render like:
<DynamicComponentWithNoSSR />

Found in https://mcmap.net/q/503468/-nextjs-react-webpackerror-window-is-not-defined

Context:

I was getting the same error: Unexpected token 'export'; with a node_modules dependency made for the browser (client-side). I tried with @MarkoCen's answer with no luck, because I got a window is not defined error later.

The dynamic approach did the trick.

Sensation

This worked perfectly for me, AsI am loading Google.maps which I am guessing cannot be SSR – Mealy

Yes buut dynamic is for components, I'm still getting this error and I tried both transpile modules and babel preset env – Unweave

This ended up helping me import @microsoft/mgt-react into a Next Js v12 project. Thank you! I'm assuming the reason this works is because it's working around the build-time loader and using an ES6 friendly loader, next/dynamic. I probably could have fixed my build-time loader but lost hours of my life trying to figure out how!! – Kipp

Answer 3

Next.js 13 has an option called transpilePackages that is somewhat equivalent to next-transpile-modules, check the docs here: https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages.

I use it for youtubei.js on 'next.config.js'

experimental: {
    transpilePackages: ['youtubei.js'],
}

Faience

Answer 4

Latest answer

change default import to "antd/lib" ex:

import {Menu} from "antd/lib

Irrepressible

Answer 5

As you said that it is a js file, I am pretty sure to pinpoint your problem to this line: export function classes(...args): string

You have a Typescript declaration behind the function declaration. So remove the : string part and you should be fine.

Overcoat

I just copied the function into my code and imported it and I had no problems. Except that a curly brace was missing at the end and that it returned numbers instead of strings. Don't know whether that is helpful to you. – Overcoat

I get the same error as you do. Baffliing. – Overcoat

Just a guess, but export is es6 syntax. But I guess your webpack or whatever you use expects module.exports. So maybe you would have to run it through a babel-loader or something similar for it in order to work. – Overcoat

Answer 6

In my case, updating node.js version make it work!

Reeducate