Транспилирование NextJS для IE 10/11;«Слабая неопределенность» - PullRequest
Новая
       42

Транспилирование NextJS для IE 10/11;«Слабая неопределенность»

0 голосов
/ 14 ноября 2018

У меня есть сайт NextJS, который я создаю, и он великолепен, за исключением того, что он не работает в IE 10/11, потому что некоторый код не передается корректно. Я очень плохо отношусь к babel и веб-пакетам, и мне никогда не приходилось настраивать их раньше. Я уже два дня пытаюсь решить, читая онлайн, и, похоже, у меня ничего не получается.

Точная ошибка, которую я получаю, weakSet is not defined, и она исходит из файла common.js.

Вот мой файл .babelrc, расположенный в корне моего проекта.

// .babelrc 

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { 
            "ssr": true, 
            "displayName": true, 
            "preprocess": false 
        }]
    ]
}

my package.json 

{
  "name": "bradshouse",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-pose": "^4.0.1",
    "styled-components": "^4.0.2"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.8.0"
  }
}

Полное репо здесь, если вы заинтересованы в его запуске самостоятельно. Модули узлов исключаются, поэтому установка npm, затем сборка запуска npm, затем запуск запуска npm.
https://github.com/TJBlackman/Brads-House

Спасибо за помощь! Не стесняйтесь просто ссылаться на статьи, и я прочитаю их полностью! Благодарю.

Редактировать: В качестве быстрого исправления я добавил этот сценарий полизаполнения на <head> всех своих страниц, и это все еще не решило эту проблему ... Ват ?! <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

1 Ответ

0 голосов
/ 15 ноября 2018

Как поддержать IE 11 путем передачи кода node_modules в NextJS

Исходный ответ найден в потоке вопросов ziet / nextjs ( посмотреть здесь ).Привет joaovieira <3 </p>

npm install --save-dev babel-polyfill

создайте polyfill.js где угодно, и внутри этого файла импортируйтеbabel-polyfill примерно так:

import 'babel-polyfill';

Далее, если у вас нет файла next.config.js, создайте его в корневом каталоге.Теперь обновите этот файл, чтобы включить следующую конфигурацию веб-пакета.Обратите внимание, как он использует только что созданный файл полифилла.Пример полного файла: 

module.exports = {
  webpack: (config) => {
    // Unshift polyfills in main entrypoint.
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      if (entries['main.js']) {
        entries['main.js'].unshift('./path_to/polyfills.js'); // <- polyfill here
      }
      return entries;
    };

    return config;
  }
}

Наконец, если у вас нет файла .babelrc в корневом каталоге вашего проекта, создайте его.Внутри него используйте приведенный ниже код, который соответствует используемой вами версии babel.

Babel 7 

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "useBuiltIns": "usage"
        }
      }
    ]
  ]
}

Babel 6 

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "browsers": "defaults"
          },
          "useBuiltIns": true
        }
      }
    ]
  ]
}

Это все, что я знаю.Я даже не думаю о IE 10 ...

Удачи!

...