28

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?

Improve this question
3
  • 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? Commented Jan 28, 2021 at 11:37
  • 1
    @Gh05d yes it comes from node_modules and it's a .js file Commented Jan 28, 2021 at 11:39
  • I tried using the above solution but didn't succeed. Please help. stackoverflow.com/questions/68212291/…. Commented Jul 5, 2021 at 6:50

6 Answers 6

Reset to default
48

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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
@Tim I also have ERR_MODULE_NOT_FOUND error, have you been able to overcome this?
Why do we still need a plugin if Nextjs 12 "supports" native ES modules ?
github.com/martpie/next-transpile-modules/releases/tag/the-end
Indeed, this works with transpileModules in the settings. But it's annoying to try to find them all.
10

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.

Improve this answer

3 Comments

This worked perfectly for me, AsI am loading Google.maps which I am guessing cannot be SSR
Yes buut dynamic is for components, I'm still getting this error and I tried both transpile modules and babel preset env
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!!
3

Latest answer

change default import to "antd/lib" ex:

import {Menu} from "antd/lib

Improve this answer

Comments

2

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

Comments

1

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

Improve this answer

Comments

0

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.

Improve this answer

3 Comments

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.
I get the same error as you do. Baffliing.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.