Using plotly.js 3d scatter3d with Webpack on Vue

Question

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?

Answer 1

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