come mai this.$refs.container non esiste?

.babelrc

@@ -9,7 +9,7 @@
           "chrome": "67",
           "safari": "11.1"
         },
-        "corejs": 2,
+        "corejs": "2.0",
         "useBuiltIns": "usage" // @babel/polyfill 配置：usage 按需加载 ECMAscript 规范库
       }
     ]

package.json

@@ -18,6 +18,7 @@
   "author": "Wayne (371377785@qq.com)",
   "repository": "https://github.com/DingRui12138/vue-pdf-viewer",
   "scripts": {
+    "prepare": "webpack build",
     "test": "webpack -v",
     "build": "webpack build --progress",
     "serve": "webpack serve --config webpack.dev.config.js --hot",
@@ -25,7 +26,8 @@
     "lint:fix": "eslint src/** --fix"
   },
   "dependencies": {
-    "pdfjs-dist": "2.12.313"
+    "pdfjs-dist": "2.12.313",
+    "sass": "^1.89.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
@@ -42,16 +44,13 @@
     "eslint-plugin-vue": "^7.10.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
-    "node-sass": "^6.0.1",
     "prettier": "^2.3.0",
-    "sass-loader": "^12.3.0",
+    "sass-loader": "^16.0",
     "strip-ansi": "^7.0.1",
     "style-loader": "^3.3.1",
-    "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.1",
     "vue": "^2.6.12",
     "vue-loader": "^15.9.7",
-    "vue-loader-next": "npm:vue-loader@^16.2.0",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.14",
     "webpack": "5",

src/components/RotateWrapper/RotateWrapper.vue

@@ -94,5 +94,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './RotateWrapper.scss';
+@use './RotateWrapper.scss';
 </style>

src/components/Viewer/Viewer.vue

@@ -209,8 +209,10 @@ export default {
     this.$refs.iframe.appendStyle(this.$options.rotateWrapperStyle)
     // TODO: element resize replace window resize with Observe
     this.handleResize = throttle(() => {
+    try{
       this.viewportHeight = this.$refs.container.clientHeight
       this.viewportWidth = this.$refs.viewerScroller.clientWidth
+    }catch(e){}
     }, 100)
 
     window.addEventListener('resize', this.handleResize)

webpack.config.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
 
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const { VueLoaderPlugin: Vue2LoaderPlugin } = require('vue-loader')
-const { VueLoaderPlugin: Vue3LoaderPlugin } = require('vue-loader-next')
+// const { VueLoaderPlugin: Vue3LoaderPlugin } = require('vue-loader-next')
 
 const baseConfig = {
   mode: 'production',
@@ -24,6 +24,7 @@ const baseConfig = {
                   chrome: '67',
                   safari: '11.1',
                 },
+                corejs: '2.0',
                 useBuiltIns: 'usage',
               },
             ],
@@ -70,11 +71,11 @@ const baseConfig = {
     ],
   },
   optimization: {
-    minimizer: [
+    // minimizer: [
-      new UglifyJsPlugin({
+    //   new UglifyJsPlugin({
-        parallel: true,
+    //     parallel: true,
-      }),
+    //   }),
-    ],
+    // ],
   },
   externals: {
     vue: 'vue',
@@ -96,15 +97,15 @@ module.exports = [
     },
     plugins: [new Vue2LoaderPlugin()],
   },
-  {
+  // {
-    ...baseConfig,
+  //   ...baseConfig,
-    output: {
+  //   output: {
-      filename: 'vue3-pdf-viewer.js',
+  //     filename: 'vue3-pdf-viewer.js',
-      library: {
+  //     library: {
-        name: 'pdf-viewer-vue',
+  //       name: 'pdf-viewer-vue',
-        type: 'umd',
+  //       type: 'umd',
-      },
+  //     },
-    },
+  //   },
-    plugins: [new Vue3LoaderPlugin()],
+  //   plugins: [new Vue3LoaderPlugin()],
-  },
+  // },
 ]