SSR Support! #55

folamy · 2021-05-20T20:38:51Z

Can I use balm-ui in vue ssr?

elf-mouse · 2021-05-21T02:04:57Z

Yes.

You can use Nuxt:

npx create-nuxt-app <my-project>

Choose BalmUI

And edit nuxt.config.js:

import { resolve } from "path";

export default {
  // ...
  alias: {
    vue$: resolve(__dirname, './node_modules/vue/dist/vue.esm.js')
  }
};

Then, enjoy :)

folamy · 2021-05-21T04:28:06Z

@elf-mouse
Thank you for your response. However, I am using Vitejs with ssr-vue(vue 3 SSR) example here:

https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue

Can you help me with this, please?

folamy · 2021-05-21T07:34:53Z

@elf-mouse @
I did another test and discovered that trying to import BalmUIPlus from 'balm-ui-plus' causes this error:

[vite] Error when evaluating SSR module /node_modules/balm-ui/dist/balm-ui-plus.esm.js:
TypeError: Cannot read property 'undefined' of undefined
at new renderSlot (/home/folamy/Desktop/vitessr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:712:21)
at U (/node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:4384)
at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:7516
at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:8699
at instantiateModule (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68197:166)
(node:20329) UnhandledPromiseRejectionWarning: TypeError: Line must be greater than or equal to 1, got -1
at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67083:13)
at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67152:22)
at /home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68098:34
at String.replace ()
at /home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68088:21
at Array.map ()
at ssrRewriteStacktrace (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68087:10)
at Object.ssrFixStacktrace (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68408:27)
at /home/folamy/Desktop/vitessr/server.js:77:20
(Use node --trace-warnings ... to show where the warning was created)
(node:20329) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20329) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Also, trying to do Individual Usage
import UiButton from 'balm-ui/components/button' and import $alert from 'balm-ui/plugins/alert'
causes this error:
[vite] Error when evaluating SSR module /src/main.js:
TypeError: Cannot read property 'createVNode' of undefined
at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:2993
at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:23038
at Object. (/home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:23060)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68211:17)

Otherise, doing import BalmUI from 'balm-ui'; works fine, but I need some components and directive/utils from BalmUIPlus tools.
How do I resolve this, please?

elf-mouse · 2021-05-22T06:00:35Z

Hi @folamy ,

SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.

I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite example can not work correctly @vitejs:

Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry

folamy · 2021-05-22T06:04:21Z

Hi @folamy ,

SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.

I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:
Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry

You need to manually install vite.
yarn add vite -D

folamy · 2021-05-22T08:16:31Z

@elf-mouse
Is there any update on this?

folamy · 2021-05-22T17:27:04Z

Do I have to open another issue for this?

elf-mouse · 2021-05-23T06:48:05Z

Hi @folamy ,
SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.
I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:
Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
You need to manually install vite.
yarn add vite -D

(node v16.2.0) My steps:

clone vite repository
cd /path/to/vite/packages/playground/ssr-vue
yarn add -D vite & yarn add balm-ui@next
yarn dev or npm run dev, it's not work :(

Please give me your demo repository, I would to debug or fix it.

elf-mouse · 2021-05-23T06:50:37Z

Hi @folamy ,

I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.

Thank you so much~

folamy · 2021-05-23T14:51:02Z

Hi @folamy ,
SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.
I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:
Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
You need to manually install vite.
yarn add vite -D
(node v16.2.0) My steps:

clone vite repository

cd /path/to/vite/packages/playground/ssr-vue

yarn add -D vite & yarn add balm-ui@next

yarn dev or npm run dev, it's not work :(

Please give me your demo repository, I would to debug or fix it.

@elf-mouse
You should be able to work with this repo here:

clone this repository https://github.com/folamy/vitessr
yarn install
yarn dev

folamy · 2021-05-23T14:52:23Z

Hi @folamy ,

I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.

Thank you so much~

@elf-mouse, as you have requested, I commented with a demo repo above!

elf-mouse · 2021-05-25T08:16:01Z

Hi @folamy ,

NOW, The [email protected] already supports SSR :)

Thank you so~ much!!!

folamy · 2021-05-25T11:20:10Z

Thank you @elf-mouse, I can see the changes already.

Now, how do I change the color theme? Remember, I am not using balm Cli, but vite!

elf-mouse · 2021-05-26T01:27:39Z

Please see BalmUI theme apis document.

simple example:

<template>
  <ui-button @click="$alert('hi')">SayHi</ui-button>
  <ui-button @click="onChangeTheme">Change Theme</ui-button>
</template>

export default {
  methods: {
    onChangeTheme() {
      this.$theme.primary = "red";
      this.$theme.onPrimary = "white";
    }
  }
};

elf-mouse · 2021-05-26T01:31:42Z

Hi @folamy ,

You need update your vite.config.js:

module.exports = {
  // ...
  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
      "balm-ui-plus": "balm-ui/dist/balm-ui-plus.esm.js",
      "balm-ui-css": "balm-ui/dist/balm-ui.css"
    }
  }
};

folamy · 2021-05-26T13:13:36Z

Please see BalmUI theme APIs document.

simple example:

<template>
  <ui-button @click="$alert('hi')">SayHi</ui-button>
  <ui-button @click="onChangeTheme">Change Theme</ui-button>
</template>

export default {
  methods: {
    onChangeTheme() {
      this.$theme.primary = "red";
      this.$theme.onPrimary = "white";
    }
  }
};

@elf-mouse
Thank you, I just want to be able to change everything from application entry

`import $theme from '...'
app.use($theme, {
primary: #da2efc,
.....

})`

Can this work?
I'm using Vue compositional API, so I don't have access to this in my code.

elf-mouse · 2021-05-27T04:03:39Z

We use dart sass overwrite for defaults.

And I have updated the $theme init colors. Try to 9.28.0 again.

folamy · 2021-06-05T21:49:54Z

Hi @elf-mouse.
Unfortunately, I am stil getting error
app.use(BalmUI, { $theme: { primary: '#2e8b57' } })
I am getting these errors:

[Vue warn]: resolveDirective can only be used in render() or setup().

ReferenceError: document is not defined
at n.value (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:583360)
at /home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:581694
at Array.forEach ()
at n.set (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:581664)
at Object.install (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:584274)
at Object.use (/home/folamy/Desktop/balmui/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3016:28)
at h (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:69482)
at Object.Ry [as install] (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:603276)
at Object.use (/home/folamy/Desktop/balmui/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3016:28)
at Module.createApp (/src/main.js:24:7)

elf-mouse · 2021-06-08T07:38:58Z

Oh! It's a lifecycle bug.

I have fixed this problem in 9.30.1.

But I still don’t have time to fully test SSR.

@folamy , thanks for your patience!

folamy · 2021-07-22T09:36:59Z

Hey!
@elf-mouse, thanks once again!
I am sorry this may be coming late, but there are still some clarification I would like to make.

How do use SASS Variables with vite
How do I use Material icons in vite
thanks.

elf-mouse · 2021-07-27T09:04:34Z

Hi @folamy ,

You need to install sass first: yarn add -D sass

<style lang="scss">
@use '@material/theme/variables' as theme-variables with (
  $primary: #f00
);

@use 'balm-ui/components/icon' with (
  $font-path: 'balm-ui/fonts'
);

@use 'balm-ui/dist/balm-ui';

// your code
</style>

folamy closed this as completed May 23, 2021

folamy reopened this May 23, 2021

folamy closed this as completed May 23, 2021

folamy reopened this May 23, 2021

elf-mouse added a commit that referenced this issue May 25, 2021

chore: 9.27.0 released for SSR (#55)

8a02413

folamy closed this as completed Jun 2, 2021

folamy reopened this Jun 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR Support! #55

SSR Support! #55

folamy commented May 20, 2021

elf-mouse commented May 21, 2021

folamy commented May 21, 2021 •

edited

Loading

folamy commented May 21, 2021 •

edited

Loading

elf-mouse commented May 22, 2021 •

edited

Loading

folamy commented May 22, 2021 •

edited

Loading

folamy commented May 22, 2021

folamy commented May 22, 2021

elf-mouse commented May 23, 2021

elf-mouse commented May 23, 2021

folamy commented May 23, 2021 •

edited

Loading

folamy commented May 23, 2021 •

edited

Loading

elf-mouse commented May 25, 2021

folamy commented May 25, 2021 •

edited

Loading

elf-mouse commented May 26, 2021 •

edited

Loading

elf-mouse commented May 26, 2021

folamy commented May 26, 2021 •

edited

Loading

elf-mouse commented May 27, 2021

folamy commented Jun 5, 2021 •

edited

Loading

elf-mouse commented Jun 8, 2021

folamy commented Jul 22, 2021

elf-mouse commented Jul 27, 2021 •

edited

Loading

SSR Support! #55

SSR Support! #55

Comments

folamy commented May 20, 2021

elf-mouse commented May 21, 2021

folamy commented May 21, 2021 • edited Loading

folamy commented May 21, 2021 • edited Loading

elf-mouse commented May 22, 2021 • edited Loading

folamy commented May 22, 2021 • edited Loading

folamy commented May 22, 2021

folamy commented May 22, 2021

elf-mouse commented May 23, 2021

elf-mouse commented May 23, 2021

folamy commented May 23, 2021 • edited Loading

folamy commented May 23, 2021 • edited Loading

elf-mouse commented May 25, 2021

folamy commented May 25, 2021 • edited Loading

elf-mouse commented May 26, 2021 • edited Loading

elf-mouse commented May 26, 2021

folamy commented May 26, 2021 • edited Loading

elf-mouse commented May 27, 2021

folamy commented Jun 5, 2021 • edited Loading

elf-mouse commented Jun 8, 2021

folamy commented Jul 22, 2021

elf-mouse commented Jul 27, 2021 • edited Loading

folamy commented May 21, 2021 •

edited

Loading

folamy commented May 21, 2021 •

edited

Loading

elf-mouse commented May 22, 2021 •

edited

Loading

folamy commented May 22, 2021 •

edited

Loading

folamy commented May 23, 2021 •

edited

Loading

folamy commented May 23, 2021 •

edited

Loading

folamy commented May 25, 2021 •

edited

Loading

elf-mouse commented May 26, 2021 •

edited

Loading

folamy commented May 26, 2021 •

edited

Loading

folamy commented Jun 5, 2021 •

edited

Loading

elf-mouse commented Jul 27, 2021 •

edited

Loading