Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ERR_PACKAGE_PATH_NOT_EXPORTED error from colord #51

Closed
bildungsroman opened this issue May 19, 2021 · 21 comments
Closed

ERR_PACKAGE_PATH_NOT_EXPORTED error from colord #51

bildungsroman opened this issue May 19, 2021 · 21 comments

Comments

@bildungsroman
Copy link

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
Copy link
Author

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

@omgovich
Copy link
Owner

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

@bildungsroman
Copy link
Author

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

@omgovich
Copy link
Owner

What dependency pulls Colord in your project? cssnano?

@bildungsroman
Copy link
Author

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

@omgovich
Copy link
Owner

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
Copy link
Author

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

@bildungsroman
Copy link
Author

Looks like this may be an issue with cssnano? I just came across this: cssnano/cssnano#1110

@omgovich
Copy link
Owner

omgovich commented May 19, 2021 •
edited

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

@bildungsroman
Copy link
Author

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
Copy link

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
Copy link
Owner

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

@bildungsroman
Copy link
Author

bildungsroman commented May 19, 2021 •
edited

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 omgovich mentioned this issue May 19, 2021
Merged
@omgovich
Copy link
Owner

omgovich commented May 19, 2021 •
edited

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
Copy link
Owner

omgovich commented May 19, 2021 •
edited

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
Copy link
Owner

Tested in Next.js and Parcel. Works well

@bildungsroman
Copy link
Author

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

@omgovich
Copy link
Owner

omgovich commented May 20, 2021 •
edited

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
Copy link
Author

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

@omgovich
Copy link
Owner

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

@Lornz-
Copy link

Lornz- commented May 20, 2021

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.

@omgovich omgovich mentioned this issue May 20, 2021
Merged
@LekoArts LekoArts mentioned this issue May 25, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@omgovich @Lornz- @blueiceprj @bildungsroman