Problem when upgrading to Paste 13.0

[dholliday3]

Describe the bug
After upgrading to Paste 13.0 I'm getting this warning in the console - export 'useInsertionEffect' (imported as 'Mr') was not found in 'react'.

In addition I have a type error in my code when rendering a test component that is fixed by using react 17 but this doesn't fix the above warning.

Is this an issue with Paste 13.0 dependencies or am I possibly doing something wrong?

To Reproduce

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[nkrantz]

Hi @dholliday3 - thanks for opening this issue. Could you tell me a little about your environment - would it be possible to share your package.json for the project?

[vonKingsley]

@nkrantz I've had the same experience with running through both the create-next-app and create-react-app quick starts.
I was able to resolve the issue after downgrading to the following

    "@twilio-paste/core": "12.1.0",
    "@twilio-paste/icons": "7.0.0",

below is the generated package.json file that was created.

{
  "name": "paste-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "5.11.6",
    "@testing-library/react": "11.2.2",
    "@testing-library/user-event": "12.6.0",
    "@twilio-paste/core": "^13.0.0",
    "@twilio-paste/icons": "^8.0.0",
    "history": "5.0.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-scripts": "5.0.1",
    "typescript": "4.1.3",
    "web-vitals": "1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/jest": "26.0.19",
    "@types/node": "14.14.16",
    "@types/react": "16.14.2",
    "@types/react-dom": "16.9.10",
    "react-router-dom": "6.2.1"
  },
  "jest": {
    "transform": {
      ".*\\/node_modules\\/@twilio-paste/icons/.*\\.js?$": "<rootDir>/jestTransformer.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!@twilio-paste/icons/.*)"
    ]
  }
}

[dholliday3]

Hi @dholliday3 - thanks for opening this issue. Could you tell me a little about your environment - would it be possible to share your package.json for the project?

Hi, here is the relevant parts of the package.json that I was using.

{
"dependencies": {
        ....
        "@twilio-paste/button": "^10.0.0",
        "@twilio-paste/core": "^13.0.0",
        "@twilio-paste/design-tokens": "^7.2.0",
        "@twilio-paste/icons": "^8.0.0",
        "@twilio-paste/style-props": "^5.0.0",
        "@twilio-paste/types": "^3.1.5",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.0",
        "react-router": "^6.2.1",
        "react-router-dom": "^6.2.1",
        ....
        }
"devDependencies": {
        "@testing-library/dom": "8.11.3",
        "@testing-library/user-event": "13.5.0",
        "@types/uuid": "^8.3.4",
        "jest-environment-jsdom-sixteen": "^2.0.0"
    }
}

[nkrantz]

The team is currently investigating this issue and we'll be updating this thread with more info soon!

[arodriguezcortes]

@nkrantz Just FYI I'm having the same issue related to the warnings. I'm building a new service with a custom Webpack config. When I installed Paste via npm (the latest version by default), the warnings start appearing. Here's the screenshot.

And this is the relevant section of my package.json.

{
  "dependencies": {
    "@twilio-paste/core": "^13.0.0",
    "@twilio-paste/icons": "^8.0.0",
    "ky": "^0.30.0",
    "lodash": "^4.17.21",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.39.0",
    "react-router-dom": "^6.3.0",
    "typescript": "^4.5.4",
    "use-clipboard-copy": "^0.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@swc/core": "^1.2.120",
    "@swc/jest": "^0.2.15",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.5",
    "@types/jest": "^28.1.0",
    "@types/lodash": "^4.14.178",
    "@types/react": "^17.0.45",
    "@types/react-dom": "^17.0.17",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "babel-jest": "^27.4.6",
    "babel-loader": "^8.2.3",
    "cypress": "^9.2.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest-dom": "^3.9.2",
    "eslint-plugin-jsdoc": "^37.2.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "fork-ts-checker-webpack-plugin": "^6.5.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^27.4.5",
    "msw": "^0.39.2",
    "prettier": "2.5.1",
    "swc-loader": "^0.1.15",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "webpack-merge": "^5.8.0"
  },
}

[sabinasiddiqi]

We are seeing the same warning.

We are also noticing that for Combobox with autocomplete when a user searches in the drop down options and there is only one result and they click it, the component throws an error. Not sure if its related or I should create an issue. This doesnt happen if they select the item with the keyboard - only when there is a mouse click. This also does not happen if there is more than one result.

[TheSisb]

This looks like a bug introduced only in emotion v11.7.x and 11.8.0. It is fixed as of emotion v11.8.1 or later, which Paste uses.
Can you check that emotion is resolving to 11.8.1 or later in your projects? You can investigate by checking your lock files.

[sabinasiddiqi]

Thanks @TheSisb - I had thought that as well but our versions are:

    "@emotion/react": "11.9.0",
    "@emotion/styled": "11.8.1",

and in the lock file:

[TheSisb]

Thanks for checking @sabinasiddiqi.

Seems like @twilio-paste/core v13.0.0 has some kind of major issue. I managed to get a repro locally and will be investigating. Please downgrade to v12.1.0 for the time being. Sorry about this everyone!

[TheSisb]

Small update: I managed to resolve this issue by downgrading the versions of emotion in our @twilio-paste/styling-library package. After fixing this issue, I am now encountering this other reported typing issue #2430 and working on a solution now.

[shleewhite]

Hi all, thank you for your patience! We have just released a patch version of Paste that should resolve these issues. Please try upgrading @twilio-paste/core to 13.0.1 and let us know if you are still having the issue.

@dholliday3 @arodriguezcortes @sabinasiddiqi

[arodriguezcortes]

Hi @shleewhite . Sorry for the late response. I updated the libraries and the warnings disappeared. Thanks for the quick fix!

[TheSisb]

Thank you for confirming @arodriguezcortes !

Closing this issue, feel free to ping us if this issue persists or you can also open a new ticket.