Import error message for '@tweenjs/tween.js' while using typescript.

[hutajoullach]

Import error message for '@tweenjs/tween.js' while using typescript.

[vasturiano]

@hutajoullach in order to make this possible to troubleshoot, are you able to create a simple example on https://codesandbox.io/ where you can accurately reproduce the issue? This would give us a common ground for working it out.

[vasturiano]

@hutajoullach which version of @tweenjs/tween.js do you have in your app dependency tree (you can see it in yarn.lock or similar)? And do you have more than one version of it in your bundle?

[hutajoullach]

I rolled back to the previous commit and thought the error was fixed, but looks like I got ahead of myself. The import issue still persists and it caches the error during the run time as well.

The version of @tweenjs/tween.js is 20.0.3 and I only see one inside package-lock.json and bundle.

When I import TWEEN inside "three-globe.mjs", it automatically imports along with named imports, so I know it's there and "tween.d.ts" is also looks fine. I tried those imports and it did't work out for me.

import TWEEN from '@tweenjs/tween.js';
import * as TWEEN from '@tweenjs/tween.js';
import { Tween, Easing, Interpolation } from '@tweenjs/tween.js';
const TWEEN = require('@tweenjs/tween.js');
const TWEEN = import('@tweenjs/tween.js');

I might be making silly mistakes here, but no of work arounds worked for me so far.

[hutajoullach]

This is my public repo where I replicated the issue. I created Globe there and imported it inside src/pages/index.tsx. I thought the alias for default import of "react-globe.gl" might be the issue, so I renamed it to "Globe", but the error didn't go away. I plan to hit multiple API endpoints and render coordinates, so react-globe.gl is a really cool package to try out.

https://github.com/HutaJoullach/nextjs-threejs-pin-dropping-app/blob/main/src/components/globe.tsx

[hutajoullach]

@vasturiano Thank you for looking into this issue. I've looked into the issue again and it seems the error was originated in Next.js's ssr. I was not using Next.js app dir and three.js rendering worked fine on my other projects, so I was oblivious to this possibility. I used next/dynamic and successfully built/deployed the app to vercel.

Apologies for the confusion and thanks again for this amazing package!

[jckr]

Hi, I am also running into this error now - I am trying out react-globe.gl, and I'm looking at @tweenjs/tween.js at version 20.0.3.

those are my error messages for now:

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 787:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 787:93-121
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1055:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1055:93-121
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1391:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1391:90-118
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1615:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1615:97-125
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1796:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 1796:100-128
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2130:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2130:93-121
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2368:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2368:94-122
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2574:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2574:95-123
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2749:16-27
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2885:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 2885:99-127
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 3175:6-18
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 3235:12-23
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 3239:23-49
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 3244:12-23
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-globe-virtual-4946eb57bc/0/cache/three-globe-npm-2.27.2-35436afa5e-2a5e040020.zip/node_modules/three-globe/dist/three-globe.mjs 3248:24-48
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-render-objects-virtual-42e6b08e33/0/cache/three-render-objects-npm-1.28.4-e830976a17-3420753b06.zip/node_modules/three-render-objects/dist/three-render-objects.mjs 259:8-20
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-render-objects-virtual-42e6b08e33/0/cache/three-render-objects-npm-1.28.4-e830976a17-3420753b06.zip/node_modules/three-render-objects/dist/three-render-objects.mjs 291:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-render-objects-virtual-42e6b08e33/0/cache/three-render-objects-npm-1.28.4-e830976a17-3420753b06.zip/node_modules/three-render-objects/dist/three-render-objects.mjs 291:74-100
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-render-objects-virtual-42e6b08e33/0/cache/three-render-objects-npm-1.28.4-e830976a17-3420753b06.zip/node_modules/three-render-objects/dist/three-render-objects.mjs 294:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/__virtual__/three-render-objects-virtual-42e6b08e33/0/cache/three-render-objects-npm-1.28.4-e830976a17-3420753b06.zip/node_modules/three-render-objects/dist/three-render-objects.mjs 294:84-110
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/cache/globe.gl-npm-2.28.4-a33487cb47-d53bd7ab32.zip/node_modules/globe.gl/dist/globe.gl.mjs 402:14-25
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

ERROR in ./.yarn/cache/globe.gl-npm-2.28.4-a33487cb47-d53bd7ab32.zip/node_modules/globe.gl/dist/globe.gl.mjs 402:86-110
export 'default' (imported as 'TWEEN') was not found in '@tweenjs/tween.js' (module has no exports)

a simple search led me to this issue, I haven't done any other investigation yet, so I'm going to try a few things.

[jckr]

here's my hypothesis as to why it's happening -

When I imported the module, this was in a repo which used webpack and whose webpack config includes the property mainFields: ['browser', 'main', 'module'] in that order.

three-globe, afaik, is in ESM world, so what you want to import is tweenjs's tween.esm.js. But even though they have "type": "module" in their package.json, because of my webpack configuration, tweenjs will expose its main, aka "tween.cjs.js" which is not ESM.

changing my mainFields to ['browser', 'module', 'main'] is solving my problem, here's hoping it doesn't break the rest of my repo but that's a separate problem :)

[fischerotto]

Hi @hutajoullach! I am also using Next.js and I'm getting the same error. Could you please describe in more detail how you have solved the issue? Thanks in advance!

[hutajoullach]

Hi @fischerotto, Are you using next 12 or 13? With next.js, your page will be built on the server side and sent to the client, so you want to wait until the page is rendered on the client side.

There are several ways to make sure components will be rendered on the client side, but if you are like me just want to render globe on the client side, try react's lazy loading.

import { lazy } from "react";

const Globe = lazy(() => {
  return import("react-globe.gl");
});

If you are using next 13, there are other ways to load the component on the client side as well.

[hutajoullach]

If you are using next 13, I recommend rendering the whole component on the client side only. I am using useRef to rotate the globe in my app, but since the component is built on the server side, it does not affect until the globe is rerendered on the client side.

I woke up the db, so you can test it out here, if you feel like.
https://nextjs-threejs-pin-dropping-app.vercel.app/

It's serverless, so please don't mind the cold start on db. Here's the source code.
https://github.com/hutajoullach/nextjs-threejs-pin-dropping-app/blob/main/src/components/globe/globe.tsx