IcEWaRRiOr_2002
@IcEWaRRiOr_2002
Начинающий веб-разработчик. Учусь фронтенду.

Как решить проблему с браузерным Babel?

Здравствуйте, проблема с подключением браузерного Babel standalone последней версии через unpkg CDN. Проблема такая: когда я в VSCode пытаюсь подключить Babel к javascript файлу через <script type="text/babel src="app.js"> то у меня появляется такая ошибка:
Access to XMLHttpRequest at 'file:///work/.../app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

GET file:///work/.../app.js net::ERR_FAILED
Однако если я не указываю src, то никакой ошибки не появляется. Как можно исправить эту ошибку?

(P.S: Полный html с подключёнными babel и script):
Полный html с подключёнными babel и script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
   <script type="text/babel" src="app.js"></script>
</body>
</html>

  • Вопрос задан
  • 279 просмотров
Решения вопроса 1
IcEWaRRiOr_2002
@IcEWaRRiOr_2002 Автор вопроса
Начинающий веб-разработчик. Учусь фронтенду.
Проблема решена - я переименовал .js в .jsx - и всё заработало
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега JavaScript
Babel standalone последней версии через unpkg CDN

Тут закралась ошибка. standalone существует только для того, чтоб просто потыкать и не более. Для продакшена это не годится.
Ответ написан
@Kentavr16
Итак, привожу как и обещал пример работающего кода привет мир

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<body>
    <div id="hello"></div>
    <script src="script.js" type="text/babel"></script>

</body>
</html>


js
const hello = (
    <div>hello world</div>
)
const domContainer = document.querySelector('#hello');
ReactDOM.render(hello, domContainer);


Дальше - знакомьтесь с документацией. Happy hacking!
Ида, при создании класса сам поймал ошибку. Если вам важно создавать именно классы, а не использовать функции и хуки - пишите, разберемся)
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
babel для реакта, вероятно, не получится использовать через скрипт, нужно встраивать в сборку и добавлять туда preset-react
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы