react is not defined

[jinrongzhang]

when using react-dc for my project,i meet some errors:react is not defined ,i find error from react-dc.js in this line:module.exports = react;

[WaldoJeffers]

Hello @jinrongzhang, thank you for using this library and reporting an issue. The error is probably because you have to install react (run npm install --save react in a terminal) alongside this library.

React is declared as a peer dependency in the package.json file, and you should probably get warnings from npm when installing this library or running npm ls in the terminal. The reasoning behind this is that you are probably already using React for you project, and bundling React inside this library would result in having two versions of React inside your final bundle.

Let me know if that solves the issue for you, and I'll update the README.

[emilroz]

I see the same issue.

react-dc.js:73 Uncaught ReferenceError: react is not defined
    at Object.defineProperty.value (react-dc.js:73)
    at __webpack_require__ (react-dc.js:20)
    at Object.defineProperty.value (react-dc.js:670)
    at __webpack_require__ (react-dc.js:20)
    at Object.<anonymous> (react-dc.js:1433)
    at __webpack_require__ (react-dc.js:20)
    at module.exports (react-dc.js:66)
    at Object.<anonymous> (react-dc.js:69)
    at __webpack_require__ (bootstrap a350bd2…:555)
    at fn (bootstrap a350bd2…:86)

$ cat package.json 
  "dependencies": {
    "bootstrap": "^3.3.7",
    "crossfilter": "^1.3.12",
    "d3": "^4.7.0",
    "dc": "^2.1.3",
    "font-awesome": "^4.7.0",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dc": "^1.0.2",
    "react-dom": "^15.4.2",
    "react-fontawesome": "^1.5.0",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1",
    "redux-thunk": "^2.2.0"
  },

[WaldoJeffers]

@emilroz thanks for reporting this issue. I'm investigating it. Do you use a module bundler such as Webpack ? How do you import react-dc ? I'm asking this because I'm providing two versions of this library: an ES5 bundle, and an ES6 module version.

[emilroz]

@WaldoJeffers, I've setup it up with create-react-app so it definitely uses Webpack, Babel, ESLint and others. react-dc installed using npm install react-dc in code use:

import { BarChart } from 'react-dc'

and it fails on the import statement.

[WaldoJeffers]

@jinrongzhang @emilroz I published a patch today (v1.0.3). Should fix this issue. Can you confirm it ?

[emilroz]

@WaldoJeffers we're almost there :)

Failed to compile.

Error in ./~/react-dc/dist/react-dc.js
Module not found: [CaseSensitivePathsPlugin] `/path_to_project/node_modules/React/react.js` does not match the corresponding path on disk `react`.

 @ ./~/react-dc/dist/react-dc.js 3:27-43

I've fixed it (at least I think so) here: https://github.com/WaldoJeffers/react-dc/pull/2

[WaldoJeffers]

@emilroz Thanks for your PR! I recently changed externals: { react: 'react'} to externals: {react: 'React'} because when including React via regular script tags (and no module bundler), the library is exposed as a global variable named React. So your solution wouldn't work in this case. But it all depends on which module context you're in (amd, umd, commonjs). I think the proper config is:

externals: {
  "react": {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  }
}

I found this solution on this issue on StackOverflow and on Webpack's documentation. So I am going to reject your PR (sorry!), and publish a patch with this config. Would that be ok ?

[emilroz]

@WaldoJeffers sure, go for it. I wasn't aware it would brake something else :)

[WaldoJeffers]

@emilroz Just published v1.0.4 with the fix we discussed. Please tell me it's working for you, and I won't be elected worst library maintainer of 2017.

[emilroz]

All looks great now, thanks @WaldoJeffers.

[WaldoJeffers]

@emilroz Awesome! Closing this issue now, but I'm sure there will be other bugs. I'll also add a roadmap to the README.