Challenge with executing javascript library (photo sphere viewer)

I was excited to incorporate Photo Sphere Viewer into my project. After running

npm i photo-sphere-viewer

I noticed that the modules were successfully downloaded.

Following that, I added this line inside my project:

import PhotoSphereViewer from 'photo-sphere-viewer/dist/photo-sphere-viewer';

Unfortunately, I encountered an error:

Failed to compile.

Error in ./~/photo-sphere-viewer/dist/photo-sphere-viewer.js
Module not found: 'D.js' in /home/ghy/WebstormProjects/mia-map/node_modules/photo-sphere-viewer/dist

 @ ./~/photo-sphere-viewer/dist/photo-sphere-viewer.js 9:4-55

Could someone assist me in identifying the issue?

PS. From what I can tell, it seems like this line is causing trouble (inside photo-sphere-viewer.js):

  if (typeof define === 'function' && define.amd) {
    define(['three', 'D.js', 'uevent', 'doT'], factory);
  }

Additionally, I am confused as to why it is entering this if statement since I wasn't aware of having require.js installed.

PPS. This is a react application generated using create-react-app.

javascriptnpmphotosphereviewer

Answer №1

I have successfully integrated webpack with the following code:

import { Gallery } from 'image-gallery';

const gallery = new Gallery({
    container: document.querySelector('#gallery'),
    images: ['path/to/image1.jpg', 'path/to/image2.jpg']
});

You can easily add this package to your project by running npm install or yarn add

npm install image-gallery
# or
yarn add image-gallery

Answer №2

For smooth functioning of the photo sphere viewer library, consider integrating the following cdn:

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking full content access on newapi.org is just a few simple steps away

Currently, I am in the process of building a website using the newsorg API. After sending a request to the API, below is the sample output that I received: "articles": [ -{ -"source": { "id": null, "name": "Hind ...

javascriptnode.jsreactjsapiexpress

How to trigger a function across various controllers in AngularJS

We're in the process of creating an app using phonegap onsen and angularJS. Attempting to invoke a function from a different controller has been challenging. Despite following various documentation such as this Unfortunately, it's not working f ...

javascriptangularjsonsen-ui

Is there a way to retrieve a large number of users through an API using async await?

I am trying to retrieve all users from an API and I want to identify which user receives the highest payment. For instance let users=['tom','jenny','smith','Joe'] async function getUsers() { let response = awa ...

javascriptnode.jsrestfetch

Waves emanating from the heart of rings

I'm experimenting with creating a ripple effect using Anime.js on an array of dots forming circles. Despite trying various methods, I can't seem to achieve the desired result. Does anyone have any suggestions on how I can make it work? Here&apos ...

javascriptanimationanime.js

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user? I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates. I attempted ...

javascriptjqueryhtmlcss

NodeJS error: The 'error' event was not properly handled, resulting in a throw er

I've developed a basic web application using React, node-postgres, expressJS, and PostgreSQL DB. The app includes two input fields and a button. Upon clicking the button, the values are saved in the database. While running the ExpressJS server with ...

javascriptnode.jsjsonreactjs

"Every time ajax is called, it will always generate

function lks() { var groupname = document.getElementById('groupname').value; $.ajax ({ url: 'verifyGroup.php?groupname='+groupname, type: 'get', ...

javascriptphpjqueryajax

dotenv fails to execute when using root privileges

I have a node application developed using create-react-app. Initially, I set it up to run on port 80 by adding a .env file with the following content: PORT=80 However, when attempting to start the app using npm start, I encountered an error: ? A ...

node.jsreactjsnpmcreate-react-appdotenv

Discover the capability to choose dates from different months using the DatePicker component from @material-ui/pickers

I am currently in the midst of a React project that requires the use of the DatePicker component from @material-ui/pickers. The specific mandate is to show dates outside of the current month and allow users to select those days without needing to switch m ...

javascriptreactjsdatepickermaterial-ui

Is there a way to utilize OpenLayers to showcase various icons for distinct features all within one layer?

Being new to Openlayers/JS and fairly inexperienced with programming in general, there may be other issues in my code that I'm unaware of. I am currently using the latest version of Openlayers (5.3.0). My application sends GeoJson formatted data via ...

javascriptajaxgisgeojsonopenlayers-5

Tips for showing variables in Console directly from the Sources panel?

As I dive into debugging front-end code in Chrome, I am encountering a question that may seem basic to experienced developers. Specifically, while exploring the Sources panel within Chrome's Dev Tools, I find myself hovering over a variable labeled _ ...

javascriptangularjs

Troubleshooting npm installation: when <package> installs successfully but npm install fails

When I attempt to download the source code and execute: npm install The installation process crashes (possibly due to running out of memory), but if I directly run: npm install bigchaindb-driver (version 0.3.0) Then it works fine... Error log: npm ht ...

node.jsnpmbigchaindb

What could be causing the post method to fail in this AngularJS example?

After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

Displaying information in form using ajax within the laravel framework

I am currently utilizing ajax to retrieve data from a database. While I am able to successfully retrieve the data on the backend, I am facing difficulties displaying it in the input field below. I have tried writing some code, but it seems that the JavaScr ...

javascriptjqueryajax

"Troubles with installing or upgrading packages in OSX Mavericks due to Node / NPM issues

Recently, my node and npm installations were working perfectly fine until today. I encountered an error while trying to install gulp. Upon running sudo npm install -g gulp, I received a long list of errors. I attempted to reinstall node using the Mackint ...

node.jsnpmgulp

What is the best way to remove all attributes from one interface when comparing to another?

Consider the following two interfaces: interface A { a: number; b: string; } interface B { b: string; } I am interested in creating a new type that includes all the keys from interface A, but excludes any keys that are also present in interface B. ...

javascripttypescript

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Defining Higher Order Components in ReactJS: A comprehensive guide

Trying to wrap my head around Higher Order Components (HOC) in ReactJS with this simple example... I've got three files - First.js, Second.js, and App.js. How should I structure these files so that the computations done in the first file can be acces ...

javascriptnode.jsreactjsreact-redux

The variable "module" is not recognized when attempting to run a code snippet from the official example

After attempting to run example code in my editor, I was faced with the issue that it did not work as expected (to no one's surprise). In order to make it function properly, I made some alterations. Interestingly enough, even after tweaking the code, ...

requirejsnpmbrowserify