Q&A
「 https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated 」は出力されるページにscript要素として読み込まれるのでしょうか。それとも、多くのコードをまとめて（場合によっては圧縮して）使われるのでしょうか。
Nuxtjsで、IE11表示を表示崩れ・JSエラー無しに疎通させたいです。
下記のリンクを参考に調整しましたが、オブジェクトエラーが取れず、四苦八苦です。
================ 2019年10月17日追記 ================
NUXTのSSR後のheadタグの中身
html
1<head> 2 <title>XXXXX</title> 3 <meta data-n-head="ssr" charset="utf-8"> 4 <meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"> 5 <meta data-n-head="ssr" data-hid="description" name="description" content="Nuxt.js project"> 6 <meta data-n-head="ssr" name="robots" content="noindex,nofollow"> 7 <link data-n-head="ssr" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" ref="stylesheet"> 8 <link data-n-head="ssr" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" ref="stylesheet"> 9 <script data-n-head="ssr" src="https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated"></script> 10 <link rel="preload" href="/_nuxt/3c110ba8652063e35995.js" as="script"> 11 <link rel="preload" href="/_nuxt/5b23705a75560902a816.js" as="script"> 12 <link rel="preload" href="/_nuxt/5c1c0ad0a3c48d7f817e.css" as="style"> 13 <link rel="preload" href="/_nuxt/682b43f43afe083afe71.js" as="script"> 14 <link rel="preload" href="/_nuxt/a7c2ceb3b90cb1de842a.css" as="style"> 15 <link rel="preload" href="/_nuxt/6d51bbc921edbc1f515d.js" as="script"> 16 <link rel="preload" href="/_nuxt/ca52cd219b289dab1b2d.css" as="style"> 17 <link rel="preload" href="/_nuxt/33746c83f5f93c6a454e.js" as="script"> 18 <link rel="stylesheet" href="/_nuxt/5c1c0ad0a3c48d7f817e.css"> 19 <link rel="stylesheet" href="/_nuxt/a7c2ceb3b90cb1de842a.css"> 20 <link rel="stylesheet" href="/_nuxt/ca52cd219b289dab1b2d.css"> 21</head>
IE11のネットワークの通信結果
==============================================
どうか、どなたかご教授願います...????♂️
◆IE11のコンソール上で発生しているエラー
IEConsole
1"オブジェクトは 'values' プロパティまたはメソッドをサポートしていません。" 2"オブジェクトは 'entries' プロパティまたはメソッドをサポートしていません。"
◆nuxt.config.js
js
1module.exports = { 2 mode: 'universal', 3 4 head: { 5 title: 'XXXXX', 6 meta: [ 7 {charset: 'utf-8'}, 8 {name: 'viewport', content: 'width=device-width, initial-scale=1'}, 9 {hid: 'description', name: 'description', content: 'Nuxt.js project'}, 10 {name: 'robots', content: 'noindex,nofollow'}, 11 ], 12 script: [ 13 { 14 src: "https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated" 15 } 16 ] 17 }, 18 19 srcDir: 'client/', 20 21 modules: [ 22 // '@nuxt/http', 23 '@nuxtjs/style-resources' 24 ], 25 26 css: [ 27 'normalize.css/normalize.css', 28 '~/assets/styles/myNormalize.css', 29 '~/assets/styles/transition.css', 30 '~/assets/styles/customAntDesignStyles.css' 31 ], 32 33 http: { 34 baseURL: 'https://api.thedogapi.com/v1/', 35 }, 36 37 plugins: [ 38 '@/plugins/ant-design-vue' 39 ], 40 41 render: { 42 compressor: false, 43 }, 44 45 build: { 46 extractCSS: true, 47 postcss: { 48 plugins: [ 49 require('postcss-preset-env')({ 50 features: { 51 'nesting-rules': true, 52 } 53 }), 54 require('postcss-custom-properties')(), 55 require('postcss-nested')() 56 ] 57 }, 58 } 59}; 60
◆package.json
json
1{ 2 "name": "aws-node-vue-nuxt-ssr", 3 "version": "1.0.0", 4 "description": "Sample project for using Nuxt.js to create a server-side rendered Vue.js app on AWS Lambda and AWS API Gateway. Can easily integrate with your own API or 3rd party APIs such as headless CMS, e-commerce or serverless architecture.", 5 "main": "index.js", 6 "engines": { 7 "node": ">=8.10" 8 }, 9 "scripts": { 10 "test": "echo \"Error: no test specified\" && exit 1", 11 "dev": "nuxt", 12 "build": "nuxt build", 13 "start": "nuxt start", 14 "generate": "nuxt generate", 15 "deploy": "npm run build && sls deploy", 16 "start-server": "npm run build && node app.js", 17 "start-sls": "npm run build && sls offline start" 18 }, 19 "keywords": [], 20 "author": "", 21 "license": "MIT", 22 "dependencies": { 23 "@nuxt/http": "^0.1.2", 24 "@nuxtjs/style-resources": "^1.0.0", 25 "ant-design-vue": "^1.4.0-beta.0", 26 "axios": "^0.18a.0", 27 "lodash": "^4.17.15", 28 "moment": "^2.24.0", 29 "normalize.css": "^8.0.1", 30 "nuxt": "^2.6.3", 31 "nuxt-start": "^2.6.3", 32 "postcss-custom-properties": "^9.0.2", 33 "postcss-nested": "^4.1.2", 34 "postcss-preset-env": "^6.7.0", 35 "serverless-apigw-binary": "^0.4.4", 36 "serverless-http": "^2.0.1", 37 "vuex": "^3.1.1" 38 }, 39 "devDependencies": { 40 "serverless-domain-manager": "^3.2.1", 41 "serverless-offline": "^4.10.0" 42 } 43}
全ページのheadにまとめて読み込まれると思います。
デフォルトのメタ情報として設定しています。
https://ja.nuxtjs.org/api/configuration-head/
圧縮・・・nuxt.coonfig.jsの仕様に準じて出力されると思いますがいかがでしょうか？
回答3件
0
ベストアンサー
他の方の回答にありますがObject.values()とObject.entries()が引っかかっています。
この対応のためpolyfill.ioを導入されてるかと思いますが「es5、es6、es7」のセットにこの２つは含まれていないようなのでes2017を追加して「https://polyfill.io/v3/polyfill.min.js?features=es2017%2Ces5%2Ces6%2Ces7」とすれば解決しそうですがいかがでしょうか。
公式のURLビルダーで含まれている機能を確認しながら選択できます。
polyfill.io
投稿2019/11/05 04:55
総合スコア768
確認してみます！
0
NuxtJS は使用したことが無いのですが、https://polyfill.io/v3/polyfill.js?features=es5,es6,es7&flags=gated は呼び出すブラウザによって返却するスクリプトが変わっているため、事前に取得して結合する処理を行っている場合それが問題になっているかもしれないです。
【はじめに - NuxtJS】
https://ja.nuxtjs.org/guide/
バンドルやソースコードの分割やミニファイ化するために内部で webpack、vue-loader と babel-loader を使います。
もしscript要素で読み込む指定になっているのであれば、IE側で正しい順序で読み込まれているかをIE11の開発者ツールにて確認してみてください。（例えば404になっていたりしないか、他のスクリプトより前の段階でpolyfillが適用されているか、など）
投稿2019/10/16 13:24
総合スコア69596
動作確認しています！
ありがとうございます、改めて状況お送ります????♂️
kei344さん
質問に追記しました！
IE11のネットワークコンソールを見たり、出力されているHTMLのheadの中身を見ましたが、polyfillは読み込まれていると感じました。
JSシンタックスの問題なので、polyfillではなく別途babelなどの調整が必要そうでしょうか？
恐れ入りますがご教授のほどよろしくお願い申し上げます。
読み込み順も問題ないようですね･･･。
babelでIE対応に変換してしまうほうがよいと思います。（もっと言うとIEは対応しなくてよいと思う）
ご確認ありがとうございます。
NuxtjsのBabelの変換処理をみて、IE11対応をしましたがそれでも復帰しませんでした・・。
https://ja.nuxtjs.org/api/configuration-build/#presets
https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app#options
IE11に対して、Object.values, Object.entriesの対応は、現在のNuxtjsでは不可能なのでしょうか...。
もう少しTeratailさんで回答をお待ちし、厳しければ海外のNuxtjsフォーラム的なところへ頑張って質問してみようと思います????♂️
あなたの回答
tips
プレビュー
