csdiehl
commented
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.
Open tordans opened 1 year ago
csdiehl
commented
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.
tordans
commented
1 year ago 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 :-).
tordans
commented
1 year ago 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
Pessimistress
commented
1 year ago 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.
Pessimistress
commented
1 year ago Try 7.2.0-beta.1
tordans
commented
1 year ago @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!
tordans
commented
9 months ago @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. |
Pessimistress
commented
9 months ago @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
*.mjspart 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.jsonbased 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