Reactjs console errors: 'Components object is deprectated' & 'ReferenceError: require is not defined'

问题

I'm trying to use jsx with classes create a simple hello world program to print 'Hello world' in my browser(firefox). I can get a single page [html with embedded jsx][1] to work. But not when I try to use classes.

I am receiving the following in my console output

Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4

The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]

    <anonymous> file:///Users/Jacob/temp/index.html:5 
    run https://unpkg.com/babel-standalone@6.26.0/babel.js:61531 
    check https://unpkg.com/babel-standalone@6.26.0/babel.js:61597 
    loadScripts https://unpkg.com/babel-standalone@6.26.0/babel.js:61624
    onreadystatechange https://unpkg.com/babel-standalone@6.26.0/babel.js:61549

jsx/index.jsx

import React from 'react';
import ReactDOM  from 'react-dom';

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
            <!--
            <script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
            -->
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel' src='jsx/index.js'></script>

    </body>
</html>

回答1:

A quick fix in firefox for your problem would be to change your jsx/index.jsx to

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

i.e remove 'import'

Go through this for babel usage with babel-standalone.

As you are using babel-standalone it would be best if you change your code to

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
            <!--
            <script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
            -->
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel'>
          class NavBar extends React.Component {  
             render() {
              return (
                    <div>
                        Hello world
                    </div>
                 );
             }
          }

          ReactDOM.render(<NavBar />, document.querySelector('#root'))
        </script>

    </body>
</html>

来源：https://stackoverflow.com/questions/55045824/reactjs-console-errors-components-object-is-deprectated-referenceerror-re

标签

javascript

reactjs

web

jsx

babel