Can't resolve '../node_modules/maplibre-gl/dist/maplibre-gl.css'

[sunshinesmilelk]

When I use the latest version of plotly.js 2.35.1, the following error occurs, but there was no such error with the previous version.

[archmoj]

@birkskyum Would you please have a look at this?

[archmoj]

@sunshinesmilelk Would you please explain how you loaded plotly.js?

[coffe4u]

When attempting to upgrade from 2.35.0 to 2.35.1, I also experience this issue.

ERROR in ./node_modules/plotly.js/src/registry.js 277:8-67
Module not found: Error: Can't resolve '../node_modules/maplibre-gl/dist/maplibre-gl.css' in '/home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/src'
resolve '../node_modules/maplibre-gl/dist/maplibre-gl.css' in '/home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/src'
  using description file: /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/package.json (relative path: ./node_modules/maplibre-gl/dist/maplibre-gl.css)
      Field 'browser' doesn't contain a valid alias configuration
      /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css doesn't exist
      .webpack.js
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.webpack.js doesn't exist
      .web.js
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.web.js doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.js doesn't exist
      .mts
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.mts doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.ts doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css.tsx doesn't exist
      as directory
        /home/runner/work/cps-staff-portal/cps-staff-portal/node_modules/plotly.js/node_modules/maplibre-gl/dist/maplibre-gl.css doesn't exist
 @ ./node_modules/plotly.js/src/core.js 12:15-36
 @ ./node_modules/plotly.js/lib/core.js 3:0-39
 @ ./resources/assets/js/components/reports-v2/graphs/BarChart.jsx 29:0-40 92:6-20 111:8-22 302:6-21
 @ ./resources/assets/js/components/reports-v2/snapshots/community-catalog/CommunityCatalog.jsx 15:0-45 47:53-61 59:55-63
 @ ./resources/assets/js/components/reports-v2/reports/Reports.constants.ts 8:43-101
 @ ./resources/assets/js/components/reports-v2/reports/Reports.tsx 58:28-58
 @ ./resources/assets/js/app.js 102:0-49

webpack 5.94.0 compiled with 1 error in 267682 ms

[coffe4u]

For what it's worth, my project is using 1 major version older for css-loader(6.*) and style-loader(3.*) compared to Plot.ly. No clue if that has something to do with it.

[birkskyum]

@coffe4u , what package manager do you use, and do you have a workspace/monorepo setup?

[coffe4u]

I use yarn for my frontend package manager. I'm also using Webpack. This application is a monolith Laravel application.

[coffe4u]

My "node_modules" directory is in the root of the project. Nothing special about the set up.

[birkskyum]

@coffe4u , thanks! Then I have an idea what happened here ( see #7146 ) , I'll try to setup a repro of this, to check if the patch makes the difference.

[birkskyum]

@coffe4u , @sunshinesmilelk , could you try to import plotly as "import Plotly from 'plotly.js/dist/plotly.min.js'; ?

[archmoj]

This would be addressed in the upcoming v2.35.2 patch.

[birkskyum]

I can confirm now that these work:

import Plotly from "plotly.js/dist/plotly.min.js";
import Plotly from "plotly.js/dist/plotly.js";

.. in the SolidStart project i tested, the import Plotly from "plotly.js" still hangs, but the .css at least loads properly.

I see this - could explain why it's hanging:

  VITE v5.4.3  ready in 182 ms

  ➜  Local:   http://localhost:3001/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "buffer/"

    node_modules/plotly.js/src/traces/image/helpers.js:5:21:
      5 │ var Buffer = require('buffer/').Buffer;  // note: the trailing slash is important!
        ╵                      ~~~~~~~~~

  You can mark the path "buffer/" as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

12:45:35 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/plotly.js/src/traces/image/helpers.js:5:21: ERROR: Could not resolve "buffer/"

[birkskyum]

I managed now to also run with import Plotly from 'plotly.js'; and const Plotly = require('plotly.js');, and what it took in a super simple vite app was to configure cjs support:

import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  define: {
    global: {}, // <-- it complained about global not being defined
  },
  plugins: [
    commonjs(),  // <-- allow `import from` to act like a require()
 ]
})

So, basically, this .css ticket is resolved, and it's a separate issue which is that plotly is a cjs-only build, and many environments are esm by default, but it's quite easy to config if it's clear what the situation is. It's not a new thing, so shouldn't affect existing users upgrading.

[coffe4u]

@birkskyum thanks for the quick fix on this! I just tested 2.35.2 and it worked as expected for me.