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 autoprefixer@9.8.0

[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 node@14.4 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 autoprefixer@9.7.4 by default:

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

=> Found "autoprefixer@9.7.4"
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 autoprefixer@9.8.1 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