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

Question

Al Sm @radio_mus

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

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

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

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

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

Подписаться 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 все заработало. Спасибо большое!

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

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

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 18 часов назад
- 71 просмотр
2

ответа
React

Простой
Почему не рендерится React-компонент в методе render( )?
- 1 подписчик
- 19 часов назад
- 73 просмотра
1

ответ
PhpStorm

Простой
Не работают горячие клавиши PHPStorm Client в Remote Development?
- 1 подписчик
- 19 часов назад
- 35 просмотров
0

ответов
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- вчера
- 57 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Сдвигается нижняя граница во время поиска Как исправить?
- 1 подписчик
- 16 апр.
- 47 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- 15 апр.
- 84 просмотра
2

ответа
React

Простой
В какую папку React компилирует все файлы?
- 1 подписчик
- 13 апр.
- 82 просмотра
2

ответа
React

+1 ещё

Средний
При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?
- 2 подписчика
- 13 апр.
- 317 просмотров
1

ответ
React

+1 ещё

Простой
Ошибка Cannot read properties of null (reading 'useContext')?
- 1 подписчик
- 13 апр.
- 40 просмотров
0

ответов
React

Простой
Почему при клике на навигацию не меняется id?
- 1 подписчик
- 13 апр.
- 41 просмотр
1

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

Frontend React

Glob-com

от 100 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Доработать вебпроект со стеком: yii2, jquery, vue

19 апр. 2024, в 13:06

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

Правки и доработки CRM системы PHP, JS, Smarty,

19 апр. 2024, в 13:03

1500 руб./в час

Доработка сайта на Yii 2.0

19 апр. 2024, в 13:00

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

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?

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

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

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