Error during build: Missing "./index.css" specifier in "@photo-sphere-viewer/core" on 5.11.2 version update

[juanbrk]

Describe the bug

I've updated the library to use Its latest version (5.11.2) and when building the project for production I get this error that says there's a commonjs--resolver] Missing "./index.css" specifier in "@photo-sphere-viewer/core" package.
This is my package.json;

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --open --port 3000",
    "build": "tsc --skipLibCheck && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext ts --ext tsx --ext js --fix"
  },
  "dependencies": {
    "@arcgis/core": "^4.29.10",
    "@auth0/auth0-react": "^1.9.0",
    "@floating-ui/dom": "^1.4.3",
    "@headlessui/react": "^1.7.19",
    "@heroicons/react": "^1.0.6",
    "@hookform/error-message": "^2.0.0",
    "@photo-sphere-viewer/compass-plugin": "^5.11.2",
    "@photo-sphere-viewer/core": "^5.11.2",
    "@photo-sphere-viewer/equirectangular-tiles-adapter": "^5.11.2",
    "@photo-sphere-viewer/gallery-plugin": "^5.11.2",
    "@photo-sphere-viewer/markers-plugin": "^5.11.2",
    "@photo-sphere-viewer/plan-plugin": "^5.11.2",
    "@photo-sphere-viewer/visible-range-plugin": "^5.11.2",
    "@popperjs/core": "^2.11.6",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/typography": "^0.5.10",
    "@tanstack/react-query-devtools": "^4.29.19",
    "@tippyjs/react": "^4.2.6",
    "@types/esri-leaflet": "^3.0.3",
    "axios": "^0.26.1",
    "classnames": "^2.3.1",
    "date-fns": "^2.29.3",
    "esri-leaflet": "^3.0.12",
    "esri-leaflet-vector": "^4.2.3",
    "history": "^5.3.0",
    "i18next": "^22.0.4",
    "i18next-browser-languagedetector": "^7.0.0",
    "jquery": "^3.6.1",
    "leaflet": "^1.9.4",
    "lodash.debounce": "^4.0.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.29.0",
    "react-i18next": "^12.0.0",
    "react-loading-skeleton": "^3.1.0",
    "react-popper": "^2.3.0",
    "react-query": "^3.34.19",
    "react-router-dom": "^6.14.2",
    "react-table": "^7.7.0",
    "react-toastify": "^9.0.7",
    "react-use": "^17.3.2",
    "wkt": "^0.1.1"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.6",
    "@types/jquery": "^3.5.14",
    "@types/leaflet": "^1.9.12",
    "@types/lodash.debounce": "^4.0.7",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/react-table": "^7.7.10",
    "@typescript-eslint/eslint-plugin": "^5.48.1",
    "@typescript-eslint/parser": "^5.48.1",
    "@vitejs/plugin-react": "^1.0.7",
    "autoprefixer": "^10.4.4",
    "eslint": "^8.12.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "postcss": "^8.4.12",
    "prettier": "^2.6.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.9.4",
    "vite": "^5.4.11",
    "vite-plugin-ejs": "^1.7.0"
  },
  "engines": {
    "node": "20.x"
  }
}

Online demo URL

No response

Photo Sphere Viewer version

5.11.2

Plugins loaded

@photo-sphere-viewer/compass-plugin@ ├── @photo-sphere-viewer/core ├── @photo-sphere-viewer/equirectangular-tiles-adapter ├── @photo-sphere-viewer/gallery-plugin ├── @photo-sphere-viewer/markers-plugin ├── @photo-sphere-viewer/visible-range-plugin ├── @photo-sphere-viewer/plan-plugin

OS & browser

macOS Sonoma Version 14.0 Chrome

Additional context

I've had to update to the latest version by using the --legacy-peer-deps because I kept having dependency issues between the different photo-sphere-viewer modules. This is the exact line of code used to install all packages at once:

npm install @photo-sphere-viewer/compass-plugin@latest @photo-sphere-viewer/core@latest @photo-sphere-viewer/equirectangular-tiles-adapter@latest @photo-sphere-viewer/gallery-plugin@latest @photo-sphere-viewer/markers-plugin@latest @photo-sphere-viewer/plan-plugin@latest @photo-sphere-viewer/visible-range-plugin@latest --legacy-peer-deps

I've tried installing each package at once using both npm install @latest and npm update @module, but failed to dependency issues between modules.

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vite-project@0.0.0
npm ERR! Found: @photo-sphere-viewer/core@5.11.2
npm ERR! node_modules/@photo-sphere-viewer/core
npm ERR!   @photo-sphere-viewer/core@"^5.11.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @photo-sphere-viewer/core@"0.0.0" from @photo-sphere-viewer/compass-plugin@5.11.2
npm ERR! node_modules/@photo-sphere-viewer/compass-plugin
npm ERR!   @photo-sphere-viewer/compass-plugin@"^5.11.0" from the root project
npm 

I faced an error related to CJS vs ESM modules, tackled It and still got this issue.

The app still works locally but when running npm run build for production i get the error. That's why I haven't been able to provide a demo.

[mistic100]

There is no import/require of a CSS file in the final bundled file, you can check it here
https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.11.2/index.module.js

So I don't know what could cause this error.

---

However the peerDependencies declaration is indeed wrong, I'll fix that.

[juanbrk]

This is what I got when trying to solve the issue with the help of ChatGPT:

The issue arises because the index.css file in @photo-sphere-viewer/core is not explicitly exposed in the "exports" field of the package.json. The suggested solution is to update package.json to export index.css

I've also run a comparisson between the two latest versions' package.json based on this, and the key difference is the addition of the "exports" field, without the inclusion of index.css to it in version 5.11.2. ChatGPT, again:

which means that tools like Vite cannot automatically resolve it unless explicitly instructed to do so .
In 5.11.0, Vite and other bundlers have no restrictions and can resolve index.css directly.
In 5.11.2, the presence of the "exports" field limits what is accessible, and index.css is not exposed.

Since this might be related to an outdated vite version as well, I'll try to update vite (which might take a while) and see if the updates work properly after that.

[mistic100]

Okay I'll add the CSS files to the exports

"exports": {
  ".": {
    "import": "./index.module.js",
    "require": "./index.cjs"
  },
  "./index.css": "./index.css",
  "./index.scss": "./index.scss"
}

Nonetheless is is surprising the CSS files are resolved through the Node module resolutions as... they are not modules

[mistic100]

Made a quick test and TS definitions also need to be exported.

  "exports": {
    ".": {
      "import": {
        "default": "./index.module.js",
        "types": "./index.d.mts"
      },
      "require": {
        "default": "./index.cjs",
        "types": "./index.d.ts"
      }
    },
    "./index.css": "./index.css",
    "./index.scss": "./index.scss"
  }

5.11.3 fix incoming

[github-actions]

This feature/bug fix has been released in version 5.11.3.