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 ify-loader@1.0.4 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 webpack@1.15.0 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"
      },