tr.on is not a function and failed Plotly.js webpack builds

[aferriss]

I tried the examples in the readme but ended up with a number of errors from webpack. Notably, webpack wants the '-loader' extension on ify, and it complains about there not being any postLoaders in the api.

This silences those two at least, but then it fails to build on line 64 of index.js with
tr.on is not a function....

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

[hughsk]

Hey @aferriss! The examples are indeed out of date for webpack@2. I ran a quick test locally and found that updating them to match webpack's new configuration schema corrected the issue in my case. Have updated the README accordingly.

Do you have any more information about the transforms and libraries that you're using?

It might also be worth trying the just-published [email protected] which fixes #6, in case you're running into the same bug :)

[aferriss]

Thanks @hughsk ! I was trying to use it to load shaders and do a glslify transform. I just noticed this post, though so I'll give it another go.

[pfgherardini]

I am having the same issue with
tr.on is not a function

I am trying to use ify-loader to bundle plotly.js. Any idea as to what may be causing this?

[hughsk]

@pfgherardini if you share the relevant parts of your webpack config I may be able to triage in a bit :)

[pfgherardini]

Thanks!

My webpack config looks like this

module.exports = {
    entry: "./app/index.tsx",
    output: {
        path: "./dist",
        filename: "bundle.js",
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    node: {
        fs: "empty",
        net: "empty",
        tls: "empty"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /(node_modules)/
            },
            {
                test: /node_modules/,
                loader: 'ify-loader',
                enforce: 'post'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                include: /flexboxgrid/
            },
            {
                enforce: 'pre',
                test: /\.js?$/,
                loader: 'source-map-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
    },
    target: "electron"
};

I have installed plotly.js via a standard

npm install --save plotly.js

and I am trying to require it in my code with

let Plotly = require("plotly.js")

The error I am getting is

C:\Users\fgherardini\Projects\IMC\imc-viewer-js\node_modules\ify-loader\index.js:64
          tr.on('file', function (file) {
             ^

TypeError: tr.on is not a function

[dwhood]

@hughsk I'm getting roughly the same error as @pfgherardini
Building typescript project for react in the web browser...

Here's my webpack config file (rules only method for applying module rules):

function getRules ()
{
    const rules = [
        // all output '.js' files will have any sourcemaps pre-processed by 'source-map-loader'.
        {
            enforce: 'pre',
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "source-map-loader",
        },
        // all files with a '.ts' or '.tsx' extension will be checked with tslint.
        {
            enforce: 'pre',
            test: /\.tsx?$/,
            exclude: /node_modules/,
            loader: 'tslint-loader',
        },
        // all files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
            test: /\.tsx?$/,
            exclude: /node_modules/,

            //loaders: ["ts-loader"]
            // note: made the following change when moving to double transpiling
            // loaders: ["babel-loader", "ts-loader"]
            // note: made the following change from ts-loader to awesome-typescript-loader
            loaders: ["babel-loader", "awesome-typescript-loader"],
        },
        // browserify transforms
        {
            test: /node_modules/,
            loader: 'ify-loader'
        },
        // browserify transforms
        {
            enforce: 'post',
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'ify-loader'
        },
        { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader' },
        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
        { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
        { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
        { test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
        // { test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }
        { test: /(\.css)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader'] }
    ];

    return rules;
}

When running 'webpack' from the command line to transpile code, I get the following error:

C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\map-limit\node_modules\once\once.js:17
    return f.value = fn.apply(this, arguments)
                        ^
TypeError: tr.on is not a function
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\ify-loader\index.js:64:14
    at Array.forEach (native)
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\ify-loader\index.js:63:20
    at f (C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\map-limit\node_modules\once\once.js:17:25)
    at flush (C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\map-limit\index.js:27:14)
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\map-limit\index.js:51:7
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\ify-loader\index.js:58:11
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\resolve\lib\async.js:43:21
    at ondir (C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\resolve\lib\async.js:191:27)
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\resolve\lib\async.js:158:39
    at onex (C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\resolve\lib\async.js:101:22)
    at C:\Projects\hms.rd.asp\hms.rd.react\App\node_modules\resolve\lib\async.js:25:18
    at FSReqWrap.oncomplete (fs.js:123:15)

[jhnsnc]

I was experiencing the same errors given above.

I submitted a PR to show a temporary fix that has unblocked my local development, but I would like someone more knowledgeable to help identify the best long-term solution.

[nackjicholson]

I am having the same problem. Also trying to bundle Plotly.js with webpack2. I was using webpack1 with plotly.js without any browserify or ify-loader and everything was working fine. Upgrading to webpack2 has lead me eventually to this issue.

[JanCarloAditazz]

Just wondering if there have been any progress in this? I am having the same issue as well. Did anyone find a workaround?

[Akkusativobjekt]

If you only want to use plotly.js, then there are other ways to include it into a project (e.g. via index.html with the minified version).
If you have to use the ify-loader, then there are only two options: Fix it yourself or wait for somebody to fix it. Maybe there is some fork or other repo which solves this/the problem, but I haven't tried, because I only needed to include plotly.js.

[nackjicholson]

Indeed. I ended up just pulling plotly from their CDN using a <script> tag in my index.html

[jancarloviray]

We apparently need to this to work with https://github.com/stackgl/glslify.

Tried the forked version from PR but not working :/

Trying alternatives like webpack's transform-loader, but that is a bit too much..

[SillyLily0]

import * as Plotly from 'plotly.js/lib/index-gl2d.js';
I am using [email protected] but I too get this error when importing plotly.js. Any news?

\node_modules\ify-loader\index.js:64
tr.on('file', function (file) {

[fidoogle]

https://plot.ly/javascript/modularizing-monolithic-javascript-projects/
I imported like this:

import * as plotlyCore from "plotly.js/lib/core";
import * as plotlyBar from "plotly.js/lib/bar";
const customPlotly = plotlyCore.register(plotlyBar);

I also had to remove these lines from my webpack.config

      {
        enforce: "post",
        test: /\.js$/,
        loader: "ify-loader"
      },

[SillyLily0]

I need the ify-loader because I use WebGL parts of plotly.js. @fidoogle Your imports work because you do not need glslify!

from https://github.com/plotly/plotly.js/

Browserify transforms are required to build plotly.js, namely, glslify to transform WebGL shaders and cwise to compile component-wise array operations. To make the trace module system work with Webpack, you will need to install ify-loader and add it to your webpack.config.json for your build to correctly bundle plotly.js files.

[fxlemire]

Any updates on this? I am also experiencing the same issues and need to pull Plotly from the CDN.

[bpostlethwaite]

Hi All. Plotly is looking for someone to fix this for us. Our team is flat-out busy on other things. Compensation should not be an issue and we can work that out off issue. If you know someone who is up for the task email me at [email protected] .

I am starting the search now and will update this issue once we have started. My plan is to get this solved ASAP.

[bpostlethwaite]

I have renamed the issue to more closely reflect the issues folks are seeing.

[rreusser]

Here's a repo that reproduces the issue somewhat more minimally:

https://github.com/rreusser/glslify-webpack

[rreusser]

Possibly related? glslify/glslify#74 (comment)

[bpostlethwaite]

Fix on the way. Likely to land on in a couple days #9

[rreusser]

To recap from #9: The issue is that glslify requires opts._flags to be truthy in order for it to function as a transform. You might simply be able to specify browserify -t [ glslify --_flags=plz ] (I haven't tried this, but I think it's how you'd satisfy that conditional). Otherwise I've submitted the PR that applies this automatically in ify-loader.

With that change, Plotly, for one, seems to webpack just fine (for the people who've tried it so far).

[bpostlethwaite]

closed by #9

[bpostlethwaite]

Published as v1.1.0
https://www.npmjs.com/package/ify-loader

[rreusser]

Now that the fix has been published, I've turned my issue-reproduction repo into a howto repo: https://github.com/rreusser/plotly-webpack