styled-components - поддержка IE11 - недопустимые символы

Question

Я использую styled-components в своем приложении React. Я использую его так:

import React, { Component } from "react";
import styled  from 'styled-components';
 
const CheckboxContainer = styled.div`
  display: inline-block;
  vertical-align: middle;
  margin-right:5px;
`

Это отлично работает во всех современных браузерах. Как я видел на caniuse.com, знак апострофа (`) не поддерживается в IE11.

Выдает ошибку, когда я открываю приложение в IE11:

введите описание изображения здесь

, что означает

SCRIPT1014: Invalid character

Я знаю, что есть возможность добавить polyfills в JS, но есть ли возможность добавить и эту функцию? Мне интересно, что я не нашел подобного вопроса, так что, возможно, есть простое решение, которого я не вижу в данный момент.

Answer 1

Решение Юниуса Л. сработало для меня.

Шаги решения:

1. npm install react-app-polyfill
2. Добавьте библиотеки в index. js file Примечание. Это работало без понижения "сценариев реакции".

3. Обновить список браузеров в пакете. json

   "browserslist": {
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all",
         "ie 11"
       ],
       "development": [
         ">0.2%",
         "not dead",
         "not op_mini all",
         "ie 11"
       ]
     }
   

Answer 2

Я создал образец React, используя "react-scripts": "3.4.1", после добавления полифила react-app-polyfill для браузера IE и установки стилизованных компонентов я мог бы использовать стилизованные компоненты для добавления стиля CSS .

Подробная информация о шагах, как показано ниже:

1. Создайте новое приложение React, используя create-react-app .

2. Добавить Polyfill для IE браузера .

   Установите пакет: install the package

   Добавьте следующий код в src / index. js

   import 'react-app-polyfill/ie9';
   import 'react-app-polyfill/ie11';
   import 'react-app-polyfill/stable';
   

   Измените список браузеров в пакете. json

     "browserslist": {
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all",
         "ie 11"
       ],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version",
         "ie 11"
       ]
     }
   

3. Установите стилизованные компоненты, используя NPM, с помощью следующей команды:

    npm install styled-components
   

4. Использование стилизованных компонентов

   Код в приложении. js:

   import React from 'react';
   import logo from './logo.svg';
   import './App.css';
   import styled from 'styled-components';
   
   const Button = styled.button`
     cursor: pointer;
     background: transparent;
     font-size: 16px;
     border-radius: 3px;
     color: palevioletred;
     border: 2px solid palevioletred;
     margin: 0 1em;
     padding: 0.25em 1em;
     transition: 0.5s all ease-out;
   
     &:hover {
       background-color: palevioletred;
       color: white;
     }
   `;
   
   function App() {
     return (
       <div className="App"> 
         <div>
         <h1>Hello CodeSandbox</h1>
         <h2>Start editing to see some magic happen!</h2>
         <Button>I am a Button</Button>
       </div>
       </div>
     );
   }
   
   export default App;
   

   и пакет. json страница, как показано ниже

   {
     "name": "reactstylecomponent",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
       "@testing-library/jest-dom": "^4.2.4",
       "@testing-library/react": "^9.5.0",
       "@testing-library/user-event": "^7.2.1",
       "react": "^16.13.1",
       "react-app-polyfill": "^1.0.6",
       "react-dom": "^16.13.1",
       "react-scripts": "3.4.1",
       "styled-components": "^5.1.1",
       "webpack": "4.42.0"
     },
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     },
     "eslintConfig": {
       "extends": "react-app"
     },
     "browserslist": {
       "production": [
         ">0.2%",
         "not dead",
         "not op_mini all",
         "ie 11"
       ],
       "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version",
         "ie 11"
       ]
     },
     "devDependencies": {
       "webpack": "^4.42.0"
     }
   }
   

5. После запуска веб-сайта в браузере IE 11 результат будет примерно таким:

Answer 3

Вам нужно добавить полифиллы, чтобы реакция работала на IE. Добавьте эти библиотеки в начало файла index. js и перейдите на react-scripts версию 3.2.0.

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/es/map';
import 'core-js/es/set';
import 'raf/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

JavaScript Требования к среде

react-app-polyfill

Синтаксическая ошибка - IE11 - Полифилл