Skip to content

Commit 4230925

Browse files
Ihor DykhtaIhor Dykhta
Ihor Dykhta
authored and
Ihor Dykhta
committed
remove extra plugins; migrate to esm
Signed-off-by: Ihor Dykhta <ihordykhta@Ihors-MacBook-Pro.local>
1 parent 7ebb926 commit 4230925

4 files changed

Lines changed: 22 additions & 145 deletions

File tree

‎examples/get-started-vite/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
},
1010
"dependencies": {
1111
"@deck.gl/mapbox": "9.3.1",
12-
"@kepler.gl/components": "^3.3.0-alpha.5",
13-
"@kepler.gl/reducers": "^3.3.0-alpha.5",
12+
"@kepler.gl/components": "^3.3.0-alpha.6",
13+
"@kepler.gl/reducers": "^3.3.0-alpha.6",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0",
1616
"react-redux": "^9.1.0",

‎examples/get-started-vite/vite.config.ts‎

Lines changed: 8 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@ import {defineConfig} from 'vite';
55
import react from '@vitejs/plugin-react';
66
import wasm from 'vite-plugin-wasm';
77
import {resolve, dirname} from 'path';
8-
import {createRequire} from 'module';
98
import {fileURLToPath} from 'url';
109

11-
const _require = createRequire(import.meta.url);
1210
const _dirname = dirname(fileURLToPath(import.meta.url));
1311

1412
// @turf/rewind ESM entry only has `export default rewind` (no named export), but
@@ -27,75 +25,11 @@ const turfRewindPlugin = {
2725
}
2826
};
2927

30-
// @hubble.gl/react was compiled with esbuild targeting Node, using isNodeMode=1 in
31-
// its __toESM helper. With isNodeMode=1, __toESM ALWAYS sets .default to the entire
32-
// require() result regardless of the module's __esModule flag:
33-
//
34-
// var import_react_map_gl = __toESM(require("react-map-gl"), 1)
35-
// → import_react_map_gl.default = entire_exports_object ← "got: object"
36-
//
37-
// This was fine when react-map-gl/7 and @deck.gl/react/8 each did
38-
// `module.exports = TheComponent` (the require result was the component directly).
39-
// Modern versions wrap everything: `module.exports = __toCommonJS({Map, ...})`.
40-
//
41-
// Vite plugins (resolveId/load) are NOT invoked for nested node_modules during
42-
// esbuild pre-bundling. @hubble.gl/react has its own node_modules/react-map-gl@7.1.9,
43-
// so the Vite plugin chain is bypassed for that resolution entirely.
44-
//
45-
// Fix: use a native esbuild plugin (optimizeDeps.esbuildOptions.plugins). These run
46-
// inside esbuild itself and intercept every require() call, including from nested
47-
// node_modules. The shim sets module.exports = <component> so that
48-
// __toESM(require("pkg"), 1).default === <component> ✓
49-
const reactMapGlCjsPath = _require.resolve('react-map-gl/mapbox');
50-
const deckGlReactCjsPath = _require.resolve('@deck.gl/react');
51-
52-
function makeHubbleInteropShim(getComponent: string, cjsPath: string): string {
53-
return [
54-
'"use strict";',
55-
`const _m = require(${JSON.stringify(cjsPath)});`,
56-
`const Comp = ${getComponent};`,
57-
// Copy all named exports onto Comp so useControl, DeckGL etc. remain accessible
58-
// as properties (for callers using import_pkg.useControl or import_pkg.DeckGL).
59-
'Object.assign(Comp, _m);',
60-
// Ensure Comp.default === Comp so _interopRequireDefault also works.
61-
'Comp.default = Comp;',
62-
// module.exports = Comp means __commonJS wrapper returns Comp directly,
63-
// so __toESM(require("pkg"), isNodeMode=1).default === Comp (a React forwardRef).
64-
'module.exports = Comp;'
65-
].join('\n');
66-
}
67-
68-
// This is an esbuild-level plugin, NOT a Vite plugin.
69-
// It must be placed in optimizeDeps.esbuildOptions.plugins to run during pre-bundling.
70-
const hubbleGlInteropEsbuildPlugin = {
71-
name: 'hubble-gl-cjs-interop',
72-
setup(build: any) {
73-
build.onResolve({filter: /^react-map-gl$/}, () => ({
74-
path: 'react-map-gl-shim',
75-
namespace: 'hubble-gl-interop'
76-
}));
77-
build.onResolve({filter: /^@deck\.gl\/react$/}, () => ({
78-
path: 'deck-gl-react-shim',
79-
namespace: 'hubble-gl-interop'
80-
}));
81-
build.onLoad({filter: /.*/, namespace: 'hubble-gl-interop'}, (args: any) => {
82-
if (args.path === 'react-map-gl-shim') {
83-
return {
84-
contents: makeHubbleInteropShim('_m.Map', reactMapGlCjsPath),
85-
loader: 'js',
86-
resolveDir: _dirname
87-
};
88-
}
89-
if (args.path === 'deck-gl-react-shim') {
90-
return {
91-
contents: makeHubbleInteropShim('_m.DeckGL', deckGlReactCjsPath),
92-
loader: 'js',
93-
resolveDir: _dirname
94-
};
95-
}
96-
});
97-
}
98-
};
28+
// @hubble.gl/react now ships proper ESM (no longer compiled with isNodeMode=1).
29+
// The old CJS shim for react-map-gl and @deck.gl/react is no longer needed and
30+
// was causing a double-init of luma.gl: the shim used require() which pulled in
31+
// the CJS chain (@deck.gl/core -> @luma.gl/* CJS) while kepler.gl ESM pulled in
32+
// the ESM luma.gl, resulting in two separate Luma class instances in the bundle.
9933

10034
// All @kepler.gl/* packages and their pure-CJS transitive dependencies.
10135
// These must be pre-bundled by esbuild so Vite serves them as ESM rather than
@@ -219,6 +153,8 @@ export default defineConfig({
219153
'@math.gl/sun',
220154
'@math.gl/types',
221155
'@math.gl/web-mercator',
156+
'@hubble.gl/core',
157+
'@hubble.gl/react',
222158
'thrift',
223159
...nodePolyfillDeps
224160
]
@@ -233,8 +169,7 @@ export default defineConfig({
233169
exclude: ['parquet-wasm', '@loaders.gl/parquet'],
234170
include: [...keplerPackages, 'apache-arrow', ...loadersCjsDeps, ...nodePolyfillDeps],
235171
esbuildOptions: {
236-
target: 'es2020',
237-
plugins: [hubbleGlInteropEsbuildPlugin]
172+
target: 'es2020'
238173
}
239174
}
240175
});

‎examples/get-started/esbuild.config.mjs‎

Lines changed: 10 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -34,69 +34,11 @@ const turfInteropPlugin = {
3434
}
3535
};
3636

37-
// @hubble.gl/react was compiled with esbuild targeting Node, using isNodeMode=1 in
38-
// its __toESM helper. With isNodeMode=1, __toESM ALWAYS sets .default to the entire
39-
// require() result regardless of the module's __esModule flag:
40-
//
41-
// var import_react_map_gl = __toESM(require("react-map-gl"), 1)
42-
// → import_react_map_gl.default = entire_exports_object ← "got: object"
43-
//
44-
// This was fine when react-map-gl/7 and @deck.gl/react shipped
45-
// `module.exports = TheComponent` directly; modern versions wrap everything:
46-
// `module.exports = __toCommonJS({Map, ...})`.
47-
//
48-
// @hubble.gl/react also has its own nested node_modules/react-map-gl@7.1.9 which
49-
// esbuild would find first. Intercepting both bare specifiers at the esbuild level
50-
// and injecting a CJS shim ensures __toESM(require("pkg"), 1).default === Comp ✓
51-
const reactMapGlCjsPath = require.resolve('react-map-gl/mapbox');
52-
const deckGlReactCjsPath = require.resolve('@deck.gl/react');
53-
54-
function makeHubbleInteropShim(getComponent, cjsPath) {
55-
return [
56-
'"use strict";',
57-
`const _m = require(${JSON.stringify(cjsPath)});`,
58-
`const Comp = ${getComponent};`,
59-
// Copy all named exports onto Comp so useControl, DeckGL etc. remain accessible.
60-
'Object.assign(Comp, _m);',
61-
// Ensure Comp.default === Comp so _interopRequireDefault also works.
62-
'Comp.default = Comp;',
63-
// module.exports = Comp → __commonJS wrapper returns Comp directly,
64-
// so __toESM(require("pkg"), isNodeMode=1).default === Comp (a React forwardRef).
65-
'module.exports = Comp;'
66-
].join('\n');
67-
}
68-
69-
const hubbleGlInteropPlugin = {
70-
name: 'hubble-gl-cjs-interop',
71-
setup(build) {
72-
build.onResolve({filter: /^react-map-gl$/}, () => ({
73-
path: 'react-map-gl-shim',
74-
namespace: 'hubble-gl-interop'
75-
}));
76-
// Also intercept @deck.gl/react before the dedupe-deck-luma plugin sees it;
77-
// the shim already points to the locally-installed 9.3.7 copy.
78-
build.onResolve({filter: /^@deck\.gl\/react$/}, () => ({
79-
path: 'deck-gl-react-shim',
80-
namespace: 'hubble-gl-interop'
81-
}));
82-
build.onLoad({filter: /.*/, namespace: 'hubble-gl-interop'}, args => {
83-
if (args.path === 'react-map-gl-shim') {
84-
return {
85-
contents: makeHubbleInteropShim('_m.Map', reactMapGlCjsPath),
86-
loader: 'js',
87-
resolveDir: __dirname
88-
};
89-
}
90-
if (args.path === 'deck-gl-react-shim') {
91-
return {
92-
contents: makeHubbleInteropShim('_m.DeckGL', deckGlReactCjsPath),
93-
loader: 'js',
94-
resolveDir: __dirname
95-
};
96-
}
97-
});
98-
}
99-
};
37+
// @hubble.gl/react now ships proper ESM (no longer compiled with isNodeMode=1).
38+
// The old CJS shim for react-map-gl and @deck.gl/react is no longer needed and
39+
// was causing a double-init of luma.gl: the shim used require() which pulled in
40+
// the CJS chain (@deck.gl/core -> @luma.gl/* CJS) while kepler.gl ESM pulled in
41+
// the ESM luma.gl, resulting in two separate Luma class instances in the bundle.
10042

10143
const config = {
10244
platform: 'browser',
@@ -132,16 +74,16 @@ const config = {
13274
// an esbuild resolver plugin that re-resolves the specifier from __dirname so that
13375
// Node resolution always picks up the local node_modules copy.
13476
plugins: [
135-
hubbleGlInteropPlugin,
13677
{
13778
name: 'dedupe-deck-luma',
13879
setup(build) {
139-
// Re-resolve any @deck.gl/*, @luma.gl/*, @math.gl/*, styled-components,
140-
// react, and react-dom import from the example root so that Node's resolution
141-
// always lands in this example's own node_modules (single instance per package).
80+
// Re-resolve any @deck.gl/*, @luma.gl/*, @math.gl/*, @hubble.gl/*,
81+
// react-map-gl, styled-components, react, and react-dom import from the
82+
// example root so that Node's resolution always lands in this example's
83+
// own node_modules (single instance per package).
14284
// esbuild automatically skips the current plugin for the nested resolve()
14385
// call, preventing infinite recursion.
144-
build.onResolve({filter: /^(@(deck|luma|math)\.gl\/|styled-components$|react$|react-dom$)/}, async args => {
86+
build.onResolve({filter: /^(@(deck|luma|math|hubble)\.gl\/|styled-components$|react$|react-dom$)/}, async args => {
14587
// Explicit recursion guard: esbuild is supposed to skip the current plugin
14688
// for nested build.resolve() calls, but this ensures it even if it doesn't.
14789
if (args.pluginData?.deduped) return;

‎examples/get-started/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
},
1010
"dependencies": {
1111
"@deck.gl/mapbox": "9.3.1",
12-
"@kepler.gl/components": "^3.3.0-alpha.5",
13-
"@kepler.gl/reducers": "^3.3.0-alpha.5",
12+
"@kepler.gl/components": "^3.3.0-alpha.6",
13+
"@kepler.gl/reducers": "^3.3.0-alpha.6",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0",
1616
"react-redux": "^9.1.0",

0 commit comments

Comments
 (0)