Transpile for Next.js compatibility

[jasonrundell]

When using react-mega-menu in a Next.js project, the following error occurs when building:

npm run build

> jasonrundell2024@1.0.0 build
> next build

info  - Loaded env from C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\.env

./components/Character.jsx
51:6  Warning: React Hook useEffect has a missing dependency: 'character.quotes'. Either include it or remove the dependency array. If 'setRandomQuote' needs the current value of 'character.quotes', you can also switch to useReducer instead of useState and read 'character.quotes' in the reducer.  react-hooks/exhaustive-deps

./components/contentful-image.js
8:10  Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Linting and checking validity of types
info  - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\babel.config.js
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data ..C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\node_modules\@jasonrundell\react-mega-menu\dist\index.es.js:1
import kr, { useState as xe, useRef as mt, useEffect as $e } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at 5703 (C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\.next\server\pages\index.js:722:18)
    at __webpack_require__ (C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\.next\server\webpack-runtime.js:25:42)
    at C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\.next\server\chunks\936.js:202:87

> Build error occurred
Error: Failed to collect page data for /
    at C:\Users\admin\Documents\GitHub\jasonrundell\jasonrundell2024\node_modules\next\dist\build\utils.js:1062:15 {
  type: 'Error'
}

The error you're encountering is due to the @jasonrundell/react-mega-menu package using ES module syntax (import) in a context where CommonJS syntax (require) is expected. This can happen if the package is not properly transpiled for use in a Node.js environment.