Next.js 语法错误“意外的标记‘导出’”

Question

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

语法错误：意外的标记“导出”

这就是我要导入的功能：

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.d.ts毗邻classes.js上述：

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

从项目中以相同的方式导出此代码工作正常，但当我使用node_modules. 为何如此？

阅读有关next-transpile-module，但也无法使其与此一起运行。

使导入工作的唯一方法是使用相对路径../../node_modules/thedependency/class- 如何使其正常工作？

Answer 1

还有另一种方法：

import dynamic from 'next/dynamic'

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

// ...


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

发现于/sf/answers/4251703711/

语境：

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

这个dynamic方法奏效了。

Answer 2

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

原因是，默认情况下，Next.js 将 babel-loader 配置为仅转译 src 文件夹中的 ES6 代码，任何从 node_modules 导入的 ES6 代码将直接进入最终包，而无需转译。

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