Not able to import module

tap2k commented 2 years ago

error - /Users/parikh/dev/MVCweb/node_modules/react-photo-sphere-viewer/dist/index.js:1 import React, { forwardRef, createRef, useState, useEffect, useImperativeHandle } from 'react'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1055:15) at Module._compile (node:internal/modules/cjs/loader:1090:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Module.require (node:internal/modules/cjs/loader:1028:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.react-photo-sphere-viewer (/Users/parikh/dev/MVCweb/.next/server/pages/test.js:98:18) at __webpack_require__ (/Users/parikh/dev/MVCweb/.next/server/webpack-runtime.js:33:42) { page: '/test' }

Elius94 commented 2 years ago

Hi! it seems that you are trying to use this library as common js module istead of ES module. This library only works in project described as ES modules like other React libraries.

tap2k commented 2 years ago

Here is the code Im using to import. Am I doing it wrong?

import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';

Elius94 commented 2 years ago

No, it's fine! you can also check for other differences in the sandbox example showed in the readme. Can you argument more your trouble?

tap2k commented 2 years ago

Im pasting my complete sample code below. It gives the the error above when I try to build or run.

import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";

const url = "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg";

export default ( ) => {
    return (
                <div><ReactPhotoSphereViewer src={url} />            
    );
}

Elius94 commented 2 years ago

I see an error in your code: <div><ReactPhotoSphereViewer src={url} /> : You forgot to close the div tag.

https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-forked-31i1ns?file=/src/App.js:0-374

Look at this sample with your image, it's working well!

import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";

const url =
  "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg";

export default () => {
  return (
    <ReactPhotoSphereViewer
      src={url}
      height={"100vh"}
      width={"100%"}
    ></ReactPhotoSphereViewer>
  );
};

tap2k commented 2 years ago

Sorry, I had the closing div in my example just an error in pasting. I am running your example and still running in to the error below.

info  - Collecting page data .(node:46909) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/parikh/dev/MVCweb/node_modules/react-photo-sphere-viewer/dist/index.js:1
import React, { forwardRef, createRef, useState, useEffect, useImperativeHandle } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)

> Build error occurred
Error: Failed to collect page data for /test2
    at /Users/parikh/dev/MVCweb/node_modules/next/dist/build/utils.js:743:15 {
  type: 'Error'
}
info  - Collecting page data .

Elius94 commented 2 years ago

Ok, what about your package.json? Look at the one in the previous sandbox:

{
  "name": "sandbox-react-photo-sphere-viewer-by-elius94",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-photo-sphere-viewer": "2.1.3",
    "react-scripts": "4.0.0"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

it seems that in your there's something like "type": "commonjs". in this case, just remove it or change to "type": "module"

let me know

tap2k commented 2 years ago

Here is my package.json (Im using next.js)

{
  "scripts": {
    "develop": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "leaflet": "^1.8.0",
    "leaflet-defaulticon-compatibility": "^0.1.1",
    "leaflet-geosearch": "^3.6.1",
    "mime-types": "^2.1.35",
    "next": "^12.2.5",
    "photo-sphere-viewer": "^4.7.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-geolocation": "^1.1.0",
    "react-leaflet": "^4.0.2",
    "react-photo-sphere-viewer": "^2.1.3",
    "videojs-errors": "^6.0.0",
    "videojs-vr": "^1.10.1"
  }
}

I tried adding "type": "module" to ./node_modules/react-photo-sphere-viewer/package.json, but that just changed the error message I am receiving:

info  - Collecting page data ..(node:47023) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/parikh/dev/MVCweb/node_modules/react-photo-sphere-viewer/dist/node_modules/photo-sphere-viewer/dist/photo-sphere-viewer.js:3
import { commonjsGlobal } from '../../../_virtual/_commonjsHelpers.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)

> Build error occurred
Error: Failed to collect page data for /test2
    at /Users/parikh/dev/MVCweb/node_modules/next/dist/build/utils.js:743:15 {
  type: 'Error'
}
info  - Collecting page data .

tap2k commented 2 years ago

Never mind I was just able to get it to work by dynamically importing the module. Thanks for your help! Pasting code for others facing this issue.

import dynamic from "next/dynamic";

const ReactPhotoSphereViewer = dynamic(() => import('react-photo-sphere-viewer').then((mod) => mod.ReactPhotoSphereViewer), { ssr: false });

const url =
  "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg";

export default () => {
  return (
    <ReactPhotoSphereViewer
      src={url}
      height={"100vh"}
      width={"100%"}
    ></ReactPhotoSphereViewer>
  );
};

Elius94 commented 2 years ago

Uh, ok, thanks, I will add this suggestion in the readme for others who wants to use it with Next! Thanks a lot

Elius94 / react-photo-sphere-viewer

Not able to import module #7