Parcel build fails

[bminer]

Using change-case v5.1.2, Parcel v2.10.2 (latest) fails to load the module.

🚨 Build failed.

@parcel/core: Failed to resolve 'change-case' from './blah.js'

blah.js:5:29
    4 | import React, { useState, useEffect } from "react"
  > 5 | import { capitalCase } from "change-case"
  >   |                             ^^^^^^^^^^^^^
    6 | import Select from "react-select"
    7 | import { useNavigate } from "react-router-dom"

@parcel/resolver-default: Cannot load file './index' from module 'change-case'

[blakeembrey]

Hmm, I’m not too familiar with Parcel but it seems it doesn’t follow the exports convention of the package? Is there some config required to use ESM? It seems like it implicitly trying to find a root index file which seems like CommonJS resolution behavior.

[bminer]

I'll look into this a bit further.

[bminer]

My guess here is that the package.json file does not have "type": "module" in it or something along those lines.

[blakeembrey]

It's definitely there and works in node and other bundlers: https://github.com/blakeembrey/change-case/blob/db8690c91121db3842bdeb7a2f7b8444be05b89e/packages/change-case/package.json#L30

Is it possible it's due to being disabled by default in Parcel? This post seems to imply you might need to enable packageExports: https://parceljs.org/blog/v2-9-0/#new-resolver

Edit: Same thing in the Parcel docs: https://parceljs.org/features/dependency-resolution/#package-exports

[bminer]

Can be fixed by adding main field or module field to package.json. Parcel does not use the exports field by default: https://parceljs.org/features/dependency-resolution/#enabling-package-exports.

See also: https://parceljs.org/features/dependency-resolution/#package-entries

[blakeembrey]

I won’t be adding those. As an ESM package it’s already configured properly, you’ll need to enable exports with Parcel or file an issue with them to have it enabled by default if it’s an ESM only package. I can’t see a good reason they haven’t enabled as a fallback if you can’t resolve with CommonJS.

[bminer]

Okay. To be fair, there is no "standard" way to handle module imports, although the exports field appears to be gaining the most traction.

For those who want the workaround, just add the following to your project's package.json, and Parcel will enable use of the exports fields for module resolution.

"@parcel/resolver-default": {
  "packageExports": true
}