How to initiate and build a Plotly.js project using Vite?

plotly.js
1

How to build plotly.js project uisng WebPack is explained in the getting started in javascript.

Has anyone tried to initiate and build a plotly.js project using Vite?

2

I have been trying all day with no luck. Would love to know if someone has figured this out but currently seems like we’re going to have to switch back to Vue CLI

3

Make sure you install npm i --save plotly.js-dist-min and npm i @types/plotly.js. That did the trick for me.

I was running into
Vite Error, /node_modules/.vite/deps/plotly_js.js?v=f9a89de6 optimized info should be defined
and
[ERROR] Could not resolve "buffer/"

1 Like
4

Hi @oat

I was getting similar issues to @rrossmiller … problems with ‘buffer/’ and then ‘stream’

Problems seem to stem from Plotly using node libraries and Vite refusing to include node globals because reasons… this worked for me

  1. install buffer and stream-browserify
"buffer": "^6.0.3",
"stream-browserify": "^3.0.0",
  1. Modify vite.config.js to correctly kludge stream and ‘global’…
import { defineConfig } from 'vite';
...etc

export default defineConfig({
  resolve: {
    alias: {
      ...etc
      stream: 'stream-browserify'
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      }
    }
  }
},
.....etc

);

Hope this helps.