Import error message for '@tweenjs/tween.js' while using typescript. #82
Comments
|
@hutajoullach which version of |
|
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 When I import I might be making silly mistakes here, but no of work arounds worked for me so far. |
|
This is my public repo where I replicated the issue. I created Globe there and imported it inside |
|
@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 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! |
|
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: 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. |
|
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 three-globe, afaik, is in ESM world, so what you want to import is tweenjs's changing my mainFields to |
|
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! |
|
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. |
|
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. It's serverless, so please don't mind the cold start on db. Here's the source code. |
Describe the bug
I am rendering globe on a page using Next.js and TypeScript and it worked fine on dev environment, however, once I tried to build and deploy it to vercel, I got an error
"SyntaxError: The requested module '@tweenjs/tween.js' does not provide an export named 'default'". It seems this issue was addressed on tween.js side, so I'm guessing the issue is coming from the three-globe side. This issue was fixed by Tween released in the18.6.1version. I tried the importing method mentioned by them, but the error seems to persist. Those are build time errors.Expected behavior
No importing error on build time.
The text was updated successfully, but these errors were encountered: