nextjs + ahooks 报错 Cannot use import statement outside a module

在 nextjs 中使用 ahooks 时，报错 SyntaxError: Cannot use import statement outside a module，如下图所示：

解决方案

• transpilePackages 官网介绍

Next.js can automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (node_modules). This replaces the next-transpile-modules package.

翻译：Next.js 可以自动从本地包（如 monorepos ）或外部依赖项转译和捆绑依赖项 node_modules 。这将替换 next-transpile-modules 包。

• 配置

/** @type {import('next').NextConfig} */

const nextConfig = {
  transpilePackages: ['ahooks'],
}
 
module.exports = nextConfig

参考文档：

• https://github.com/alibaba/hooks/issues/2254
• https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

欢迎访问：天问博客