2.0.0-pre.1 - require() of es modules is not supported. #334

cwoodward10 · 2021-09-12T17:06:51Z

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:

HarelM · 2021-09-12T17:55:11Z

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?
Can you share your usage call?

cwoodward10 · 2021-09-13T04:27:27Z

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:
`<script lang="ts">
import 'mapbox-gl/dist/mapbox-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], // starting position [lng, lat]
zoom: 9 // starting zoom
});
})
</script>

>`

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.
https://kit.svelte.dev/docs

HarelM · 2021-09-13T09:15:51Z

If you are doing an import maplibregl from 'maplibre-gl' then where is this require() error is coming from?
I think you might need to open a ticket for serletkit as I'm not sure how they are doing the import behind the scenes...
It's extremely hard to help without seeing any code and understanding the bigger picture.
If you could share a jsbin, stackblitz, or anything like that it would help...

cwoodward10 · 2021-09-13T14:22:21Z

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.

HarelM · 2021-09-13T14:45:17Z

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...

lhapaipai · 2021-09-19T12:29:37Z

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.
But SSR support is still experimental and there are cases where it believes the module is commonjs and does nothing to run it on the server side : vitejs/vite#2393 (comment)

example to reproduce the issue

npm init svelte@next sandbox
# skeleton project
cd sandbox
npm install
npm i maplibre-gl

maplibre : [email protected]
@sveltejs/kit : 1.0.0-next.169
svelte : 3.42.6

src/routes/map.svelte

<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 dev

browse : http://localhost:3000/map

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.

[vite] Error when evaluating SSR module /node_modules/maplibre-gl/dist/maplibre-gl.js:
ReferenceError: navigator is not defined
    at eval (/node_modules/maplibre-gl/dist/maplibre-gl.js:33:3405)
    at define (/node_modules/maplibre-gl/dist/maplibre-gl.js:24:9)
    at eval (/node_modules/maplibre-gl/dist/maplibre-gl.js:37:1)
    at eval (/node_modules/maplibre-gl/dist/maplibre-gl.js:7:96)
    at eval (/node_modules/maplibre-gl/dist/maplibre-gl.js:8:2)
    at instantiateModule (/home/lhapaipai/sandbox/postgis-sandbox/project-04-webgis-app/node_modules/vite/dist/node/chunks/dep-36bf480c.js:75140:15)

related in this post (sveltejs/kit#779)

maplibre-gl-js/src/util/browser.ts

Line 44 in 37bcaf5

hardwareConcurrency: navigator && navigator.hardwareConcurrency || 4,

maplibre-gl-js/src/util/dom.ts

Line 41 in 37bcaf5

const docStyle = window.document && window.document.documentElement.style;

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?

HarelM · 2021-09-19T13:30:31Z

Honestly, I'm a bit lost here...
If you think there's an easy solution to implement here please open a PR. I'm not sure how to help...

* 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

astridx · 2021-10-01T08:57:19Z

@lhapaipai

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 import maplibregl from "maplibre-gl" to import * as maplibregl from "maplibre-gl". After that it worked.

Maybe that's worth a try?

gtnbssn · 2021-11-02T01:12:08Z

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 import * as maplibregl from 'maplibre-gl' or import maplibregl from 'maplibre-gl' my build works properly, but the vite dev server doesn't, and i get Uncaught TypeError: maplibregl.Map is not a constructor. I can however type maplibregl.Map in the console and get an object that looks about right.

If i import with import 'maplibregl', it works in dev (?!) but the build doesn't: Uncaught ReferenceError: maplibregl is not defined.

HarelM · 2021-11-18T14:37:54Z

Can you guys check my poposed fixed in the following comment:
#370 (comment)
I think it's a very simple fix that doesn't require a lot of changes...

HarelM · 2021-11-18T22:03:42Z

Can you guys check if this was fixed in version 2.0.0-pre.6? If so can you close this issue?

lhapaipai · 2021-11-18T22:24:00Z

Tested with vite 2.6.x with dev server and after build (with rollup). I have default export and named exports.
Tested with svelte-kit . same result.
I dream !! 🎉

maybe wait for feedback with other bundlers

HarelM · 2022-02-11T19:53:13Z

No feedback, assuming this was fixed, closing...

cwoodward10 changed the title ~~require() of es modules is not supported.~~ 2.0.0-pre.1 - require() of es modules is not supported. Sep 12, 2021

lhapaipai mentioned this issue Sep 20, 2021

fix #334 add esm export #368

Closed

lhapaipai added a commit to lhapaipai/maplibre-gl-js that referenced this issue Sep 20, 2021

update changelog maplibre#334

7cc4588

lhapaipai added a commit to lhapaipai/maplibre-gl-js that referenced this issue Sep 20, 2021

update changelog type check (maplibre#334)

afb71f7

lhapaipai added a commit to lhapaipai/maplibre-gl-js that referenced this issue Sep 20, 2021

update changelog type check (maplibre#334)

053f8b5

lhapaipai mentioned this issue Sep 20, 2021

Non dom environment #369

Merged

HarelM pushed a commit that referenced this issue Sep 27, 2021

Non dom environment (#369)

3c78cdc

* 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

HarelM mentioned this issue Nov 18, 2021

Can't build version 2.X with Webpack (module has no exports) #370

Closed

HarelM closed this as completed Feb 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2.0.0-pre.1 - require() of es modules is not supported. #334

2.0.0-pre.1 - require() of es modules is not supported. #334

cwoodward10 commented Sep 12, 2021

HarelM commented Sep 12, 2021

cwoodward10 commented Sep 13, 2021 •

edited

Loading

HarelM commented Sep 13, 2021

cwoodward10 commented Sep 13, 2021

HarelM commented Sep 13, 2021

lhapaipai commented Sep 19, 2021 •

edited

Loading

HarelM commented Sep 19, 2021

astridx commented Oct 1, 2021

gtnbssn commented Nov 2, 2021

HarelM commented Nov 18, 2021

HarelM commented Nov 18, 2021

lhapaipai commented Nov 18, 2021

HarelM commented Feb 11, 2022

2.0.0-pre.1 - require() of es modules is not supported. #334

2.0.0-pre.1 - require() of es modules is not supported. #334

Comments

cwoodward10 commented Sep 12, 2021

HarelM commented Sep 12, 2021

cwoodward10 commented Sep 13, 2021 • edited Loading

HarelM commented Sep 13, 2021

cwoodward10 commented Sep 13, 2021

HarelM commented Sep 13, 2021

lhapaipai commented Sep 19, 2021 • edited Loading

HarelM commented Sep 19, 2021

astridx commented Oct 1, 2021

gtnbssn commented Nov 2, 2021

HarelM commented Nov 18, 2021

HarelM commented Nov 18, 2021

lhapaipai commented Nov 18, 2021

HarelM commented Feb 11, 2022

cwoodward10 commented Sep 13, 2021 •

edited

Loading

lhapaipai commented Sep 19, 2021 •

edited

Loading