search

chrisrzhou / react-globe

Create beautiful and interactive React + ThreeJS globe visualizations with ease.
https://react-globe.netlify.app/
MIT License
302 stars 54 forks source link

"Cannot use import statement outside a module", potentially missing Nextjs support #40

Closed PeerRich closed 3 years ago

PeerRich commented 4 years ago

Hey Chris, I am getting "Cannot use import statement outside a module" when running the standard globe:

import React from 'react';
import ReactGlobe from 'react-globe';

function SimpleGlobe() {
  return <ReactGlobe />
}

I think it's because this repository is missing Nextjs support? 

19:38:34.674 | Unhandled error during request: /vercel/21055b9b/node_modules/three/examples/jsm/controls/OrbitControls.js:1
19:38:34.674 | import {
19:38:34.674 | ^^^^^^
19:38:34.674 | SyntaxError: Cannot use import statement outside a module
19:38:34.674 | at wrapSafe (internal/modules/cjs/loader.js:1053:16)
19:38:34.674 | at Module._compile (internal/modules/cjs/loader.js:1101:27)
19:38:34.674 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.674 | at Module.load (internal/modules/cjs/loader.js:985:32)
19:38:34.674 | at Function.Module._load (internal/modules/cjs/loader.js:878:14)
19:38:34.674 | at Module.require (internal/modules/cjs/loader.js:1025:19)
19:38:34.674 | at require (internal/modules/cjs/helpers.js:72:18)
19:38:34.674 | at Object.<anonymous> (/vercel/21055b9b/node_modules/react-globe/dist/index.js:1:237)
19:38:34.674 | at Module._compile (internal/modules/cjs/loader.js:1137:30)
19:38:34.674 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | Error occurred prerendering page "/networks". Read more: https://err.sh/next.js/prerender-error
19:38:34.675 | /vercel/21055b9b/node_modules/three/examples/jsm/controls/OrbitControls.js:1
19:38:34.675 | import {
19:38:34.675 | ^^^^^^
19:38:34.675 | SyntaxError: Cannot use import statement outside a module
19:38:34.675 | at wrapSafe (internal/modules/cjs/loader.js:1053:16)
19:38:34.675 | at Module._compile (internal/modules/cjs/loader.js:1101:27)
19:38:34.675 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | at Module.load (internal/modules/cjs/loader.js:985:32)
19:38:34.675 | at Function.Module._load (internal/modules/cjs/loader.js:878:14)
19:38:34.675 | at Module.require (internal/modules/cjs/loader.js:1025:19)
19:38:34.675 | at require (internal/modules/cjs/helpers.js:72:18)
19:38:34.675 | at Object.<anonymous> (/vercel/21055b9b/node_modules/react-globe/dist/index.js:1:237)
19:38:34.675 | at Module._compile (internal/modules/cjs/loader.js:1137:30)
19:38:34.675 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
19:38:34.675 | info  - Generating static pages (12/13)
19:38:34.675 | info  - Generating static pages (13/13)
19:38:34.675 | > Build error occurred
19:38:34.677 | Error: Export encountered errors on following paths:
19:38:34.677 | /networks
19:38:34.677 | at exportApp (/vercel/21055b9b/node_modules/next/dist/export/index.js:24:1103)
19:38:34.677 | at runMicrotasks (<anonymous>)
19:38:34.677 | at processTicksAndRejections (internal/process/task_queues.js:97:5)
19:38:34.677 | at async build (/vercel/21055b9b/node_modules/next/dist/build/index.js:37:212)
19:38:34.730 | error Command failed with exit code 1.
19:38:34.730 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
19:38:34.739 | Error: Command "yarn run build" exited with 1
19:38:36.782
PeerRich commented 4 years ago

fixed it with

const ReactGlobe = dynamic(() => import('react-globe'), {
  ssr: false
});
chrisrzhou commented 3 years ago

Hi @PeerRich, I'm not very familiar with the bundling/build tools (this library uses microbundle). If you are able to find more information on how this can be fixed in the library, a PR is very welcome and I'm interested to know how/where the fix is applied!

intensr commented 2 years ago

@PeerRich i tryed your little trick but it seems it still doesnt want to work for me

Unhandled Runtime Error
TypeError: Class constructor EventDispatcher cannot be invoked without 'new'

Call Stack
InteractionManager
../node_modules/three.interaction/build/three.interaction.module.js (711:0)
new Interaction
../node_modules/three.interaction/build/three.interaction.module.js (4466:0)
scene.camera
../node_modules/react-globe/dist/index.module.js (1:4769)
new e
../node_modules/react-globe/dist/index.module.js (1:4872)
eval
../node_modules/react-globe/dist/index.module.js (1:12432)
invokePassiveEffectCreate
../node_modules/react-dom/cjs/react-dom.development.js (23487:0)
HTMLUnknownElement.callCallback
../node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
../node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
../node_modules/react-dom/cjs/react-dom.development.js (4056:0)
flushPassiveEffectsImpl
../node_modules/react-dom/cjs/react-dom.development.js (23574:0)

Did you run in something similar?

@chrisrzhou it would be really cool to have next support as it is one of the most used react tools at the time.

israel-lpz commented 2 years ago

Some solution?

dixitt5 commented 1 year ago

@intensr did you find the solution of the error?