Missing combobox package after upgrading @twilio-paste/core

[mohseenrm]

Hey folks! 👋🏽

I was trying to upgrade the @twilio-paste/core package used in repo but after installing it fails to build with missing package error.

After installing a few individual packages (@twilio-paste/combobox, @twilio-paste/disclosure, …) it seems to build, but is there a way to avoid installing them and only use the core package? The repo uses the dependencies mentioned in paste docs, just confused on best way to upgrade paste without causing any build issues.

Any help would be really appreciated, thanks!!

[mohseenrm]

Current package dependencies

{
  "name": "@twiliointernal/ui-shared-wizard",
  "version": "0.1.0",
  "main:dev": "src/index.tsx",
  "private": true,
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "dependencies": {
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@twilio-paste/badge": "^1.0.1",
    "@twilio-paste/breadcrumb": "^4.0.2",
    "@twilio-paste/checkbox": "^6.0.3",
    "@twilio-paste/core": "^9.0.1",
    "@twilio-paste/icons": "^5.4.0",
    "@twilio/console-monitoring": "^1.1.0",
    "@twilio/react-typed-forms": "^0.4.3",
    "@twiliointernal/numbers-common": "^68.1.0",
    "@twiliointernal/wtb-console-context": "^1.22.0",
    "@twiliointernal/wtb-logger": "^1.21.0",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "axios": "^0.21.1",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "http-proxy-middleware": "^1.1.0",
    "identity-obj-proxy": "3.0.0",
    "libphonenumber-js": "^1.9.25",
    "lodash": "^4.17.21",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prompts": "2.4.0",
    "query-string": "^7.0.0",
    "react": "^16.8.6",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
    "react-dom": "^16.8.6",
    "react-dom-confetti": "0.2.0",
    "react-refresh": "^0.8.3",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "sinon": "^10.0.0",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "tscpaths": "^0.0.9",
    "url-loader": "4.1.1",
    "uuid": "^8.3.2",
    "validator": "^13.5.2",
    "web-toolbox": "git+ssh://git@code.hq.twilio.com:react/web-toolbox.git#v1.13.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "start:stage": "PORT=3091 WDS_SOCKET_HOST=localhost WDS_SOCKET_PORT=3091 HTTPS=true yarn start",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "lint": "yarn run eslint src/**",
    "lint:fix": "yarn run lint --fix",
    "generate:paths": "tscpaths -p tsconfig.paths.json -s ./dist -o ./dist",
    "build:package:disabled": "yarn clean && yarn compile",
    "compile-only": "tsc --project ./tsconfig.build.json",
    "compile": "tsc --project ./tsconfig.build.json && yarn generate:paths",
    "compile:dev": "tsc-watch  --project ./tsconfig.build.json --onSuccess \"yarn generate:paths\"",
    "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo",
    "dev": "yarn start",
    "build:web": "NODE_ENV=production webpack --config=webpack.config.js",
    "test:jenkins": "CI=true yarn test --maxWorkers 4",
    "start-server": "yarn start",
    "cypress:open": "export CYPRESS_APP_URL='http://localhost:3091' && yarn cypress open",
    "cypress:run": "export CYPRESS_APP_URL='http://localhost:3091' && yarn cypress run",
    "cypress:ci": "cypress run",
    "run:docker": "docker build . -t wizard-cypress-tests --build-arg TWILIO_GITHUB_TOKEN=\"$TWILIO_GITHUB_TOKEN\" --build-arg SSH_PRIVATE_KEY=\"$(cat ~/.ssh/id_rsa)\" --build-arg SSH_PUBLIC_KEY=\"$(cat ~/.ssh/id_rsa.pub)\" && docker-compose up --no-color --force-recreate --exit-code-from wizard-cypress-tests",
    "local:run:docker": "export TWILIO_GITHUB_TOKEN=$(cat ~/.npmrc | grep \"//npm.pkg.github.com/:_authToken=\" | awk -F\"=\" '{print $2}'0) && yarn run:docker",
    "ci:run:docker": "yarn run:docker"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@cypress/react": "^5.9.4",
    "@cypress/webpack-dev-server": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@twiliointernal/wtb-environment": "^1.22.0",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.168",
    "@types/node": "^12.0.0",
    "@types/react": "^16.8.6",
    "@types/react-dom": "^16.8.6",
    "@types/react-router-dom": "^5.1.7",
    "@types/sinon": "^10.0.0",
    "@types/uuid": "^8.3.1",
    "@types/validator": "^13.1.3",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "cypress": "^8.3.0",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-eslint-comments": "^3.1.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.2",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "log4js": "git+ssh://git@code.hq.twilio.com:react/log4js.git#v1.0.0",
    "prettier": "^2.0.1",
    "sinon": "^10.0.0",
    "ts-loader": "^8.1.0",
    "typescript": "^4.1.2",
    "webpack": "4.44.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"
  }
}

Updated paste packages

"@twilio-paste/core": "^10.15.0",
"@twilio-paste/icons": "^5.8.0",

Build error

Failed to compile.

./node_modules/@twilio-paste/core/dist/index.js
Module not found: Can't resolve '@twilio-paste/combobox' in '/Users/mmukaddam/Projects/ui-shared/packages/wizard/node_modules/@twilio-paste/core/dist'

[TheSisb]

Hi @mohseenrm,

A few observations that may be causing the issue:

1. Your dependencies list also includes these packages which should instead be retrieved from core. You can remove these:

    "@twilio-paste/badge": "^1.0.1",
    "@twilio-paste/breadcrumb": "^4.0.2",
    "@twilio-paste/checkbox": "^6.0.3",

2. The main observation is that the Paste import style is inconsistent in many files. I highly recommend spending a few minutes converting it to unbarreled core imports like so (you can use our codemod library to get you part of the way there):

3. Once the imports are fixed in the code, I recommend clearing node_modules and yarn/npm.lock files before reinstalling.

Let us know if the issue persists after these changes.

[mohseenrm]

Oh sweet! thanks @TheSisb the codemod helped in updating all import refs 💯 , after removing individual packages and a fresh install of paste core fixed the issue 🙌🏽

[kelseycavitt]

Great! If you have more questions, let us know!