Question

这里是初学者。正在尝试 Next.js，但我正在努力解决以下问题。只是尝试安装 react-hook-mousetrap 并像往常一样导入它：

import useMousetrap from "react-hook-mousetrap";

这给了我以下错误：

SyntaxError: Cannot use import statement outside a module
1 > module.exports = require("react-hook-mousetrap");

我不确定这是什么意思？然后我认为这可能是 nextjs 的 SSR 的问题，因为我的库启用了热键并且会使用一些浏览器 API。如果您已经知道我在这里走错了路，您现在可以停止阅读。

然而我接下来做的是：我尝试了动态导入：

1.使用 next/dynamic 动态导入

我遇到的第一件事是 next/dynamic，但这似乎仅适用于 JSX/React 组件（如果我错了，请纠正我）。在这里，我将导入和使用 React 钩子。

2.使用 await (...).default 的动态导入

所以我尝试了 dynamically importing it as a module，但我不确定如何准确地做到这一点：

我需要在组件的顶层使用我的钩子，无法使该组件异步，现在不知道该怎么做？

const MyComponent = () => {  
    
 // (1) TRIED THIS:
 const useMousetrap = await import("react-hook-mousetrap").default;
 //can't use the hook here since my Component is not async; Can't make the Component async, since this breaks stuff
 
 // (2) TRIED THIS:
    (async () => {
 const useMousetrap = (await import("react-hook-mousetrap")).default;
 // in this async function i can't use the hook, because it needs to be called at the top level.

    })()

 //....
}

这里的任何建议将不胜感激！

Answer 1

发生错误是因为 react-hook-mousetrap 被导出为 ESM 库。您可以让 Next.js 在您的 next.config.js 中使用 next-transpile-modules 对其进行转译。

const withTM = require('next-transpile-modules')(['react-hook-mousetrap']);

module.exports = withTM({ /* Your Next.js config */});

NextJS + react-hook-mousetrap：“不能在模块外使用导入语句”-钩子的动态导入？

1 个答案: