CODEWITHSUNDEEP
next.js
Johnny Kontrolletti
Johnny Kontrolletti

Reputation: 909

Next.js SyntaxError "Unexpected token 'export'"

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?

Upvotes: 28

Views: 61478

Answers (6)

elad BA
elad BA

Reputation: 1978

Latest answer

change default import to "antd/lib" ex:

import {Menu} from "antd/lib

Upvotes: 3

Kunal Tyagi
Kunal Tyagi

Reputation: 4197

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

Upvotes: 1

MarkoCen
MarkoCen

Reputation: 2324

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

Upvotes: 48

Adel
Adel

Reputation: 6288

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'],
}

Upvotes: 2

Gus
Gus

Reputation: 7555

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://stackoverflow.com/a/60738624/3051080

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.

Upvotes: 10

Gh05d
Gh05d

Reputation: 8992

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.

Upvotes: 0

Related Questions