3.0.0 breaks

[th0th]

Greetings,

I am using visx with Next.js v.13.1.3. Today I updated the packages I use to the latest version:

package.json

-    "@visx/axis": "^2.14.0",
-    "@visx/event": "^2.6.0",
-    "@visx/grid": "^2.12.2",
-    "@visx/group": "^2.10.0",
-    "@visx/responsive": "^2.10.0",
-    "@visx/scale": "^2.2.2",
-    "@visx/shape": "^2.12.2",
-    "@visx/tooltip": "^2.16.0",
+    "@visx/axis": "^3.0.0",
+    "@visx/event": "^3.0.0",
+    "@visx/grid": "^3.0.0",
+    "@visx/group": "^3.0.0",
+    "@visx/responsive": "^3.0.0",
+    "@visx/scale": "^3.0.0",
+    "@visx/shape": "^3.0.0",
+    "@visx/tooltip": "^3.0.0",

And it broke:

Error [ERR_REQUIRE_ESM]: require() of ES Module project_dir/frontend/node_modules/d3-scale/src/index.js from project_dir/frontend/node_modules/@visx/scale/lib/scales/band.js not supported.
Instead change the require of index.js in project_dir/frontend/node_modules/@visx/scale/lib/scales/band.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (project_dir/frontend/node_modules/@visx/scale/lib/scales/band.js:6:16)
    at Object.<anonymous> (project_dir/frontend/node_modules/@visx/scale/lib/index.js:28:36)
    at Object.<anonymous> (project_dir/frontend/node_modules/@visx/axis/lib/axis/Axis.js:9:14)
    at Object.<anonymous> (project_dir/frontend/node_modules/@visx/axis/lib/index.js:13:36)
    at @visx/axis (project_dir/frontend/.next/server/pages/_app.js:2356:18)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/SiteReports/Geo/Language/Chart/index.tsx:8:68)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/SiteReports/Geo/Language/Chart/index.tsx:1:21)
    at ./components/SiteReports/Geo/Language/Chart/index.tsx (project_dir/frontend/.next/server/pages/_app.js:665:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/SiteReports/Geo/Language/index.tsx:18:64)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/SiteReports/Geo/Language/index.tsx:1:21)
    at ./components/SiteReports/Geo/Language/index.tsx (project_dir/frontend/.next/server/pages/_app.js:687:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/SiteReports/Geo/index.tsx:19:67)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/SiteReports/Geo/index.tsx:1:21)
    at ./components/SiteReports/Geo/index.tsx (project_dir/frontend/.next/server/pages/_app.js:698:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/SiteReports/index.tsx:19:62)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/SiteReports/index.tsx:1:21)
    at ./components/SiteReports/index.tsx (project_dir/frontend/.next/server/pages/_app.js:1204:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./components/index.ts:68:71)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/index.ts:1:21)
    at ./components/index.ts (project_dir/frontend/.next/server/pages/_app.js:1369:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/_app.tsx:28:70)
    at __webpack_require__.a (project_dir/frontend/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./pages/_app.tsx:1:21)
    at ./pages/_app.tsx (project_dir/frontend/.next/server/pages/_app.js:2282:1)
    at __webpack_require__ (project_dir/frontend/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (project_dir/frontend/.next/server/pages/_app.js:3015:39)
    at project_dir/frontend/.next/server/pages/_app.js:3016:28
    at Object.<anonymous> (project_dir/frontend/.next/server/pages/_app.js:3019:3)
    at Object.requirePage (project_dir/frontend/node_modules/next/dist/server/require.js:88:12)
    at project_dir/frontend/node_modules/next/dist/server/load-components.js:34:54
    at async Promise.all (index 1)
    at async Object.loadComponents (project_dir/frontend/node_modules/next/dist/server/load-components.js:32:33)
    at async DevServer.findPageComponents (project_dir/frontend/node_modules/next/dist/server/next-server.js:563:36)
    at async DevServer.findPageComponents (project_dir/frontend/node_modules/next/dist/server/dev/next-dev-server.js:1039:20)
    at async DevServer.renderErrorToResponse (project_dir/frontend/node_modules/next/dist/server/base-server.js:1114:26)
    at async pipe.req.req (project_dir/frontend/node_modules/next/dist/server/base-server.js:1069:30)
    at async DevServer.pipe (project_dir/frontend/node_modules/next/dist/server/base-server.js:407:25) {
  code: 'ERR_REQUIRE_ESM',
  page: '/'
}

Since there is a major version bump, I have already assumed something might break. But I don't see anything related in the changelog.

I searched the issues and tried everything mentioned. No luck.

Also, another issue I encountered was the deletion of the withParentSizeModern. And it is not in the changelog either. Sorry for the ranting but, even tough I enjoy the eye-candy emojis in the changelog, an actual description of the introduced changes would be helpful.

[pdwrl]

Are You using Next.js?

[williaster]

Hi @th0th , sorry for any headaches with the breaking changes in the 3.0.0 release. We use PR titles to generate our change log, and thus the PRs themselves that are linked to serve as the source of truth for more details. For instance, #1622 describes the breaking changes to @visx/responsive which you allude to including removal of withParentSizeModern (if you were using that, you don't need a polyfill and so can switch to using withParentSize directly).

Regarding your next-js error, the breaking change #1621 that fixed some security vulnerabilities in d3 describes how the resulting d3 dependencies have moved to ESM-only exports which is the ERR_REQUIRE_ESM you are seeing. Unfortunately we don't have the bandwidth to give detailed instructions for how to upgrade each different version of next (perhaps some community members can chime in?) because they have varying degrees of support for ESM modules. For our project site we had to make some changes to fix the ESM issue in next@11, #1621 links to that PR which you can find here #1627 and might be useful (for you or others on next@11).

I'm going to close this issue because 3.0.0 follows semantic versioning for breaking changes. All breaking changes are documented in the changelog but you may have to follow a couple links for more details.