Issue while deployment

[SoleDad402]

I'm developing GIS application using openlayer, and I have implemented rotation controller using ol-rotate-feature.
But below issues occur while 'npm run build'.
What should I do?

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✓ Linting and checking validity of types
▲ Next.js 14.0.2

• Environments: .env.local

Failed to compile.

./node_modules/ol-rotate-feature/dist/ol-rotate-feature.umd.js
Module not found: ESM packages (ol/interaction) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/Map/Interactions.tsx
./src/pages/map-index.tsx

./node_modules/ol-rotate-feature/dist/ol-rotate-feature.umd.js
Module not found: ESM packages (ol) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/Map/Interactions.tsx
./src/pages/map-index.tsx

./node_modules/ol-rotate-feature/dist/ol-rotate-feature.umd.js
Module not found: ESM packages (ol/layer) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/Map/Interactions.tsx
./src/pages/map-index.tsx

./node_modules/ol-rotate-feature/dist/ol-rotate-feature.umd.js
Module not found: ESM packages (ol/source/Vector) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/Map/Interactions.tsx
./src/pages/map-index.tsx

./node_modules/ol-rotate-feature/dist/ol-rotate-feature.umd.js
Module not found: ESM packages (ol/geom) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/Map/Interactions.tsx
./src/pages/map-index.tsx

[ghettovoice]

Hello @SoleDad402 ,
as I see, your builder trying to include UMD version of the ol-rotate-feature, that is nowadays correctly works only in browser with <script> tag.
So, you need to force the builder to use ESM version from ol-rotate-feature/dist/ol-rotate-feature.esm.js.

I'm not and expert with nextjs, that is what I have found about this. Try to use this option:

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true }
}

or this

// next.config.js
module.exports = {
  experimental: { esmExternals: 'loose' }
}