Build issue making custom field with mapkit-react dependency

default discord avatar
imphillipzissou11 months ago

Howdy folks!



Am in the process of building a custom field for selecting point coordinates using mapkit-react (

https://github.com/Nicolapps/mapkit-react

) as a dependency. If I add a reference to the new field after payload has built, it'll render and work fine. However, when I attempt to build payload with the reference to mapkit-react in place, the build will fail with the attached error.



I've tried using a webpack alias, thinking that could be the issue. However, it also fails to build. Also can recreate it in a new payload app (npx create-payload-app) then add mapkit-react ( "mapkit-react":"^1.14.0") and add a reference to it from a custom field.



Any help is appreciated! Thanks!



payload-mapkit@1.0.0 build:payload
cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build

node:internal/modules/cjs/loader:1070
const err = new Error(Cannot find module '${request}');
^

Error: Cannot find module '/Users/phillip/Development/payload-mapkit/node_modules/mapkit-react/dist/mapkit-react.umd.js'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1070:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:1063:15)
at resolveExports (node:internal/modules/cjs/loader:547:14)
at Module._findPath (node:internal/modules/cjs/loader:621:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1034:27)
at Module._load (node:internal/modules/cjs/loader:901:27)
at Module.require (node:internal/modules/cjs/loader:1115:19)
at require (node:internal/modules/helpers:119:18)
at Object.<anonymous> (/Users/phillip/Development/payload-mapkit/src/components/CoordinatePicker/InputField.tsx:12:20)
at Module._compile (node:internal/modules/cjs/loader:1233:14) {
code: 'MODULE_NOT_FOUND',
path: '/Users/phillip/Development/payload-mapkit/node_modules/mapkit-react/package.json'
}

Node.js v20.5.0


Made some progress, but had to modify the react-mapkit package.json. Their package.json specifies

./dist/mapkit-react.umd.js

which is the missing file being reference when payload is building. Changing their package.json to

./dist/mapkit-react.umd.cjs

resolves the issue. I'll reach out to their maintainers for support.

    Star on GitHub

    Star

    Chat on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.