Next.js语法错误“意外标记‘EXPORT’”

gkn4icbw  于 2022-10-21  发布在  其他
关注(0)|答案(3)|浏览(346)

我正在尝试将函数从依赖项导入到我的Next/Reaction函数组件,但不知何故一直收到以下错误:
语法错误:意外的标记‘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-如何使其正常工作?

x6492ojm

x6492ojm1#

因此NODE_MODULES文件夹中的依赖项使用ES6导入/导出模块导出函数。代码在浏览器中运行时会抛出错误,因为浏览器无法识别ES6模块语法。
原因是,默认情况下,Next.js将Babel-Loader配置为只转换src文件夹中的ES6代码,从node_模块导入的任何ES6代码都将直接进入最终包,而不会转换。
尝试修改next.config.js文件中的webpack配置,以使Babel加载程序传递ES6依赖。您可能想要使用这个程序包Next-trspile-MODULES

wbgh16ku

wbgh16ku2#

还有另一种方法:

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方法奏效了。

t3irkdon

t3irkdon3#

正如您所说的,这是一个js文件,我可以肯定地指出您的问题在下面这一行:export function classes(...args): string
在函数声明后面有一个类型脚本声明。因此,去掉: string部分,就应该没问题了。

相关问题