Comments (9)
Seems to build fine now https://github.com/flathub/website/pull/1313/files
from react-svg-worldmap.
Each time when I run 'next build' command I get this error: Collecting page data ..Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/d3-geo/src/index.js from node_modules/react-svg-worldmap/dist/index.js not supported. Instead change the require of node_modules/d3-geo/src/index.js in node_modules/react-svg-worldmap/dist/index.js to a dynamic import() which is available in all CommonJS modules. This error exists in any Next js application, without any other dependencies except of default next js dependencies
Steps to reproduce the behavior:
- npx create-next-app@latest
- npm i react-svg-worldmap
- In any file write this:
import WorldMap from 'react-svg-worldmap'
console.log(WorldMap)- npm run build
Expected behavior Building without problems
Desktop (please complete the following information):
- OS: MacOS 12.1
- Browser Chrome
The strange thing is that 'npm run dev' doesn't give any errors and you can use the package without any problems in the dev mode.
I am experiencing the same problem.
from react-svg-worldmap.
I am experiencing the same issue on my next js app. Package won't build.
Instead change the require of .../node_modules/d3-geo/src/index.js in .../node_modules/react-svg-worldmap/dist/index.js to a dynamic import() which is available in all CommonJS modules.
from react-svg-worldmap.
If you need an OSS app to repro this with, feel free to use flathub-infra/website#550
from react-svg-worldmap.
Sorry, I have very limited availability to debug this. My hypothesis is that Next.js' Webpack config doesn't transpile modules in node_modules by default, and we now emit ESM format. Is it possible to modify the Next.js webpack config?
from react-svg-worldmap.
Sorry everyone, I have been away doing my Masters and working full time. I am going to get back to this starting tomorrow. Thanks for your patience. -Yams
from react-svg-worldmap.
Hey @razzeee , @dbaileydev , @nathanhfoster , and @AlexeyGlaznev . The above error should be resolved in the latest version of the map on npm that I just posted. Can any of y'all check and close this issue? I was able to create a next.js app with the steps above with no compile issues. The issue was with the d3-geo and esm. Thanks, Yams
from react-svg-worldmap.
In that case I will close this issue, thanks for the quick reply @razzeee!
from react-svg-worldmap.
Fixed by #144
from react-svg-worldmap.
Related Issues (20)
- [BUG] no country color when all countries have the same value HOT 4
- [BUG] double click to zoom trigger the onclick event HOT 5
- [ENHANCEMENT] Export country list using ESM import HOT 3
- [BUG] Did the latest alpha break? HOT 8
- Kindly add all remaining countries to countries.geo.js HOT 6
- Map projection - Kamchatka Peninsula is cut out HOT 4
- How to inject HTML in tooltip HOT 4
- [BUG] Statistics map labels do not fit in boxes for RTL languages HOT 4
- Color Prop not working as expected with false-y values HOT 4
- [ENHANCEMENT] Convert your data into react-svg-worldmap supported JSON HOT 2
- [BUG] Strange tooltip behavior via using onClickFunction and tooltipTextFunction HOT 1
- [BUG] HOT 6
- [BUG] Can't use worldmap on yarn + vite + react HOT 5
- [BUG] Cannot read properties of undefined (reading 'forwardRef') HOT 7
- [BUG] Ukraine does not include Crimea HOT 6
- [BUG] Failed to parse source map
- [BUG] Responsive size calculation is buggy HOT 1
- Hong Kong and Singapore are unreachable HOT 1
- Add Zoom and Pan capabilities HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-svg-worldmap.