0
votes

I am a beginner in react, relay and graphQL I was able to create a good graphql schema file and implemented relay successfully as well but got stuck with react issue. I am using babel loader in webpack to help me convert jsx into js, but it seems some syntax error which babel cant understand.

here are my dependencies.

"dependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-relay-plugin": "^0.10.0",
"express": "^4.14.0",
"express-graphql": "^0.5.4",
"graphql": "^0.6.2",
"promise": "^7.1.1",
"react": "^15.4.2",
"react-relay": "^0.10.0",
"webpack": "^1.13.1"

}, "devDependencies": { "babel-cli": "^6.18.0", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-polyfill": "^6.9.1", "babel-preset-env": "^1.1.8", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", "webpack": "^1.14.0" }

and here is my app.js file code

export default class Comp1 extends React.Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit.bind(this)}>
    <input type = "text"
        placeholder = "Start Typing"
        value = {this.props.searchTerm}
        onChange = {this.handleChange.bind(this, 'searchTerm')} />
    <input type="submit" value="Submit"/>
            </form>
    );
    }
}

class Comp2 extends React.Component {

    render() {
        return (
            <div>
            {this.props.info.text}
    </div>
    );
    }
}

here is my error

webpack: bundle is now VALID.

express:router dispatching GET / +7s

express:router query : / +3ms

express:router expressInit : / +2ms

express:router webpackDevMiddleware : / +2ms

express:router : / +3ms

express:router webpackDevMiddleware : / +3ms

send stat "D:\index.html" +2ms

serve-index stat "D:\" +2ms

serve-index readdir "D:\" +0ms

express:router serveStatic : / +5ms

finalhandler default 500 +2ms

Error: EPERM: operation not permitted, stat 'D:\System Volume Information' at Error (native)

Please provide your valuable suggestions and help me to sort out this as I have already invested too much time on it.

Kind Regards, Yashpal

1
Can you post your Babel configuration? I assume you either didn't configure Babel at all or you forgot to add the react preset.Felix Kling
Please bear with me I have no clue which configuration file you are asking, could you please specify the name of the file.Yashpal
Where the configuration is mostly depends on how you actually invoke Babe, but typically you'd have a .babelrc file. I suggest to read babeljs.io/docs/setup and babeljs.io/docs/plugins .Felix Kling
still have the issue ??Mayank Shukla
yes issue is still there.:(Yashpal

1 Answers

-1
votes

I guess you have missed the babel configuration in your webpack.config.js file.

module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader?presets[]=es2015&presets[]=react' 
      }
    ]
}