mirari / v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
https://mirari.cc/v-viewer/
MIT License
2.49k stars 294 forks source link

Cannot use import statement outside a module #262

Closed Yuiyis closed 2 years ago

Yuiyis commented 2 years ago

image 使用Vite3 官方SSR例子 引入 v-viewer。 在开发环境正常,生产打包浏览后出现此问题

Yuiyis commented 2 years ago

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1088:15) at Module._compile (node:internal/modules/cjs/loader:1123:27) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) at Module._load (node:internal/modules/cjs/loader:878:12) at ModuleWrap. (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:193:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:518:24)

mirari commented 2 years ago

初步判断是引入v-viewer时指向了es方式的入口index.es.js

  "main": "./dist/index.umd.js",
  "unpkg": "./dist/index.umd.js",
  "module": "./dist/index.es.js",

需要显式指定umd入口才能避免出现import语句

mirari commented 2 years ago

更新到3.0.11再试一下

低于3.0.11的版本可以禁用外部化

ssr: {
    noExternal: [
      'v-viewer'
    ]
  },
Yuiyis commented 2 years ago

非常感谢解决了这个问题。