Webpack, exports & ES modules: ReferenceError: module is not defined in ES module scope

Question

I'm developing a particular npm package, where I want to be able to import various helpers from the base package in ESM syntax, e.g.,

import {
   myFunction,
   myConstant
} from 'my-npm-package-library'

This is my entrypoint index.ts file:

// Interface CelestiaSkyViewerOptions:
export interface CelestiaSkyViewerOptions {
  fullscreen?: boolean
  showSolar?: boolean
  showEcliptic?: boolean
  showAsterisms?: boolean
  showStars?: boolean
  showConstellations?: boolean
  showConstellationBoundaries?: boolean
  showCardinalPoints?: boolean
  showTimeAndCoordinateLocation?: boolean
  showAstronomicalTime?: boolean
  showCopyright?: boolean
}

// Export all default components:
export { default as CelestiaAstronomicalEpoch } from '@/components/CelestiaAstronomicalEpoch/CelestiaAstronomicalEpoch.vue'

export { default as CelestiaCopyright } from '@/components/CelestiaCopyright/CelestiaCopyright.vue'

export { default as CelestiaIAUStarKey } from '@/components/CelestiaIAUKeys/CelestiaIAUStarKey.vue'

export { default as CelestiaObserverLocale } from '@/components/CelestiaObserverLocale/CelestiaObserverLocale.vue'

export { default as CelestiaOrientationCompass } from '@/components/CelestiaOrientationCompass/CelestiaOrientationCompass.vue'

export { default as CelestiaOrientationPermission } from '@/components/CelestiaOrientationPermission/CelestiaOrientationPermission.vue'

export { default as CelestiaSkyViewer } from '@/components/CelestiaSkyViewer/CelestiaSkyViewer.vue'

export {
  annotateBody,
  drawBody,
  drawClosedPath,
  drawEllipticalGalaxy,
  drawLine,
  drawMoon,
  drawSun,
  drawText,
  highlightBody,
  resetPath
} from '@/composables/canvas'

export { azimuthalOffset } from '@/composables/celestia'

export { bayerStarsFilter, iauStarsFilter } from '@/composables/filters'

export {
  cardinals,
  coords,
  latitude,
  locatedAt,
  longitude,
  onEquatorialPositionChange,
  position,
  useObserversLocation,
  validateLatitude,
  validateLongitude
} from '@/composables/geolocation'

export { datetime } from '@/composables/globals'

export {
  deviceOrientationPermissionDialogOpen,
  deviceOrientationPermissionState,
  isOrientationCompassOpen,
  orientationCompassHeading,
  useDeviceMotionPermission,
  useDeviceOrientationPermission
} from '@/composables/orientation'

However, when attempting to commit this code, the on-commit linter I have is giving me the following error:

ReferenceError: module is not defined in ES module scope

I've been trying to Google around this particular error, but nothing seems to want to play ball with the linter...

Full stack trace for any garbage aficionados:

ERROR  ReferenceError: module is not defined in ES module scope
        This file is being treated as an ES module because it has a '.js' file extension and '/Users/michael/observerly/celestia-vue/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/michael/observerly/celestia-vue/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Webpack, exports & ES modules: ReferenceError: module is not defined in ES module scope

0 Answers