Using plotly.js 3d scatter3d with Webpack on Vue

Viewed 1459

I'm trying to run plotly.js with webpack and Vue.js

for simple plot like scatter it's working fine with the following configuration:

on webpack.config.js

loaders: [
        {
            test: /node_modules/,
            loader: 'ify-loader'
        },

    ],

and in the vue file I import with the following code:

var Plotly = require('plotly.js/lib/core');
Plotly.register([
    require('plotly.js/lib/scatter'),
    require('plotly.js/lib/scatter3d'),
]);

with scatter everything works fine, but when I try to use:

type: 'scatter3d',

I receive the following error:

It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform:

So by my understanding, I need to make ify-loader process my file projects besides the node_modules.

I already tried to insert the transform on my project as recommend on the GitHub readme Link for the docs but neither test works (with .js and .vue) :

With .js

    loaders: [
         {
            test: /\.js$/,
            loader: 'ify-loader',
            enforce: 'post'
        }
     ]

With .vue

loaders: [
         {
            test: /\.vue$/,
            loader: 'ify-loader',
            enforce: 'post'
        }
     ]

Any tips, or clue how to proceed?

2 Answers
import Plotly from 'plotly.js/dist/plotly.min'

Maybe Using require('plotly.js-dist') (not import) solves the problem.

Related