Import react-dropdown-browser (d3 + React)

Community Help
1

Hi community,

I’m trying to reproduce some examples of this course: https://www.youtube.com/playlist?list=PL9yYRbwpkykuK6LSMLH3bAaPpXaDUXcLV (Datavis 2020) in Observable.

I’d successed in most examples, but in a specific video a need a ReactDropdown component, but I can’t import it.

I use a require command like follow:

ReactDropdown = require('https://unpkg.com/react-dropdown-browser@1.8.0/dist/umd.min.js')

But I get this error:

ReactDropdown = TypeError: n is undefined

Then, I tried use instructions available in Module require debugger / Observable / Observable and used the follow import instructions:

ReactDropdown = require('react-dropdown-browser@1.8.0/dist/index.js').catch(() => window["_createClass"])

But doesn’t worked too.

I’m new in the d3 and react ecosystem, then I think I have make some newbie mistakes, but I’ve search for solutions without success.

Thanks in advance for the help.

Adolfo

1 Like
2

I’m no React expert, but perhaps this will help:

This indicates that you should try something along the following lines:

r = require.alias({
  react: "react/umd/react.production.min.js",
  "react-dropdown": "react-dropdown-browser@1.8.0/dist/umd.js"
})

Then you refer to react via r('react') and similarly for react-dropdown. I guess this makes sense, as react-dropdown appears to be a package built on top of React. Thus, the problem was that _react itself is not defined.

1 Like