Autoprefixer: Package exports for '...\autoprefixer\node_modules\kleur' do not define a valid './colors' target in version 9.8.1

[jens-duttke]

Since the update to 9.8.1 I get hundreds of errors while compiling my Webpack project:

ERROR in ./ts/ui/Tabbar/TabbarButton/styles.scss (../node_modules/dts-css-modules-loader??ref--7-1!../node_modules/css-loader/dist/cjs.js??ref--7-2!../node_modules/postcss-loader/src??ref--7-3!../node_modules/sass-loader/dist/cjs.js??ref--7-4!./ts/ui/Tabbar/TabbarButton/styles.scss)
Module build failed (from ../node_modules/postcss-loader/src/index.js):
Error: Package exports for 'P:\HexEd.it\node_modules\autoprefixer\node_modules\kleur' do not define a valid './colors' target
    at resolveExportsTarget (internal/modules/cjs/loader.js:621:9)
    at applyExports (internal/modules/cjs/loader.js:502:14)
    at resolveExports (internal/modules/cjs/loader.js:551:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:657:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:960:27)
    at Function.Module._load (internal/modules/cjs/loader.js:855:27)
    at Module.require (internal/modules/cjs/loader.js:1033:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (P:\HexEd.it\node_modules\autoprefixer\lib\autoprefixer.js:9:13)
    at Module._compile (internal/modules/cjs/loader.js:1144:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1164:10)
    at Module.load (internal/modules/cjs/loader.js:993:32)
    at Function.Module._load (internal/modules/cjs/loader.js:892:14)
    at Module.require (internal/modules/cjs/loader.js:1033:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (P:\HexEd.it\postcss.config.js:4:3)

Maybe I should note, that I'm using CSS variables for colors:

color: var(--hexedit-tabbar-tab-foreground);

[larsthorup]

It looks like I am able to work around this issue in a project created today with create-react-app by downgrading autoprefixer:

npm install [email protected]

[ai]

@lukeed can you look at this issue?

Seems like it is ESM module package problem.

[lukeed]

Yes looking into it now.

[lukeed]

Can someone provide their Node version, and perhaps a minimum reproduction?

I ran this index.js snippet in Node 8, 10, 12, and 14 and had no errors:

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

const css = `
    .foo {
        displax: flex;
        transform: scale(0.5);
    }
`;

postcss([ autoprefixer ]).process(css).then(result => {
  result.warnings().forEach(warn => {
    console.warn(warn.toString())
  })
  console.log(result.css)
})

I ran the same thing as an index.mjs file for Node 12 and 14; also with no errors

-- const autoprefixer = require('autoprefixer')
-- const postcss = require('postcss')
++ import autoprefixer from 'autoprefixer'
++ import postcss from 'postcss'

Not saying anyone is wrong, just looking to reproduce

[lukeed]

I've also installed a fresh CRA app with Node 10, 12, and 14. Running the start and build scripts also had no issues.

[ai]

@jens-duttke @larsthorup what Node.js version do you use? Is it old Node.js 13?

[lukeed]

I just tested my index.js, index.mjs and the CRA app with Node v13.14.0 – still nothing.

[larsthorup]

@lukeed @ai My bad, I was on some node@13, not sure which, maybe 13.10. I have now upgraded to [email protected] and don't see the issue anymore. Thanks for the quick response!

[lukeed]

Oh yeah, I would definitely advise deleting any Node 13.x from your system. That entire version was a playground for different ESM/exports map formats. Now it's been finalized, and 12.x and 14.x (both LTS) and the last 13.x release use the same definitions.

[ai]

I will post a tweet about Node.js 13 and Autoprefixer

[gragland]

@lukeed @ai Saw that this was closed and curious if we should consider Node 13 unsupported by autoprefixer (and thus CRA)?

[lukeed]

@gragland No, I wouldn't say that.

CRA installs [email protected] by default:

$ pnpx create-react-app my-app
$ cd my-app && yarn why autoprefixer

=> Found "[email protected]"
info Reasons this module exists
   - "react-scripts#postcss-preset-env" depends on it
   - Hoisted from "react-scripts#postcss-preset-env#autoprefixer"
info Disk size without dependencies: "588KB"
info Disk size with unique dependencies: "5.17MB"
info Disk size with transitive dependencies: "6.79MB"
info Number of shared dependencies: 22

In order to even get 9.8.1 loaded into the toolchain, I've been needing to eject and manually define [email protected] as a dependency, then reinstall everything. So, that takes care of "CRA" concerns.

Moving onto Node questions (for when someone gets an updated copy of _any_ dependency that has a future-proof conditional exports map), here's the landscape:

I ran through each of these versions and tested them with CRA

• 13.14.0 – ✅ – (Current, Released 2020-04-29)
• 13.13.0 – ✅
• 13.12.0 – ✅
• 13.11.0 – ✅
• 13.10.1 – ✅
• 13.10.0 – ✅ – (Released 2020-03-04)
  _First release without ExperimentalWarning: Conditional exports message_
• 13.9.0 - ✅ ⚠️ - (Released 2020-02-18)
• 13.8.0 - ✅ ⚠️ - (Released 2020-02-06)
  _This was a primarily a security release; no esm/exports changes_
• 13.7.0 - ✅ ⚠️ - (Released 2020-01-21)
  _Note: This was the first release that had conditional exports unflagged_
• 13.6.0 - ❌ - (Released 2020-01-17)
• 13.5.0 - ❌ - (Released 2019-12-18)
• 13.4.0 - ❌ - (Released 2019-12-17)

⚠️ – Shows ExperimentalWarning message
✅ – Supported, builds successfully
❌ – Unsupported, build fails

Make of that what you will, but to me that's what a new experimental feature looks like.
And Node.js, for many years, has always preaches that odd-major releases are experimental and _always_ are immediately "End of Life" with a short exit period once its even, LTS counterpart is released.

[ai]

We support the latest version. The problem is with old versions.

[ai]

I think it will be nice to add engine.node to package.json

[lukeed]

@ai In this case, it might make it more confusing? There's only a constraint within the 13.x range since some versions _looked at_ exports but parsed it differently than the current, official behavior.

The only versions of Node 12.x that even _look_ at exports do so correctly. They don't have issues.

Any _older_ versions of Node 12.x and below (<=11) never look at exports and so have no problem.

Node 14.x launched with the official behavior, so it won't have any issues.

[ai]

Yeap, I will block only the old Node.js 13 versions

[ai]

Fixed 6842832

[ai]

engines update released at 9.8.2.

[ai]

Solution

1. Update Node.js to 14 or >13.7.
2. Update Autoprefixer to 9.8.1