Как исправить приложение React из за переключения jsx в phpStorm?

Question

Al Sm @radio_mus

Как исправить приложение React из за переключения jsx в phpStorm?

Здравствуйте. Друзья, только начинаю изучать ReactJS, в Laravel 5.5 (работаю в phpStorm). В редакторе код js файлов, как то странно отображались (все было подчеркнуто волнистыми красными линиями, пробелы сплошными линиями) и это визуально мешало. Позже увидел, что phpStorm предлагает переключить в JSX. После нажатия, надпись исчезла, код в редакторе стал нормальным (исчезли все подчеркивания), но и после этого страницы перестали отображаться.

Что я такое переключил, как вернуть обратно?
Заранее спасибо большое за помощь!

Вопрос задан более трёх лет назад
280 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

2 комментария

Al Sm @radio_mus Автор вопроса

поменял, но страницы все равно не отображаются. исходный код показывает:

<!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">
    <title>Laravel</title>
    <link href="http://lareact.js/public/css/app.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="example"></div>
    <script src="http://lareact.js/public/js/app.js" ></script>
</body>
</html>

а внутри lareact.js/public/js/app.js:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 88);
/******/ })
/************************************************************************/
/******/ ({

/***/ 218:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 88:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(89);
module.exports = __webpack_require__(218);


/***/ }),

/***/ 89:
/***/ (function(module, __webpack_exports__) {

"use strict";
throw new Error("Module build failed: SyntaxError: C:/OpenServer/domains/lareact.js/resources/assets/js/app.js: Unterminated JSX contents (13:13)\n\n\u001b[0m \u001b[90m 11 | \u001b[39m    \u001b[33m<\u001b[39m\u001b[33mRoute\u001b[39m path\u001b[33m=\u001b[39m\u001b[32m\"/\"\u001b[39m component\u001b[33m=\u001b[39m{\u001b[33mMaster\u001b[39m} \u001b[33m>\u001b[39m\n \u001b[90m 12 | \u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 13 | \u001b[39m    \u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33mRouter\u001b[39m\u001b[33m>\u001b[39m\u001b[33m,\u001b[39m\n \u001b[90m    | \u001b[39m             \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 14 | \u001b[39m    document\u001b[33m.\u001b[39mgetElementById(\u001b[32m'example'\u001b[39m))\u001b[33m;\u001b[39m\u001b[0m\n");

/***/ })

/******/ });

такое ощущение что он перекодировал в jsx и не поменял.

Написано более трёх лет назад

Al Sm @radio_mus Автор вопроса

После ввода команды npm install && npm run dev все заработало. Спасибо большое!

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

React

Простой
404 ошибка при запуске vite?
- 1 подписчик
- 19 часов назад
- 55 просмотров
1

ответ
React

Средний
Как перенести элемент на наверх по DOM дереву с сохранением его текущей позиции?
- 1 подписчик
- 22 нояб.
- 63 просмотра
0

ответов
React

Простой
Как запустить старый проект?
- 1 подписчик
- 22 нояб.
- 53 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
PhpStorm

Средний
Как отключить MSO в PHPStorm?
- 3 подписчика
- 22 нояб.
- 1337 просмотров
2

ответа
React

Простой
Zod: Валидация select?
- 1 подписчик
- 21 нояб.
- 55 просмотров
0

ответов
PhpStorm

Простой
Как показать мое сообщение при старте PHP Storm?
- 1 подписчик
- 21 нояб.
- 68 просмотров
0

ответов
Docker

+2 ещё

Средний
Почему не могу подключиться к Clickhouse из интерфейса PHPStorm?
- 1 подписчик
- 21 нояб.
- 57 просмотров
1

ответ
React

Простой
Как, используя i18next-extract, разделять файлы переводов постранично?
- 1 подписчик
- 20 нояб.
- 22 просмотра
0

ответов
React

Простой
Почему данные не подгружаются в форму?
- 2 подписчика
- 18 нояб.
- 79 просмотров
3

ответа
Показать ещё Загружается…

Ведущий React Native разработчик

Студия 15

от 200 000 до 250 000 ₽

React Native Developer

Wanted. • Санкт-Петербург

До 300 000 ₽

React Native developer (+Node.js)

CTRL+ • Москва

от 250 000 до 320 000 ₽

Разработать нативное мобильное приложение на Swift и Kotlin

24 нояб. 2024, в 22:14

250000 руб./за проект

Маркетплейс в МЕДИЦИНСКОЙ тематике

24 нояб. 2024, в 21:55

200000 руб./за проект

Нужно подобие hamster combat

24 нояб. 2024, в 21:41

1000 руб./за проект

Answer 1 · 2017-10-23 16:35:24

что бы не подчеркивало иногда меняю тут, клик правой кнопкой joxi.ru/823jJg8uJdEajm потом joxi.ru/MAjMNReu4qV1e2
а по поводу jsx нажмите Ctrl+Alt+S и поищите javascript joxi.ru/823jJg8uJdEzjm. Это то что вы переключили, даже проверил у себя.

Как исправить приложение React из за переключения jsx в phpStorm?

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

Минуточку внимания

Войдите на сайт