usage with nextjs12 + react18

[softmarshmallow]

I struggled a bit to use this package with nextjs12 and react18.

Here is the solution for the future reference.

in next.config.js

const withTM = require("next-transpile-modules")([
    ....
    // https://github.com/vercel/next.js/discussions/13553#discussioncomment-20092  ----------------------------
    // cause of this, we also set `experimental: { esmExternals: "loose" }`
    "react-tag-input",
    "react-dnd",
    "dnd-core",
    "@react-dnd/invariant",
    "@react-dnd/asap",
    "@react-dnd/shallowequal",
    //  --------------------------------------------------------------------------------------------------------
    ....
])

module.exports = withTM({
    experimental: { esmExternals: "loose" },
})

ref:

• Cannot import DndProvider after upgradation of react to 18.0.0 react-dnd/react-dnd#3416
• https://github.com/gridaco/grida/tree/main/ui/tags-input