“Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js

by

The error occurs because react-hook-mousetrap is exported as an ESM library. You can have Next.js transpile it using next-transpile-modules in your next.config.js.

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

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

More Related Contents:

  1. Next.js context provider wrapping App component with page specific layout component giving undefined data
  2. The useState set method is not reflecting a change immediately
  3. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  4. Window is not defined in Next.js React app
  5. How can I use multiple refs for an array of elements with hooks?
  6. Invalid hook call. Hooks can only be called inside of the body of a function component
  7. Can I set state inside a useEffect hook
  8. How to call an async function inside a UseEffect() in React?
  9. Why is useState not triggering re-render?
  10. How to register event with useEffect hooks?
  11. Is there a generic way to set state in React Hooks? How to manage multiple states?
  12. React Function Components with hooks vs Class Components
  13. React hooks: accessing up-to-date state from within a callback
  14. React Hooks – What’s happening under the hood?
  15. useEffect does not listen for localStorage
  16. Determine which dependency array variable caused useEffect hook to fire
  17. React hooks: call component as function vs render as element
  18. React hooks useState setValue still rerender one more time when value is equal
  19. unable to deploy next js to azure
  20. Updating state to the same state directly in the component body
  21. Next.js: Error: React.Children.only expected to receive a single React element child
  22. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  23. React Hook “useEffect” is called conditionally
  24. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  25. Performance penalty of creating handlers on every render with react-hooks
  26. Function inside functional component in React hooks – Performance
  27. how can I use top level “await” in typescript next.js
  28. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. Why would we use useEffect without a dependency array?

Leave a Comment