[英]"Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js
Trying out Next.js but I'm struggling with the following.尝试 Next.js 但我正在努力解决以下问题。 Just tried to install
react-hook-mousetrap
and imported it like I normally would:只是尝试安装
react-hook-mousetrap
并像往常一样导入它:
import useMousetrap from "react-hook-mousetrap";
This gives me the following error:这给了我以下错误:
SyntaxError: Cannot use import statement outside a module
1 > module.exports = require("react-hook-mousetrap");
I am not sure what this means?我不确定这意味着什么? I then thought it might be a problem with Nextjs's SSR, since my library enables hotkeys and will use some browser APIs.
然后我认为这可能是 Nextjs 的 SSR 的问题,因为我的库启用了热键并将使用一些浏览器 API。 If you already know that I am on the wrong track here you can stop reading now.
如果您已经知道我在这里走错了路,那么您现在可以停止阅读。
What I did next however was this, I tried dynamic imports:我接下来要做的是,我尝试了动态导入:
1. Dynamic import with next/dynamic 1.用next/dynamic动态导入
First thing I came across was next/dynamic
, but this seems to be for JSX / React Components only (correct me if I'm wrong).我遇到的第一件事是
next/dynamic
,但这似乎仅适用于 JSX / React Components(如果我错了,请纠正我)。 Here I will be importing and using a React hook .在这里,我将导入和使用React 钩子。
2. Dynamic import with await (...).default 2. 使用 await (...).default 动态导入
So I tried dynamically importing it as a module , but I'm not sure how to do this exactly.所以我尝试将它作为一个模块动态导入,但我不确定如何准确地做到这一点。
I need to use my hook at the top level of my component, can't make that Component async and now don't know what to do?我需要在组件的顶层使用我的钩子,无法使该组件异步,现在不知道该怎么办?
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.
})()
//....
}
Any advice here would be appreciated!这里的任何建议将不胜感激!
The error occurs because react-hook-mousetrap
is exported as an ESM library.发生错误是因为
react-hook-mousetrap
被导出为 ESM 库。 You can have Next.js transpile it using next-transpile-modules
in your next.config.js
.您可以让 Next.js 在 next.config.js 中使用
next-transpile-modules
对其进行next.config.js
。
const withTM = require('next-transpile-modules')(['react-hook-mousetrap']);
module.exports = withTM({ /* Your Next.js config */});
I don't know if my answer is actual, but i'm facing whith this problem today, and what that i done:我不知道我的回答是否真实,但我今天面临这个问题,以及我做了什么:
//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 )
}
hope this help!)希望这有帮助!)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.