esbullington / react-d3

Modular React charts made with d3.js
https://reactiva.github.io/react-d3-website/
MIT License
1.75k stars 179 forks source link

latest version #321

Closed RahavLussato closed 8 years ago

RahavLussato commented 8 years ago

when i tried to install the package from master branch i got "Module parse failed" errors, so how i can get the latest changes (include tooltips) ? when i do npm install react-d3 i get 0.4.0 version.

yang-wei commented 8 years ago

npm install https://github.com/esbullington/react-d3

RahavLussato commented 8 years ago

i still get errors with this version: "Module parse failed: .../node_modules/react-d3/src/barchart/BarChart.jsx Unexpected token (107:6) You may need an appropriate loader to handle this file type."

johnsoftek commented 8 years ago

@RahavLussato You will need to compile the react-d3 jsx files to js. If you are using a transpiler, you are probably excluding node_modules from transpilation.

Simple fix: include node_modules in the transpiler toolchain. The build will take longer. You may be able to refine the build to include node_modules/react-d3 while excluding the rest of node_modules.

RahavLussato commented 8 years ago

@johnsoftek thanks

davidascher commented 8 years ago

I'm running into a similar issue trying to use https://github.com/esbullington/react-d3 from a project laid out like https://github.com/gaearon/react-hot-loader.

I don't understand how to configure webpack/babel to deal with the jsx transpiling, and so on start of the server, I get:

ERROR in ./~/react-d3/src/barchart/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./BarChart in /Users/dascher1/src/react-hot-boilerplate/node_modules/react-d3/src/barchart
 @ ./~/react-d3/src/barchart/index.js 5:19-40

ERROR in ./~/react-d3/src/linechart/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./LineChart in /Users/dascher1/src/react-hot-boilerplate/node_modules/react-d3/src/linechart
 @ ./~/react-d3/src/linechart/index.js 5:20-42

and the like.

Which makes sense, as the default .babelrc config in that repo doesn't do JSX, but just adding babel-plugin-transform-react-jsx to the .babelrc and npm installing it doesn't fix it.

Any advice?

RahavLussato commented 8 years ago

@davidascher i ended up with download the package and put it inside "lib" library that will be included to babel-loader.

yang-wei commented 8 years ago

Hi thanks for the issue. I decided to maintain this at my own repo since I don't have permission to update package on npm.

Now you can get the latest version (0.5.2) via

npm install rd3

Here is the repo -> https://github.com/yang-wei/rd3

Later I will update the README on this repository to let folks know maintained repository.

johnsoftek commented 8 years ago

If anyone is still interested in installing from GitHub...

My webpack config: (note that I have removed node_modules from module.loaders.exclude

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  resolve: {
    root: path.join(__dirname, 'src'),
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(bower_components)/,
        loaders: ['babel']
      }
    ],
    plugins: [
      new webpack.DefinePlugin({
        'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
      })
    ]
  }
}

.babelrc

  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "build": "NODE_ENV=production node node_modules/.bin/webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.6.1",
    "immutable": "^3.7.6",
    "moment": "^2.12.0",
    "react": "^0.14.7",
    "react-d3": "git+https://github.com/esbullington/react-d3.git",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.1",
    "redux": "^3.3.1",
    "redux-thunk": "^1.0.3",
    "reselect": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-register": "^6.6.5",
    "express": "^4.13.4",
    "faucet": "0.0.1",
    "flow-bin": "^0.22.1",
    "tape": "^4.4.0",
    "webpack": "^1.12.14",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.9.1"
  }
}
yang-wei commented 8 years ago

@johnsoftek I publish the latest version which will fix this problem at rd3.

Feel free to npm install rd3 and you can remove those hack for faster webpack build =)