ERR_PACKAGE_PATH_NOT_EXPORTED error from colord

[bildungsroman]

I'm unable to build my app due to an error coming from a dependency that relies on Colord. Any help with this would be appreciated!

When running npm run build, I get the following error:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './plugins/names' is not defined by "exports" in ./node_modules/colord/package.json

[bildungsroman]

Just saw that v1.7.1 shipped about two hours ago, which is when everything broke for me.

[omgovich]

Hi! Will do my best to help you. What bundler (Webpack, rollup, or another) do you use to build your app?

[bildungsroman]

I'm using Webpack in a Gatsby app. Much appreciated!

[omgovich]

What dependency pulls Colord in your project? cssnano?

[bildungsroman]

The problem seems to originate with node_modules/postcss-colormin/dist/colours.js:10:37

[omgovich]

Just installed Gatsby and with "gatsby-plugin-postcss" enabled and "npm run build" works well. Should I config something else?

P.S. What Node.js version do you have?

[bildungsroman]

I'm on 12.19 locally, then I believe it's 14 in the Codebuild job (both are failing)

[bildungsroman]

Looks like this may be an issue with cssnano? I just came across this: https://github.com/cssnano/cssnano/issues/1110

[omgovich]

Could you please share with me your Gatsby project config? Especially the things related to CSS bundling.

[bildungsroman]

The repo is private, but here's my package.json file, hopefully that helps. I'll dig through the gatsby-config file and see if there's anything helpful in there, but I'm not quite sure what I'm looking for as I'm not directly using colord or cssnano/postcss-colormin.

// ./package.json

{
  "name": "stackery-io",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "rm -rf public && rm -rf .cache",
    "format-output": "prettier src/**/*.{js,jsx}",
    "format": "prettier --write src/**/*.{js,jsx}",
    "lint-errors": "eslint src/**/*.{js,jsx} --quiet",
    "lint": "eslint src/**/*.{js,jsx}",
    "start": "npm run develop",
    "test": "eslint . --quiet && cy:run",
    "cy:open": "cypress open --project ./functions/VerificationTests/ --config-file cypress.json",
    "cy:run": "cypress run --project ./functions/VerificationTests/ --config-file cypress.json",
    "test:e2e": "start-server-and-test develop http://localhost:8000 cy:open"
  },
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@deckdeckgo/highlight-code": "^2.6.0",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/eslint-plugin": "^11.2.0",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@raae/gatsby-remark-oembed": "^0.1.1",
    "@styled-icons/fa-brands": "^10.26.0",
    "@styled-icons/fa-solid": "^10.32.0",
    "algoliasearch": "^4.8.6",
    "amazon-cognito-identity-js": "^5.0.1",
    "babel-plugin-emotion": "^11.0.0",
    "babel-plugin-styled-components": "^1.12.0",
    "bootstrap": "^5.0.1",
    "colord": "1.7.0",
    "crypto-browserify": "^3.12.0",
    "dayjs": "^1.10.4",
    "dotenv": "9.0.2",
    "gatsby": "^3.5.0",
    "gatsby-cli": "^3.5.0",
    "gatsby-image": "^3.5.0",
    "gatsby-plugin-algolia": "^0.17.0",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-breakpoints": "^1.3.3",
    "gatsby-plugin-catch-links": "^3.5.0",
    "gatsby-plugin-csp": "^1.1.3",
    "gatsby-plugin-emotion": "^6.5.0",
    "gatsby-plugin-feed": "^3.5.0",
    "gatsby-plugin-gdpr-cookies": "^2.0.0",
    "gatsby-plugin-google-analytics": "^3.5.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-google-tagmanager": "^3.5.0",
    "gatsby-plugin-manifest": "^3.5.0",
    "gatsby-plugin-nprogress": "^3.5.0",
    "gatsby-plugin-offline": "^4.5.1",
    "gatsby-plugin-react-helmet": "^4.5.0",
    "gatsby-plugin-robots-txt": "^1.6.2",
    "gatsby-plugin-rollbar": "^1.1.0",
    "gatsby-plugin-sass": "^4.5.0",
    "gatsby-plugin-sharp": "^3.5.0",
    "gatsby-plugin-sitemap": "^4.1.0",
    "gatsby-plugin-smoothscroll": "^1.2.0",
    "gatsby-plugin-styled-components": "^4.5.0",
    "gatsby-plugin-typography": "^3.5.0",
    "gatsby-remark-classes": "^1.0.0",
    "gatsby-remark-copy-linked-files": "^4.2.1",
    "gatsby-remark-embed-video": "^3.1.1",
    "gatsby-remark-highlight-code": "^2.2.1",
    "gatsby-remark-images": "^5.2.1",
    "gatsby-remark-prismjs": "^5.2.1",
    "gatsby-remark-reading-time": "^1.1.0",
    "gatsby-remark-responsive-iframe": "^4.2.1",
    "gatsby-source-filesystem": "^3.5.0",
    "gatsby-source-graphql": "^3.5.0",
    "gatsby-theme-material-ui": "^2.0.1",
    "gatsby-transformer-remark": "^4.2.0",
    "gatsby-transformer-sharp": "^3.5.0",
    "install": "^0.13.0",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "mdb-react-ui-kit": "^1.0.0-beta5",
    "mdbreact": "^5.0.2",
    "normalize.css": "^8.0.1",
    "popper.js": "^1.16.1",
    "prismjs": "^1.23.0",
    "prop-types": "^15.7.2",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.0",
    "react-cookie-consent": "^6.2.3",
    "react-device-detect": "^1.17.0",
    "react-dom": "^17.0.2",
    "react-headroom": "^3.1.1",
    "react-helmet": "^6.1.0",
    "react-instantsearch-dom": "^6.11.0",
    "react-select": "^4.3.1",
    "react-typist": "^2.0.5",
    "react-typography": "^0.16.20",
    "remarkable": "^2.0.1",
    "smooth-scroll": "^16.1.3",
    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.0",
    "typography": "^0.16.21"
  },
  "devDependencies": {
    "@types/remarkable": "^2.0.1",
    "axe-core": "^4.2.1",
    "babel-eslint": "^10.1.0",
    "cypress": "^7.3.0",
    "cypress-axe": "^0.12.2",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-semistandard": "^15.0.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-webpack-plugin": "^2.5.4",
    "gatsby-plugin-eslint": "^3.0.0",
    "lighthouse": "^7.5.0",
    "prettier": "^2.3.0",
    "semistandard": "^16.0.0",
    "start-server-and-test": "^1.12.2"
  }
}

[blueiceprj]

This is my project configuration.

{
  "name": "xxxxx",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "clean": "rm -rf dist",
    "start": "ng serve --port 4201 --proxy-config proxy.conf.json --hmr",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points && find node_modules/moment/locale -type f -not -name 'en-gb.js' -not -name 'en.js' -not -name 'ru.js' -not -name 'fr.js' -not -name 'de.js' -not -name 'kk.js' -not -name 'tr.js' | xargs rm",
    "prettier": "prettier write \"./**/*.{ts,css,scss,json,html}\""
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.14",
    "@angular/cdk": "11.2.12",
    "@angular/common": "^11.2.14",
    "@angular/compiler": "^11.2.14",
    "@angular/core": "^11.2.13",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.2.14",
    "@angular/material": "11.2.12",
    "@angular/material-moment-adapter": "11.2.12",
    "@angular/platform-browser": "^11.2.14",
    "@angular/platform-browser-dynamic": "^11.2.14",
    "@angular/router": "^11.2.14",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/http-status-codes": "^1.2.0",
    "angular-imask": "^6.0.7",
    "classlist.js": "1.1.20150312",
    "core-js": "^3.12.1",
    "lodash": "4.17.21",
    "moment": "2.29.1",
    "ngx-captcha": "^9.0.1",
    "ngx-destroy-subscribers": "^7.0.1",
    "ngx-webstorage": "^7.0.1",
    "rxjs": "6.6.7",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.12",
    "@angular/cli": "^11.2.12",
    "@angular/compiler-cli": "^11.2.14",
    "@fortawesome/fontawesome-pro": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/pro-light-svg-icons": "^5.15.3",
    "@fortawesome/pro-regular-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "@types/jasmine": "3.7.4",
    "@types/jasminewd2": "2.0.9",
    "@types/lodash": "4.14.169",
    "@types/node": "^15.0.3",
    "@types/webpack-env": "1.16.0",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~7.0.0",
    "prettier": "2.3.0",
    "protractor": "~7.0.0",
    "replace-in-file": "^6.2.0",
    "sass": "^1.32.13",
    "ts-node": "9.1.1",
    "tslint": "~6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "4.1.5",
    "webpack-bundle-analyzer": "4.4.1"
  },
  "peerDependencies": {
    "tslib": "^2.2.0"
  },
  "resolutions": {
    "webpack": "5.4.0"
  }
}

[omgovich]

Thx! Do you have any CSS-related settings in the "gatsby-config.js"?

[bildungsroman]

I don't have any CSS-related settings, but I am using these theming packages:

gatsby-plugin-emotion
gatsby-plugin-typography
gatsby-plugin-styled-components
gatsby-plugin-google-fonts

Here's everything that uses postcss-colormin AFAIK:

gatsby-plugin-webfonts
cssnano-preset-default

But those aren't in my gatsby-config.

and from my package-lock:

    "postcss-colormin": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.1.0.tgz",
      "integrity": "sha512-5s+VNfQ5CsR6yvBc6Tc8NK9cxb/c8sA547zy+8ofL04gs/GygmOcVZt2s6jJn7TvntAw0Bp6MDpq4bd51EPwdw==",
      "requires": {
        "browserslist": "^4.16.0",
        "colord": "^1.7.0",
        "postcss-value-parser": "^4.1.0"
      }

[omgovich]

Released v1.7.2 with a simplified exports map. I assume that your bundler/loader can't process wildcarted subfolder exports, so I defined all of them manually.

Could you update colord in your lock file and check how it works?

[omgovich]

To perform a quick test, you can run npm install colord@^1.7.2 -D in your project root. It should update "colord" installed by "postcss-colormin".

[omgovich]

Tested in Next.js and Parcel. Works well

[bildungsroman]

Awesome, thanks so much for the quick fix! I'll start my builds again and let you know how it goes.

[omgovich]

Tested inside Webpack-based project and in Node.js backend app as well. No errors, works as expected. Really hope that everything is fine in your apps too.

[bildungsroman]

That worked, and our build is unblocked. Thanks again for the quick turnaround!

[omgovich]

Thanks for helping me here and good luck with your projects!

[Lornz-]

I got the exact same issue about the same time as @bildungsroman. Thanks @omgovich! Your workaround did the trick. You saved me a lot of headache.