Импорт реакции приводит к сбою в разрешении спецификатора модуля "react"

#reactjs

Вопрос:

Назовите меня глупым (и я не буду принимать это на свой счет), но я не использовал REACT более 3 лет, и мои клетки мозга, должно быть, умерли.

Я получаю сообщение об ошибке:

 localhost/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

Я уверен, что это связано с тем, как я использую импорт в Chrome.

index.html

 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <title>React App</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="Main.js"></script>
</body>

</html>

Main.jsx

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


ReactDOM.render(
    <App />, 
    document.getElementById("root")
);

Main.js

(после командной строки babel с предустановкой react)

 import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

App.jsx (находится в той же папке, что и Main.jsx (и babel создает App.js в той же папке, что и Main.js )

 import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
            </div>
        );
    }
}

export default App;

1. Может быть связано с этим: github.com/facebook/react/issues/14635

2. @codecubed. io это выглядит так, но тогда импорт cjs также не работает, так что мне делать?

3. Есть ли у вас причина: react.development.js вместо react.js ?

4. Как я уже сказал, я не использовал REACT в течение трех лет. Первый пример, который я увидел, использовал development, который, как я предполагал, даст мне лучшую отладку.

5. Я удалил type=»module», и теперь они загружаются, ошибка теперь другая.

Ответ №1:

Поскольку вы не используете модульный пакет, такой как Webpack, вы можете отказаться от операторов импорта react (он уже должен быть доступен глобально с помощью импорта на основе тегов, который у вас есть выше), преобразовать ваш App импорт либо в абсолютный ( '/' ), либо в относительные пути ( './' , '../' ) и включить расширение файла. Для поддержки старых браузеров, несовместимых с модулями ES6, импортируйте его вместо этого с тегом script или переместите весь код в один файл.

1. есть ли какие-либо недостатки в том, чтобы всегда использовать теги? кажется, что все намного проще и меньше движущихся частей…

2. Недостатком является многократный сетевой запрос ресурсов. Преимущество таких пакетов, как webpack, заключается в том, что они объединяют все ваши ресурсы, чтобы сократить количество циклов. Обычно также обеспечивает более строгую типизацию и лучшее завершение кода.

Ответ №2:

Когда вы загружаете скрипт React с использованием тега, как в вашем примере, объекты React и ReactDOM уже доступны для вас.

Чтобы использовать компоненты и функции Reacts, вы просто используете их сразу без каких-либо вызовов импорта. Все, что вам нужно сделать, это добавить к вашему использованию «React». т.е.

 React.Component
React.useState

и так далее.