After following Usage in Readme.md: SCALE_FUNCTIONS[type] is not a function

After following the usage directions in Readme.md (essentially yarn add react-vis, yarn add react-addons-shallow-compare, setting up a few imports and adding the following to a component: )

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <LineSeries
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <XAxis />
  <YAxis />
</XYPlot>

The graph fails to render and I get the console error message Uncaught TypeError: SCALE_FUNCTIONS[type] is not a function. I’m using webpack2, presets for react and es2015… what I thought was a standard setup.

The line that is failing is here: https://github.com/uber/react-vis/blob/d96abc8841c2a6312aa/src/utils/scales-utils.js#L146

If I go into my node_modules directory and add a debugger statement just before it, I can see that my SCALE_FUNCTIONS only has literal defined, and that type is "ordinal".

Has anyone seen this before or have any ideas what this could be? Unfortunately my workplace blocks gist and other services so I can’t easily drop my yarn lock file.

Here’s the stacktrace:

Uncaught TypeError: SCALE_FUNCTIONS[type] is not a function
    at _getScaleFnFromScaleObject (eval at <anonymous> (app.js:1598), <anonymous>:187:36)
    at _adjustCategoricalScale (eval at <anonymous> (app.js:1598), <anonymous>:493:17)
    at getScaleObjectFromProps (eval at <anonymous> (app.js:1598), <anonymous>:531:12)
    at getAttributeScale (eval at <anonymous> (app.js:1598), <anonymous>:543:21)
    at GridLines.render (eval at <anonymous> (app.js:1945), <anonymous>:146:54)
    at eval (eval at <anonymous> (vendor.js:6114), <anonymous>:796:21)
    at measureLifeCyclePerf (eval at <anonymous> (vendor.js:6114), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (vendor.js:6114), <anonymous>:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (vendor.js:6114), <anonymous>:822:32)
    at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (vendor.js:6114), <anonymous>:362:30)

react-vis is version 1.0.1, my react version is 15.4.2, webpack is 2.3.1, babel-core is 6.24. Babel presets are react, es2015 with these plugins:

        ["syntax-dynamic-import"],
        ["transform-decorators-legacy"],
        ["transform-object-rest-spread"],
        ["transform-react-display-name"],
        ["transform-object-assign"],
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]

[vjpr]

Okay found the issue. There is a mismatch between the d3-scale exports and the ones used in scales-util.

export {default as linear} from "./src/linear";

vs.

_d3Scale.scaleLinear

---

So for me it turns out I have 2 versions of d3-scale, and the old one had an older api which was causing the issue.

[mcnuttandrew]

Hey @vjpr,

Can you say more about the mismatch you found? I’m not sure I get it? Also, this is a long shot (🤞) but this issue might have been resolved by #567