2.0.0-pre.1 - require() of es modules is not supported. #334
Comments
cwoodward10
changed the title
|
We have moved to use node 14 and type module in package.jdon to be able to use new technologies and language capabilities, I think you can do the same, can't you? |
|
Oh I see. I'm in Node 14.15.3 and my package.json has type: module in it. Not sure if this answers your question but I'm calling it with this: And then I have a larger svelte component calling that one. I got it from the initial example. It works with the older version of MapLibre but not the newer. My main build is essentially following the "Getting Started" guide for SvelteKit then clearing out then components that they initially have so that I can use my own. |
|
If you are doing an |
|
Ok sounds good. I can look into jsbin and stackblitz as well as post on SvelteKit. But yes, that was the root of the problem as I could not for the life of me figure out why it was throwing out and error for a require() when I was using import. The weird thing was that there was no errors for Mapbox either. So it seemed to be just that one version of MapLibre which is why I posted here. |
|
There might be a problem with that version, we did some breaking changes, this is why it's version 2.0 but I don't know what exactly can cause this. We did remove support for IE which might cause this issue, I'm not sure... |
|
Hello, It seems that the problem come from SSR support of Vitejs. When he resolves a package server side (like with svelteKit), he tries to detect if it's a commonJS or ES module. If he detects the module provides a commonjs entry he does nothing and use the entry point. SSR externals. example to reproduce the issue npm init svelte@next sandbox
# skeleton project
cd sandbox
npm install
npm i maplibre-glmaplibre : maplibre-gl@2.0.0-pre.1
<script>
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';
import { onMount } from 'svelte';
onMount(() => {
var map = new maplibregl.Map({
accessToken: '',
container: 'map',
style:
'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // stylesheet location
center: [-74.5, 40],
zoom: 9
});
});
</script>
<div id="map" />
<style>
#map {
height: 100vh;
width: 100vw;
}
</style>npm run devbrowse : one solution might be : // svelte.config.js
import path from 'path';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
target: '#svelte',
vite: {
ssr: {
// we manually specify that maplibre does not have a commonJS syntax
noExternal: ['maplibre-gl']
},
}
}
};I also think it's not a maplibre issue. but the problem is not totally resolved because we encounter another issue. related in this post (sveltejs/kit#779) maplibre-gl-js/src/util/browser.ts Line 44 in 37bcaf5 maplibre-gl-js/src/util/dom.ts Line 41 in 37bcaf5 like @Rich-Harris said : "it should be possible to import a DOM-centric library in a non-DOM environment, even if it doesn't do anything". what do you think about this problem? |
|
Honestly, I'm a bit lost here... |
* check dom variables in server side environment * update changelog type check (#334) * simplification of the test for the existence of the property * test if window.document is defined
|
The error message indicates something different, but I had a problem with Maplibre 2.0 using Webpack and Gatsby. The error message was not clear there either. I changed the import from Maybe that's worth a try? |
|
I'm seeing something that might be related building a vanilla JS app with Vite, so i'll add it here in case that helps. If i import with If i import with |
|
Can you guys check my poposed fixed in the following comment: |
|
Can you guys check if this was fixed in version 2.0.0-pre.6? If so can you close this issue? |
|
Tested with vite 2.6.x with dev server and after build (with rollup). I have default export and named exports. maybe wait for feedback with other bundlers |
|
No feedback, assuming this was fixed, closing... |
Hello, first time doing this so correct me if I'm doing this in the wrong place but when I installed one of the later versions of MapLibre, the "2.0.0-pre.1" version, I got this error:
Must use import to load ES Module: [my-app-path]\node_modules\maplibre-gl\dist\maplibre-gl.js require() of ES modules is not supported. require() of [my-app-path]\node_modules\maplibre-gl\dist\maplibre-gl.js from [my-app-path]\node_modules\vite\dist\node\chunks\dep-972722fa.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename maplibre-gl.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from [my-app-path]\node_modules\maplibre-gl\package.json.I no longer got this error when going back to "v1.15.2". For reference, I started a project with SvelteKit. I'll just go with "v1.15.2" for now but figured I'd bring up that I had this issue with "2.0.0-pre.1".
The text was updated successfully, but these errors were encountered: