Skip to main content

· One min read

I recently upgraded the Storybook from v6.1.11 to v6.4.19 in my company's project, but the process is not smooth. I met the two issues on my upgrading.

Issues on Storybook 6.4 upgrading

Issue1: Missing class properties transform

Solution: add the below code to the ./storybook/main.js.

module.exports = {
babel: async (options) => ({
plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],

Issue2: iframe.html no longer built with --preview-url

My storybook website runs in a subpath domain so should add --preview-url on the build command, but sadly find iframe.html no longer generated after upgrading.

The solved way is adding the option --force-build-preview to the build command.


· One min read

If you want to use Vite to build the React Okta App, you maybe face some incompatible issues. I will share some of my research in this post.

Vite with React Okta App

Issue 1: Uncaught TypeError: Class extends value undefined is not a constructor or null

As the Okta's staff said, It's a known issue with the ESM bundle of okta-auth-js.

So, we should add the below into the vite.config.ts

resolve: {
alias: [
find: '@okta/okta-auth-js',
replacement: require.resolve(

Issue2: Security.tsx:99 Uncaught ReferenceError: process is not defined

Solution: Add the below code to the vite.config.ts

define: {
'process.env': process.env

You can find the final version code on okta-demo.