在 Next.js 中导入 react-hook-mousetrap 时出现“无法在模块外使用 import 语句”错误

Posted 2023-02-22

【中文标题】在 Next.js 中导入 react-hook-mousetrap 时出现“无法在模块外使用 import 语句”错误

【英文标题】："Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js

【发布时间】：2021-05-20 12:29:05

【问题描述】：

尝试 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 的 s-s-r 的问题，因为我的库启用了热键并将使用一些浏览器 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.

    )()

 //....

如有任何建议，我们将不胜感激！

【参考方案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 */);

【参考方案2】：

我不知道我的回答是否真实，但我今天面临这个问题，以及我做了什么：

//test component for modal 
const Button: React.FC<close?: () => void> = ( close ) => (
 <React.Fragment>
    <button type="button" onClick= close >Close</button>
 </React.Fragment>
);

// async call import react custom hook in next js whithout a dynamic 
//import
let newHook;

(async () => 
 const  hookFromNodeModules  = 
 await import('path/to/hook');

 newHook = hookFromNodeModules;
)();

export default function Home() 
// check if hook is available
const openModal = newHook && newHook();

const  t  = useTranslation('common');

// useCallback for update call function when hook is available
const handleOpen = React.useCallback(() => 
    openModal?.openModal(Button, );
, [openModal]);

 return ( ...your code )

希望对您有所帮助！）

screen from next.js app