GatsbyJS与panellum-react集成失败：我的操作哪里出错？

在GatsbyJS项目中尝试集成panellum-react（VR全景库）时遇到问题：访问页面时页面已生成，但全景查看器未渲染，浏览器控制台报错。

组件代码（PannellumViewer.js） #

import React, { useEffect } from 'react';
import Pannellum from 'react-pannellum';

const PannellumViewer = () => {
  useEffect(() => {
    // Load JSON data dynamically
    fetch('/data.json')
      .then(response => response.json())
      .then(data => {
        const config = {
          ...data['panorama.jpg'], // Replace with your image name
          autoLoad: true,
        };
        Pannellum.viewer('panorama-container', config);
      });
  }, []);

  return <div id="panorama-container" style={{ width: '100%', height: '500px' }} />;
};

export default PannellumViewer;

页面代码（PanoramaPage.js） #

import React from 'react';
import Layout from '../components/layout';
import PannellumViewer from '../components/PannellumViewer';

const PanoramaPage = () => (
  <Layout>
    <h1>Pannellum Viewer</h1>
    <PannellumViewer />
  </Layout>
);

export default PanoramaPage;

依赖配置（package.json） #

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^5.12.4",
    "gatsby-plugin-image": "^3.12.0",
    "gatsby-plugin-manifest": "^5.12.0",
    "gatsby-plugin-sharp": "^5.12.0",
    "gatsby-source-filesystem": "^5.12.0",
    "gatsby-transformer-sharp": "^5.12.0",
    "pannellum": "^2.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-pannellum": "^0.1.15"
  },
  "devDependencies": {
    "prettier": "^2.8.8"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

浏览器报错信息 #

Safari控制台报错 #

Unhandled Promise Rejection: TypeError: react_pannellum__WEBPACK_IMPORTED_MODULE_1__["default"].viewer is not a function. (In 'react_pannellum__WEBPACK_IMPORTED_MODULE_1__["default"].viewer('panorama-container', config)', 'react_...

[Error] TypeError: undefined is not an object (evaluating 'modulePath.replace')
    flushSyncCallbacks (react-dom.development.js:54)
    commitRootImpl (react-dom.development.js:26954)
    commitRoot (react-dom.development.js:26677)
    finishConcurrentRender (react-dom.development.js:25976)
    performConcurrentWorkOnRoot (react-dom.development.js:25804)
    performConcurrentWorkOnRoot
    workLoop (scheduler.development.js:266)
    flushWork (scheduler.development.js:239)
    performWorkUntilDeadline (scheduler.development.js:533)

Chrome控制台报错 #

Error in function eval in ./src/components/PannellumViewer.js:14
react_pannellum__WEBPACK_IMPORTED_MODULE_1__.default.viewer is not a function

./src/components/PannellumViewer.js:14
Open in Editor
  12 |           autoLoad: true,
  13 |         };
> 14 |         Pannellum.viewer('panorama-container', config);
     |                  ^
  15 |       });
  16 |   }, []);
  17 |

我是React新手，有一定GatsbyJS使用经验，希望得到问题排查的提示。

内容的提问来源于stack exchange，提问作者luisnegron