Select Controls are Broken about react-chart-editor

[rreusser]

Thanks for reporting. To confirm, are you in the master branch of react-plotly.js-editor and have you run npm run prepublishOnly in the react-plotly.js-editor directory since pulling the most recent changes? Are there any console errors?

Alternatively, you can edit these lines to switch to direct imports of non-transpiled code which eases the restriction of always having to transpile to ES5.

There may be another issue, but hopefully that's a start.

[rreusser]

Oh, you might also need to do the same (run npm run prepublishOnly) in repo react-plotly.js repo. It's the same story: npm modules should expose ES5 code instead of ES6 + JSX, but the transpiling step is a big pain across repos during development. Apologies for the inconvenience, but I don't immediately see a perfect solution—apart from switching to the direct src/ imports in the lab directory, which bypasses the need to transpile via prepublishOnly in the other directories.

[ereplogle]

I updated all the references because npm run prepublishOnly fails on windows because of the mkdir -p command. I fixed the references in the lab example and now I see this compile error:

Module not found: Error: Can’t resolve ‘react-select’ in ‘/Users/erin/Code/plotly/plotly.js-react-editor/lib/components/widgets’
 @ ../plotly.js-react-editor/lib/components/widgets/Dropdown.js 17:19-42
 @ ../plotly.js-react-editor/lib/components/Dropdown.js
 @ ../plotly.js-react-editor/lib/DefaultEditor.js
 @ ../plotly.js-react-editor/lib/PlotlyEditor.js
 @ ../plotly.js-react-editor/lib/index.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ multi babel-polyfill ./src/index

[ereplogle]

Hang on, I did that last part on my mac to test it out before I saw your message about also running it in the react repo. Let me try that as well

[ereplogle]

ok, so I ran npm run prepublishOnly on my mac in both the react and react-lab repos and still get the error about about not being able to resolve 'react-select'

[ereplogle]

ok, another update. sorry for all the confusion. I did everything again on my mac just to be sure and the lab example is now working. so, it looks like there might be another reference I need to change to get things working in our Alteryx codebase since we can't run npm run prepublishOnly? Or is there something else going on, maybe? I did just notice that I get this error in the console

warning.js:36 Warning: Select is accessing findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.

[rreusser]

Okay, I think I need to just rewrite the scripts as scripts instead of shell commands then.

I'm not sure why react-select wouldn't be present. It's in react-plotly.js-editor's package.json here. Can you try running npm install again too to see if that gets it?

[ereplogle]

yeah, I think rewriting the scripts will be good. The error about not finding react-select only ever happened on my mac where I can run the prepublishOnly script, but I think I had missed an npm install. Everything else had been ok on our Alteryx environment with updating to use direct imports until this most recent update and only throws the following error in the console when I click on the dropdowns

warning.js:36 Warning: Select is accessing findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.

[rreusser]

Hmm. Is there a file/line number on the findDOMNode issue? It looks like maybe JedWatson/react-select#2034 is relevant here, but I'm not sure why I wouldn't be seeing it.

[ereplogle]

It references line 36 of warning.js, oddly

[bpostlethwaite]

closing for now, will reopen if we see this again.