search

easy-team / egg-vue-typescript-boilerplate

Egg Vue TypeScript Server Side Render (SSR) / Client Side Render (CSR)
https://easyjs.cn/egg-vue
MIT License
72 stars 18 forks source link

使用`normalize.css`时服务端渲染会报错 #15

Open funkyLover opened 4 years ago

funkyLover commented 4 years ago 
// app/web/framework/app.ts
import 'normalize.css';
2020-03-11 17:47:29,461 ERROR 58250 [admin/home.js] server render bundle error, try client render, the server render error //egg-vue-typescript-boilerplate/node_modules/normalize.css/normalize.css:11
html {
     ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/funkyLover/Desktop/egg-vue-typescript-boilerplate/node_modules/ts-node/src/index.ts:431:14)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at r (/Users/funkyLover/Desktop/egg-vue-typescript-boilerplate/node_modules/vue-server-renderer/build.dev.js:9310:16)
    at eval (webpack:///external_%22normalize.css%22?:1:18)
    at Object.normalize.css (__vue_ssr_bundle__:1069:1)
    at __webpack_require__ (__vue_ssr_bundle__:26:30)
    at eval (webpack:///./app/web/framework/app.ts?:6:71)
    at Module../app/web/framework/app.ts (__vue_ssr_bundle__:368:1)
    at __webpack_require__ (__vue_ssr_bundle__:26:30)
    at eval (webpack:///./app/web/page/admin/home/index.ts?:2:72)
funkyLover commented 4 years ago

这里还有个新的问题，如果去掉 normalize.css 依然会报错

2020-03-11 17:56:53,392 ERROR 55180 [admin/home.js] server render bundle error, try client render, the server render error ReferenceError: document is not defined
    at eval (webpack:///./node_modules/vue-echarts/dist/vue-echarts.js?:1:11870)
    at eval (webpack:///./node_modules/vue-echarts/dist/vue-echarts.js?:1:37)
    at eval (webpack:///./node_modules/vue-echarts/dist/vue-echarts.js?:1:138)
    at Object../node_modules/vue-echarts/dist/vue-echarts.js (__vue_ssr_bundle__:2697:1)
    at __webpack_require__ (__vue_ssr_bundle__:20:30)
    at eval (webpack:///./app/web/component/common/echart/index.ts?./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js??ref--0-1!./node_modules/ts-loader??ref--0-2:6:86)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/thread-loader/dist/cjs.js?!./node_modules/ts-loader/index.js?!./app/web/component/common/echart/index.ts?vue&type=script&lang=ts& (__vue_ssr_bundle__:1391:1)
    at __webpack_require__ (__vue_ssr_bundle__:20:30)
    at eval (webpack:///./app/web/component/common/echart/index.ts?:2:225)
    at Module../app/web/component/common/echart/index.ts?vue&type=script&lang=ts& (__vue_ssr_bundle__:227:1)

这里看似是 vue-echarts 导致的

因为 vue-echarts的文档中指出 webpack 环境下默认提供的是源码版本，所以需要配置babel处理

但是来到 easywebpack 中不知道应该如何修改对应配置以做到之前的配置不被破坏的情况下增加新的配置😅

所以我在引入的时候是这样引用的

import ECharts from 'vue-echarts/dist/vue-echarts';

虽然客户端渲染能跑通但是服务端渲染会报错

hubcarl commented 4 years ago

@funkyLover 从错误看，vue-echarts 不支持 ssr ， 具体解决方案 https://www.yuque.com/easy-team/blog/lcbfwb

funkyLover commented 4 years ago

@hubcarl 感谢，那第一个问题方便帮忙看下吗

import 'normalize.css';
hubcarl commented 4 years ago

直接在 .vue 页面里面 import 'normalize.css' 试试