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.

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

3.0.0 breaks #1636

Closed
th0th opened this issue Jan 20, 2023 · 2 comments
Closed

3.0.0 breaks #1636

th0th opened this issue Jan 20, 2023 · 2 comments

Comments

@th0th
Copy link

th0th commented Jan 20, 2023

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

pdwrl commented Jan 20, 2023

Are You using Next.js?

@williaster
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants