ERR_PACKAGE_PATH_NOT_EXPORTED error from colord
bildungsroman opened this issue · comments
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.jsonJust saw that v1.7.1 shipped about two hours ago, which is when everything broke for me.
Hi! Will do my best to help you. What bundler (Webpack, rollup, or another) do you use to build your app?
I'm using Webpack in a Gatsby app. Much appreciated!
What dependency pulls Colord in your project? cssnano?
The problem seems to originate with node_modules/postcss-colormin/dist/colours.js:10:37
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?
I'm on 12.19 locally, then I believe it's 14 in the Codebuild job (both are failing)
Looks like this may be an issue with cssnano? I just came across this: cssnano/cssnano#1110
Could you please share with me your Gatsby project config? Especially the things related to CSS bundling.
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"
}
}
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"
}
}
Thx! Do you have any CSS-related settings in the "gatsby-config.js"?
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-fontsHere's everything that uses postcss-colormin AFAIK:
gatsby-plugin-webfonts
cssnano-preset-defaultBut 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"
}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?
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".
Tested in Next.js and Parcel. Works well
Awesome, thanks so much for the quick fix! I'll start my builds again and let you know how it goes.
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.
That worked, and our build is unblocked. Thanks again for the quick turnaround!
Thanks for helping me here and good luck with your projects!
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.