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

gkn4icbw 于 2022-10-21 发布在其他

关注(0)|答案(3)|浏览(347)

我正在尝试将函数从依赖项导入到我的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-如何使其正常工作？

next.js

来源：https://stackoverflow.com/questions/65936222/next-js-syntaxerror-unexpected-token-export

3条答案

按热度按时间

x6492ojm1#

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

赞(0）回复(0）举报 2022-10-21

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

赞(0）回复(0）举报 2022-10-21

t3irkdon3#

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

赞(0）回复(0）举报 2022-10-21