You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
@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.
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/"
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:
importcommonjsfrom'vite-plugin-commonjs';exportdefaultdefineConfig({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.
Activity
archmoj commentedon Sep 10, 2024
@birkskyum Would you please have a look at this?
archmoj commentedon Sep 10, 2024
@sunshinesmilelk Would you please explain how you loaded plotly.js?
coffe4u commentedon Sep 10, 2024
When attempting to upgrade from 2.35.0 to 2.35.1, I also experience this issue.
coffe4u commentedon Sep 10, 2024
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 commentedon Sep 10, 2024
@coffe4u , what package manager do you use, and do you have a workspace/monorepo setup?
coffe4u commentedon Sep 10, 2024
I use
yarnfor my frontend package manager. I'm also using Webpack. This application is a monolith Laravel application.coffe4u commentedon Sep 10, 2024
My "node_modules" directory is in the root of the project. Nothing special about the set up.
birkskyum commentedon Sep 10, 2024
@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 commentedon Sep 10, 2024
@coffe4u , @sunshinesmilelk , could you try to import plotly as "import Plotly from 'plotly.js/dist/plotly.min.js'; ?
archmoj commentedon Sep 10, 2024
This would be addressed in the upcoming
v2.35.2patch.birkskyum commentedon Sep 10, 2024
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:
birkskyum commentedon Sep 10, 2024
I managed now to also run with
import Plotly from 'plotly.js';andconst Plotly = require('plotly.js');, and what it took in a super simple vite app was to configure cjs support: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 commentedon Sep 11, 2024
@birkskyum thanks for the quick fix on this! I just tested 2.35.2 and it worked as expected for me.