CODEWITHSUNDEEP
node.jsreactjsbabeljsbrowserify
Sir Robert
Sir Robert

Reputation: 4976

New to React / Babelify; How to fix "Accessing PropTypes" warning

I'm new to both React and Babelify.

I'm using Node to compile a web app. Right now I'm doing this:

browserify({debug: true})
.transform(
  babelify.configure({
    comments : false,
    presets  : [ 
      "react",
      "babili",
    ],  
  })  
)   
.require('./app.js', {entry: true})
.plugin(collapse)
.bundle()
.on("error", function (err) {
  console.log("Error:", err.message);
})  
.pipe(fs.createWriteStream(destination));

My app is a VERY trivial "Hello, World!" proof-of-concept at the moment that's about this complex:

class Renderer {
  render () {
    ReactDOM.render(
      <div>Hello, World!</div>
      document.querySelector("#react-app")
    );  
  }
}
module.exports = Renderer;

I'm getting this warning:

Warning: Accessing PropTypes via the main React package is deprecated, and 
will be removed in  React v16.0. Use the latest available v15.* prop-types
package from npm instead. For info on usage, compatibility, migration and more,
see https:/gfb.me/prop-types-docs

Warning: Accessing createClass via the main React package is deprecated, 
and will be removed in React v16.0. Use a plain JavaScript class instead. If
you're not yet ready to migrate, create-react-class v15.* is available on npm
as a temporary, drop-in replacement. For more info see
https:/gfb.me/react-create-class

Error: [BABEL] /home/gweb/code/app.js: Unknown option: 
/home/gweb/code/node_modules/react/react.js.Children. Check out
http:/gbabeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options 
object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see 
http:/gbabeljs.io/docs/plugins/#pluginpresets-options. (While processing
preset: "/home/gweb/code/node_modules/react/react.js") while parsing file:
/home/gweb/code/app.js

I read the recommended stuff, but I'm new enough to both that I can't quite get a handle on it. I also read a bunch of other articles and SO posts, but none of them (that I could find) had this set (browserify, babelify, react).

My goal at the moment is just to get it transpiling with support for the React syntax (which is JSX, from what I understand?), so I can start playing with it and learning both libraries. What's the fastest way to get this implemented (I don't necessarily need most efficient or best; I'd rather have the easiest-to-understand incantation at this stage, so I can have things transparent while I learn).

Upvotes: 1

Views: 2007

Answers (2)

Tamlyn
Tamlyn

Reputation: 23582

Do you have an import of the form import * as React from 'react'?

If so, try replacing it with import React from 'react'.

The * imports everything from react, including the deprecated exports, and that's what triggers the warnings.

Upvotes: 2

bhaskar sharma
bhaskar sharma

Reputation: 96

It is not your setup issue but problem is with your import statements, i'm assuming you are importing react and PropTypes from react

import React, { PropTypes } from 'react';

So, using PropTypes from react library has been deprecated as mentioned in warning and you need to install PropTypes as a standalone library from npm and use that instead.

npm install prop-types --save and then do,

import PropTypes from 'prop-types', for more info https://www.npmjs.com/package/prop-types

this will resolve your first warning, also for second warning you need to install and use https://www.npmjs.com/package/create-react-class.

for the babel error please check if you have both required libraries installed. https://www.npmjs.com/package/babel-preset-react, https://www.npmjs.com/package/babel-preset-babili

Upvotes: 6

Related Questions