Ошибки консоли Reactjs: «Компоненты объекта удалены» и «ReferenceError: require is notfined» - PullRequest
Новая
       19

Ошибки консоли Reactjs: «Компоненты объекта удалены» и «ReferenceError: require is notfined»

0 голосов
/ 07 марта 2019

Я пытаюсь использовать jsx с классами, создаю простую программу hello world для печати «Hello world» в моем браузере (firefox).Я могу заставить работать одну страницу [html со встроенным jsx] [1].Но не тогда, когда я пытаюсь использовать классы.

Я получаю следующее в своем выводе консоли 

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 Ответ

1 голос
/ 07 марта 2019

Быстрое решение проблемы с Firefox - изменить jsx / index.jsx на 

class NavBar extends React.Component {

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

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

, то есть удалить 'import'

Пройдите this для использования babel с babel-standalone.

Поскольку вы используете babel-standalone, было бы лучше, если вы измените свой код на 

<!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>
...