search

zhangyuang / ssr

A most advanced ssr framework support React17/React18/Vue2/Vue3 on Earth that implemented serverless-side render specification.
http://doc.ssr-fc.com/
MIT License
2.59k stars 283 forks source link

更新到最新版后，vite打包出现了js报错 #151

Closed DCLangX closed 2 years ago

DCLangX commented 2 years ago

详细描述你的问题

今天看到大佬连发数版，忍不住更新了下依赖，然后build后跑起来发现js报错了，于是又起了个nestjs-vue3-ssr示例测试，经过尝试可以复现问题，只要在样例的pages/detail/render$id.vue和pages/detail/render.vue都加入这两行代码

import { useRouter } from 'vue-router'
const router = useRouter()

打包后运行，就出现了如下报错 image

DCLangX commented 2 years ago

大佬，还是有点问题，现在完全新建一个nestjs-vue3-ssr的项目，vite打包运行后，会报Uncaught TypeError: Y is not a function image @zhangyuang 不知道issue关闭了还有没有提醒😅

zhangyuang commented 2 years ago

并没有问题，确认安装的是最新依赖

DCLangX commented 2 years ago

并没有问题，确认安装的是最新依赖

换了台电脑，确认安装的最新依赖，，开发模式start:vite不会报错，只有prod:vite会报错，需要可以录个视频 yarn.lock如下

ssr-client-utils@^6.1.38:
  version "6.1.38"
  resolved "https://registry.npmmirror.com/ssr-client-utils/download/ssr-client-utils-6.1.38.tgz#220227f24cc3c9c16177019c07691bf0e6efeaca"
  integrity sha512-in6kLsb69sSdC7+2EUhTEnI3eM19j1Yk824p0ZEcVflaE524CudSUHLjDgMhdiyxQMMFqVNVv7/Xf+jiCsP6lA==
  dependencies:
    path-to-regexp "^6.2.0"
    ssr-types "^6.1.38"

ssr-core-vue3@^6.0.0:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr-core-vue3/download/ssr-core-vue3-6.1.39.tgz#33956aee494e700edcf9fb97ef5c301c55e36d0c"
  integrity sha512-BSdD5HyCYB1qy9ff5x1nISPgNuppkOAmFb4vMwGuKFlgAoZqHT3KHMvIWUe897oPD894l7TlNVBQ/lEmXs2WqA==
  dependencies:
    "@babel/runtime" "^7.12.13"
    "@vue/server-renderer" "^3.0.7"
    cheerio "^1.0.0-rc.10"
    serialize-javascript "^6.0.0"
    ssr-server-utils "^6.1.39"
    vue "^3.0.0"

ssr-plugin-nestjs@^6.0.0:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr-plugin-nestjs/download/ssr-plugin-nestjs-6.1.39.tgz#2dbfc440dec680b271097316946a4803f854c96d"
  integrity sha512-0JBkO6vIj0b9j976TrQk3TwWS8b1Wfm6y4KG602n9xJXjlH9pDKTC01bViMEf4ggpl40MA6iGQlEefrj9BJPQA==
  dependencies:
    ora "^4.0.4"
    rimraf "^3.0.2"
    ssr-server-utils "^6.1.39"

ssr-plugin-vue3@^6.0.0:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr-plugin-vue3/download/ssr-plugin-vue3-6.1.39.tgz#49753bfb249926d5e83f703891520c9f194e7579"
  integrity sha512-b5QtWDTz8fmYIYtoOJnTv4fX6KhoiSLbf69XZoYujMTLlBojgTiTqj7ok8FE8335f50LTj8rYEhdFjNpSVoBrw==
  dependencies:
    "@babel/core" "^7.0.0"
    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.5"
    "@babel/plugin-proposal-optional-chaining" "^7.16.5"
    "@babel/plugin-transform-runtime" "^7.9.6"
    "@babel/preset-env" "^7.5.5"
    "@babel/preset-typescript" "^7.12.13"
    "@rollup/plugin-babel" "^5.3.0"
    "@vitejs/plugin-vue" "^1.2.1"
    "@vitejs/plugin-vue-jsx" "^1.3.2"
    "@vue/babel-plugin-jsx" "^1.0.3"
    "@vue/compiler-sfc" "^3.0.7"
    babel-loader "8.0.4"
    babel-plugin-import "^1.13.0"
    concurrently "^5.1.0"
    core-js "^3.6.4"
    css-hot-loader "^1.4.4"
    css-loader "^5.2.7"
    file-loader "^6.2.0"
    ignore-loader "^0.1.2"
    less "^4.1.1"
    less-loader "^7.3.0"
    mini-css-extract-plugin "^1.0.0"
    optimize-css-assets-webpack-plugin "5.0.4"
    postcss-discard-comments "^4.0.2"
    postcss-flexbugs-fixes "4.1.0"
    postcss-loader "^4.0.0"
    postcss-preset-env "^6.0.5"
    postcss-safe-parser "4.0.1"
    ssr-client-utils "^6.1.38"
    ssr-server-utils "^6.1.39"
    ssr-types "^6.1.38"
    ssr-webpack "^6.1.39"
    terser-webpack-plugin "^2.3.5"
    url-loader "^4.1.1"
    vite "^2.7.0"
    vite-plugin-style-import "^1.4.0"
    vue "^3.0.0"
    vue-loader "^16.1.2"
    vue-router "^4.0.0"
    vuex "^4.0.0"
    webpack-bundle-analyzer "^3.6.1"
    webpack-chain "^6.4.0"
    webpack-manifest-plugin "^2.2.0"
    webpackbar "^5.0.0-3"

ssr-server-utils@^6.1.39:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr-server-utils/download/ssr-server-utils-6.1.39.tgz#c8b7aa1c5ab5523b39d2c6a9c92579c4ebc95cab"
  integrity sha512-VEdaqMeLX2c9DODXFxEya1i9ur8QrSD1J+yHUq8W9aRRJEt3kg+HMvV0RdH8IaHCNvicDQpZydKfQBryltz2Tw==
  dependencies:
    axios "^0.21.1"
    es-module-lexer "^0.9.3"
    http-proxy-middleware "^1.0.6"
    koa2-connect "^1.0.2"
    magic-string "^0.25.7"
    path-to-regexp "^6.2.0"
    semver "^7.3.5"
    shelljs "^0.8.3"
    ssr-types "^6.1.38"

ssr-types@^6.0.0, ssr-types@^6.1.38:
  version "6.1.38"
  resolved "https://registry.npmmirror.com/ssr-types/download/ssr-types-6.1.38.tgz#4a3b0616eb42f91d6b9abb3c8f71ad6afacda96b"
  integrity sha512-0G1JjECREORXdMTJtUrwwrVzWsnJxzd+OKt0qRIILsWbZkXaRGM3UO7sfm/91TK0lSqOmVKBDU7STYFvtkftSA==
  dependencies:
    "@types/express" "^4.17.11"
    "@types/tapable" "^1.0.6"
    "@types/webpack" "^4.41.10"
    "@types/yargs" "^13.0.4"
    egg "^2.0.0"

ssr-webpack@^6.1.39:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr-webpack/download/ssr-webpack-6.1.39.tgz#a69d7cd6778848b5c1aaed8d16b6b685a570d9cd"
  integrity sha512-3lVoMBprX+9jkWuB2dAPEtbJAHGsW+4LNlF6rHun6i8xJ7pg2ETl2yRfJaZCIZXiU1r9WmN4R/OQCAz4cKo0Pg==
  dependencies:
    ssr-server-utils "^6.1.39"
    webpack "^4.42.1"
    webpack-dev-server-ssr "^3.10.3"

ssr-window@^3.0.0, ssr-window@^3.0.0-alpha.1:
  version "3.0.0"
  resolved "https://registry.npmmirror.com/ssr-window/download/ssr-window-3.0.0.tgz#fd5b82801638943e0cc704c4691801435af7ac37"
  integrity sha1-/VuCgBY4lD4MxwTEaRgBQ1r3rDc=

ssr@^6.0.0:
  version "6.1.39"
  resolved "https://registry.npmmirror.com/ssr/download/ssr-6.1.39.tgz#63fe75b5ffff6910d7d841627e927df73f125742"
  integrity sha512-hy+KzxsK7ZdnNA5XCQsuP4VzAf7rqCOiIdShqA2E2fkAiLSw0grEGGQ1pIxkxjiCaoGoxk/CaYtYrFZzWpKNPQ==
  dependencies:
    esbuild "^0.13.14"
    ora "^4.0.4"
    shelljs "^0.8.3"
    ssr-server-utils "^6.1.39"
    ssr-types "^6.1.38"
    yargs "^13.2.4"
zhangyuang commented 2 years ago

并没有问题哦我这边，可以把node_modules跟项目一起传到github来给复现

DCLangX commented 2 years ago

并没有问题哦我这边，可以把node_modules跟项目一起传到github来给复现

好的，那太奇怪了😥，不知道咋回事，传上去了，也录了下视频，大佬你瞅瞅 代码 https://github.com/DCLangX/TestSSRBug 视频 https://home.niye.vip:8888/testssrbug.mp4

zhangyuang commented 2 years ago

看起来跟你用的是m1的mbp导致装的esbuild不一样有关系，可以先用webpack构建，等我什么时候有m1的电脑再看

DCLangX commented 2 years ago

看起来跟你用的是m1的mbp导致装的esbuild不一样有关系，可以先用webpack构建，等我什么时候有m1的电脑再看

尬住了，并不是m1= =😥，开发和传的代码是win10下的，，视频里演示的是winserver2022，玄学

zhangyuang commented 2 years ago

哦。。看错了，是换了电脑我这边没有这个esbuild的optionaldependencies，重装后我这边仍然没问题，你可以找台mac试试

DCLangX commented 2 years ago

哦。。看错了，是换了电脑我这边没有这个esbuild的optionaldependencies，重装后我这边仍然没问题，你可以找台mac试试

装了个mac虚拟机试了下，确实mac打包出来，没这问题😂。。。（挠破头），，然后经过反复降级版本测试后，确认目前在我的win10下，其他组件升降应该都没问题，就是ssr-plugin-vue3，从6.1.31更新到6.1.34开始会出现这个毛病。。。

"ssr": "6.1.42",
"ssr-client-utils": "6.1.42",
"ssr-server-utils": "6.1.42",
"ssr-core-vue3": "6.1.42",
"ssr-plugin-nestjs": "6.1.42",
"ssr-plugin-vue3": "6.1.31",     //6.1.31打包出来正常，如更新到>=6.1.34，出现报错
"ssr-types": "6.1.42",
"ssr-webpack": "6.1.42"
zhangyuang commented 2 years ago

具体的报错代码点进去截个图，我看看可能是哪里的问题

DCLangX commented 2 years ago

@zhangyuang 我把两版本打包出来的都部署出来了 6.1.31不报错： http://home.niye.vip:568/ 6.1.34报错： http://home.niye.vip:567/

1641370987(1) 1641371141(1) 对比了下，好像打包出来文件不太一样，报错的这个Y是从另一个js导入的

import {w as T, r as K, s as W, _ as Y, o as q, c as J, a as M} from "./vendor.c9d7a3f6.chunk.js";

打断点后Y是undefined

image

点进vendor.c9d7a3f6.chunk.js

var Sa = (e,t)=>{
    const n = e.__vccOpts || e;
    for (const [r,i] of t)
        n[r] = i;
    return n
}
export {......, Sa as _, ......};

才疏学浅，看起来好像没啥问题= =😅

zhangyuang commented 2 years ago

知道问题了，下个版本修复

zhangyuang commented 2 years ago

更新了可以试试

DCLangX commented 2 years ago

更新了可以试试

厉害👍，完美解决