Next.js SyntaxError“意外的令牌'导出'”答案

【问题标题】：Next.js SyntaxError "Unexpected token 'export'"Next.js SyntaxError“意外的令牌'导出'”
【发布时间】：2021-05-02 07:05:40
【问题描述】：

我正在尝试将一个函数从依赖项导入到我的下一个/反应功能组件，但不知何故我不断收到以下错误：

SyntaxError: Unexpected token 'export'

这就是我要导入的函数：

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(" ");

上面的classes.js旁边还有一个classes.d.ts：

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

从项目中以相同方式导出此代码可以正常工作，但当我使用来自node_modules 的外部库时就不行了。怎么样？

阅读有关next-transpile-module 的信息，但也无法使用它运行它。

使导入工作的唯一方法是使用相对路径../../node_modules/thedependency/class - 我怎样才能使其正常工作？

【问题讨论】：

所以这来自node_modules？如果没有，您能否尝试将第一个花括号与声明移动到同一行？这是唯一对我来说有点不对劲的事情。啊，是ts文件吗？
@Gh05d 是的，它来自 node_modules，它是一个 .js 文件
我尝试使用上述解决方案但没有成功。请帮忙。 stackoverflow.com/questions/68212291/….

标签： next.js

【解决方案1】：

所以 node_modules 文件夹中的依赖项使用 ES6 导入/导出模块导出函数。由于浏览器无法识别 ES6 模块语法，因此代码在浏览器中运行时会抛出错误。

原因是 Next.js 默认配置 babel-loader 只转译 src 文件夹中的 ES6 代码，任何从 node_modules 导入的 ES6 代码将直接进入最终的 bundle 而不转译。

尝试修改next.config.js文件中的webpack配置，让babel loader转译es6依赖。你可能想使用这个包next-transpile-modules

【讨论】：

感谢提示！使它起作用的是使用const withTM = require("next-transpile-modules")(["mojave/classes"]);。奇怪的是，像 require("next-transpile-modules")(["mojave"]); 这样编译整个包（它应该工作的方式）会失败 - 你知道怎么回事吗？尝试转译mojave 会抛出无法找到包的错误。
我不知道.. 我认为这取决于 mojave 包如何构建其代码。从 next-transpile-module 的自述文件来看，它需要转译包在 package.json 中有一个有效的 main 字段
@Tim 我也有 ERR_MODULE_NOT_FOUND 错误，你能克服这个吗？
@agentp 是的，如果我没记错的话，我实际上必须编辑包本身 - 缺少 index.js/ts。

【解决方案2】：

还有另一种方式：

import dynamic from 'next/dynamic'

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

// ...


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

发现于https://stackoverflow.com/a/60738624/3051080

上下文：

我遇到了同样的错误：Unexpected token 'export';为浏览器（客户端）创建了 node_modules 依赖项。我尝试了@MarkoCen 的答案，但没有成功，因为后来我收到了window is not defined 错误。

dynamic 方法成功了。

【讨论】：

这对我来说非常有效，因为我正在加载我猜不可能是 SSR 的 Google.maps

【解决方案3】：

正如你所说，它是一个 js 文件，我很确定你的问题是在这一行：export function classes(...args): string

您在函数声明后面有一个 Typescript 声明。所以删除: string 部分就可以了。

【讨论】：

对不起，我复制了我修改的函数以将其包含在我的项目中 - 我用实际函数更新了问题。即使它只是返回return "some string"，我也会得到同样的错误。
这个问题在过去的几个小时里让我很生气。
还有一个classes.d.ts。我将其添加到问题中。
我只是将函数复制到我的代码中并导入它，我没有任何问题。除了最后缺少一个花括号并且它返回数字而不是字符串。不知道对你有没有帮助。
将它复制到我的代码中也可以正常工作，但是从 node_modules 导入它会破坏它。如果你先npm i mojave 然后import {classes} from "mojave/classes". 会发生什么