Open tordans opened 1 year ago
I also experienced the same issue trying to run yarn build
with my wepback prod config when trying to upgrade to v7.1. Worked great with the dev config.
FYI, "bun" does not work as a workaround for the AstroJS case.
Longer FYI: After reading https://youtu.be/dWqNgzZwVJQ?si=rK9KsaYgIw74BU1Q&t=140 which claims that bun is super smart about resolving commonJs <> ES Modules issues, I wanted to try if it would resolve the given issue. It was super easy to switch to bun (Docs https://docs.astro.build/de/recipes/bun/) however, I still get the same error messages:
bun run build
However, one positive thing is, I get the same error on bun run start
which at least makes the dev env broken the same ways as the build :-).
I found a workaround for my Issue in AstroJS using "bun":
(Sorry, I commented previously that this did not work, but it does…)
After "reading" https://youtu.be/dWqNgzZwVJQ?si=rK9KsaYgIw74BU1Q&t=140 which claims that bun is super smart about resolving commonJs <> ES Modules issues, I wanted to try if it would resolve the given issue.
One can use https://docs.astro.build/de/recipes/bun/ as a guide to switch to bun. However, you also need to delete your package-lock
and your /node_modules
in order to get the full usage of bun.
I then get the same error as before …
error Directory import '/Users/foo/berlin-bikenetwork-monitoring/node_modules/react-map-gl/maplibre' is not supported resolving ES modules imported from /Users/foo/berlin-bikenetwork-monitoring/dist/chunks/pages/index_3ae0f0cd.mjs
Did you mean to import react-map-gl/dist/es5/exports-maplibre.js?
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/foo/berlin-bikenetwork-monitoring/node_modules/react-map-gl/maplibre' is not supported resolving ES modules imported from /Users/foo/berlin-bikenetwork-monitoring/dist/chunks/pages/index_3ae0f0cd.mjs
Did you mean to import react-map-gl/dist/es5/exports-maplibre.js?
at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:319:17)
at moduleResolve (node:internal/modules/esm/resolve:945:10)
at defaultResolve (node:internal/modules/esm/resolve:1153:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)
error: script "build" exited with code 1 (SIGHUP)
However, this time following the suggestion is a valid work around, so after applying…
-import * as reactmapgl from 'react-map-gl/maplibre'
+import * as reactmapgl from 'react-map-gl/dist/es5/exports-maplibre.js'
on all files, the build works 🥳 .
FYI with this setup, the error message when using the "regular" import like import { Layer, Source } from 'react-map-gl'
is
We will need to build the source differently if we want to switch to a proper ESM module, not just modify package.json. I can get a 7.2.0-beta release for testing. There are so many bundlers and build environments now it's hard to test them all.
@csdiehl I'd appreciate a repo that reproduces your issue with webpack.
Try 7.2.0-beta.1
@Pessimistress it looks like this solves all issues! I was able to build and deploy using bun in https://github.com/tordans/berlin-bikenetwork-monitoring
Thanks a lot!
@Pessimistress a quick update on my testing of beta.1
: I found no issues.
However, I just watched https://www.youtube.com/watch?v=jmNuEEtwkD4 and the docs made me aware of those testing pages … which still show some errors…
The publint.dev looks most helpfull.
Tool | Official | Beta.1 |
---|---|---|
arethetypeswrong.github.io | Link – one generic error | Link – 4 errors |
publint.dev | Link – a few things | Link – this one looks the most useful. Three errors with clear instructions on how to fix them. |
@tordans Thanks for the pointers. They are quite useful indeed.
Description
Using ReactMapGL within an AstroJS Project (https://docs.astro.build/) does work great in Dev mode but fails on build
npm run build
.It looks like https://github.com/visgl/react-map-gl/pull/2268 is partial solution but the
*.mjs
part that was mentioned in this PR is still required to get it working.Test 1:
import ReactMapGl, { NavigationControl } from 'react-map-gl/maplibre'
Using the standard import does result is errors like this:
CODE: https://github.com/tordans/berlin-bikenetwork-monitoring/blob/0704fe8a517e75669154e1bf2a9e5ec0ca810da8/src/components/Map/Map.tsx
Test 2:
import ReactMapGl, { NavigationControl } from 'react-map-gl/dist/es5/exports-maplibre.js'
Following the advice of the error output from test 1 …
CODE: https://github.com/tordans/berlin-bikenetwork-monitoring/commit/d390bbfb453d31a0f2e2985f6f8da27d5ee40615
This fails with:
Test 3 Modify package and `import * as reactmapgl``
I overwrote my
node_modules/react-map-gl/package.json
based on https://github.com/visgl/react-map-gl/pull/2268/files and updated the imports.CODE: https://github.com/tordans/berlin-bikenetwork-monitoring/commit/e54fb1842071ca548ff1f8dd7523d0edc403feb1
Example of the change
Expected Behavior
No response
Steps to Reproduce
-
Environment
Logs
No response