Задать вопрос
IcEWaRRiOr_2002
@IcEWaRRiOr_2002
javascript

Как решить проблему с браузерным 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>

  • Вопрос задан
  • 804 просмотра
Комментировать
Подписаться Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега JavaScript
Babel standalone последней версии через unpkg CDN

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

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!
Ида, при создании класса сам поймал ошибку. Если вам важно создавать именно классы, а не использовать функции и хуки - пишите, разберемся)
Ответ написан
4 комментария
4 комментария
Krasnodar_etc
@Krasnodar_etc
fundraiseup
babel для реакта, вероятно, не получится использовать через скрипт, нужно встраивать в сборку и добавлять туда preset-react
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Модернизация форума на xenforo
18 дек. 2024, в 11:03
5000 руб./за проект
Разработка программы для Windows
18 дек. 2024, в 10:44
130000 руб./за проект
Доработка веб-ПО на rust + vue.js
18 дек. 2024, в 10:02
7000 руб./за проект
Ещё заказы