chore: vite migration #1955

flagrede · 2023-07-05T13:11:07Z

Description

Pending Storybook dev server fix.

replace CRA by Vite
migrate storybook to V7

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

provided a link to the relevant issue or specification
provided instructions on how to test
reviewed "Files changed" and left comments if necessary
confirmed all CI checks have passed

How to test

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

confirmed all author checklist items have been addressed
reviewed code correctness and readability
verified React components follow DRY principles
reviewed documentation is accurate
reviewed tests
manually tested (if applicable)

netlify · 2023-07-05T13:11:13Z

✅ Deploy Preview for regen-website ready!

Name	Link
🔨 Latest commit	`3a4e765`
🔍 Latest deploy log	https://app.netlify.com/sites/regen-website/deploys/64b7ab4ec6ce0b00086af940
😎 Deploy Preview	https://deploy-preview-1955--regen-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

blushi · 2023-07-18T10:52:14Z

With a fresh regen-web install, I can't reproduce the storybook dev server issue locally as described in https://www.notion.so/regennetwork/Engineering-Architecture-2023-07-06-c686348bcb2941ee8c0961a34589f3d2
Maybe some local cache issue that @flagrede had? storybookjs/storybook#22808 (comment)
So I've just rebased dev and requesting reviews on this, it would be good to test the storybook dev server works for you too @wgwz @ryanchristo

blushi · 2023-07-18T12:04:10Z

web-registry/vite.config.ts

+ vitePluginRequire(),
+ visualizer(),
+ ],
+ define: isDev ? { global: {} } : { 'process.env': {} },


see vitejs/vite#1973
we were getting errors when trying to login because @keplr-wallet/stores uses process.env internally

why would they not support process.env? 🤦

blushi · 2023-07-18T12:16:31Z

@erikalogie could you test that everything is working as expected on https://deploy-preview-1955--regen-registry.netlify.app/? Thanks!

erikalogie · 2023-07-18T14:37:29Z

Ok @blushi this is what I found so far but I'm going to keep testing:

This is a bit weird but is this just a metadata issue? https://monosnap.com/file/SrdM9rP9Dp5X4hFo6y59dQtc0Hn376

The impact cards width is not correct on project pages, should be as wide as the column and the OTC card below: https://monosnap.com/file/t5ZAGdCzMxq1LAh0WdcSpYkWeBHem2

No map is showing up at the top of some of the project pages: https://deploy-preview-1955--regen-registry.netlify.app/project/C02-016

or for example here there is a location but the map is blank: https://monosnap.com/file/sWiau7inTsnbqJxMqv0HvzhWSTLpb5

ryanchristo · 2023-07-18T15:14:32Z

I'm receiving the following error on the storybook dev server:

ReferenceError: require is not defined

blushi · 2023-07-18T15:16:54Z

I'm receiving the following error on the storybook dev server:
ReferenceError: require is not defined

have you rebuilt the web-components? (by rerunning for instance yarn watch?)
I would also suggest to rm all your node_modules and re-install

wgwz · 2023-07-18T15:26:49Z

With a fresh regen-web install, I can't reproduce the storybook dev server issue locally as described in https://www.notion.so/regennetwork/Engineering-Architecture-2023-07-06-c686348bcb2941ee8c0961a34589f3d2 Maybe some local cache issue? storybookjs/storybook#22808 (comment) So I've just rebased dev and requesting reviews on this, it would be good to test the storybook dev server works for you too

@blushi i used a fresh clone of the regen-web repo just in case, but even after doing that and running this sequence of commands i'm seeing some errors:

Commands:

$ yarn
$ yarn watch
$ yarn storybook

I.e. this storybook component works ok:

but then for "tx successful modal" i'm seeing this:

wgwz · 2023-07-18T15:35:23Z

Similarly for the image storybook component i'm seeing:

But the "action" component that @ryanchristo was having an issue with seems to be working OK for me:

ryanchristo

tACK

The issues erika identified seem to be unrelated to the migration itself so we should track those items separately if we feel they need to be addressed.

I got storybook running in my local environment and am now seeing the same errors kyle identified but the image error seems to be working on the deploy preview.

If we can resolve the undefined buffer errors in the modal section, that would be the one new issue I see, but if this is blocking regen-network/rnd-dev-team#1537 and the solution is not straightforward, I'm ok with addressing in a followup.

blushi · 2023-07-19T07:51:52Z

This is a bit weird but is this just a metadata issue? https://monosnap.com/file/SrdM9rP9Dp5X4hFo6y59dQtc0Hn376

This is on dev too, somehow the story is in the anchored metadata for this project (it should only be in the unanchored data), I suspect this might have occurred while developing/testing and is not related to the changes here.

The impact cards width is not correct on project pages, should be as wide as the column and the OTC card below: https://monosnap.com/file/t5ZAGdCzMxq1LAh0WdcSpYkWeBHem2

This is on dev too, so probably we should open up a separate issue to fix this.

No map is showing up at the top of some of the project pages: https://deploy-preview-1955--regen-registry.netlify.app/project/C02-016

or for example here there is a location but the map is blank: https://monosnap.com/file/sWiau7inTsnbqJxMqv0HvzhWSTLpb5

This was because we were missing the mapbox token in the env variables (since migrating to vite made us change the env variables names), it's fixed now.

blushi · 2023-07-19T08:27:15Z

Similarly for the image storybook component i'm seeing:

We were still using process.env in our storybook stories so I updated this as well to use import.meta.env instead...

blushi · 2023-07-19T09:26:40Z

If we can resolve the undefined buffer errors in the modal section, that would be the one new issue I see, but if this is blocking regen-network/regen-registry#1537 and the solution is not straightforward, I'm ok with addressing in a followup.

Found a workaround in the mean time but we can definitely fix this in a separate issue. See my comment in 3a4e765#diff-575d6b1c6b6f565f9b9037a316bbd68ab89898eeeab004bff7d6e79e0e512860R177-R179

erikalogie · 2023-07-19T11:33:23Z

This is a bit weird but is this just a metadata issue? https://monosnap.com/file/SrdM9rP9Dp5X4hFo6y59dQtc0Hn376

This is on dev too, somehow the story is in the anchored metadata for this project (it should only be in the unanchored data), I suspect this might have occurred while developing/testing and is not related to the changes here.

Ok, will ignore for now.

The impact cards width is not correct on project pages, should be as wide as the column and the OTC card below: https://monosnap.com/file/t5ZAGdCzMxq1LAh0WdcSpYkWeBHem2

This is on dev too, so probably we should open up a separate issue to fix this.

Ok, I opened a task for this https://app.zenhub.com/workspaces/rnd-dev-team-5f8998bec8958d000f4609e2/issues/gh/regen-network/regen-registry/1762

flagrede force-pushed the chore-1316-vite-migration branch 2 times, most recently from ac121b2 to ba35dab Compare July 5, 2023 15:01

flagrede and others added 16 commits July 18, 2023 12:19

chore: migrate to vite

9ad5b45

chore: bump analytics

068aebe

fix: remove global define

629caf1

fix: analytics build issue

ce87067

chore: update tsconfig

011b681

fix: define global

c984987

fix: rename CookiesBanner to CookiesTopBanner

5b6b2de

fix: double import issue

4e3f789

chore: change output directory

f21b00b

fix: baseUrl param

c65e64e

chore: migrate storybook to v7 and vite

bfcd91a

fix: storybook build

89de603

chore: bump dependencies

e36243e

chore: bump dependencies

4a1dcb8

chore: bump vite

fcdab96

fix: wrong conflict resolution

b537a89

blushi force-pushed the chore-1316-vite-migration branch from 0845e7b to b537a89 Compare July 18, 2023 10:32

chore: revert web-auth

0a83d69

blushi force-pushed the chore-1316-vite-migration branch from 406b229 to 0a83d69 Compare July 18, 2023 11:45

fix: undefined process in build coming from keplr-wallet

830bc97

blushi reviewed Jul 18, 2023

View reviewed changes

blushi requested a review from a team July 18, 2023 12:04

ryanchristo approved these changes Jul 18, 2023

View reviewed changes

fix: env var in web-storybook

a5da633

blushi added 2 commits July 19, 2023 10:36

fix: storybook build

b3f2ceb

fix: temporarily rm basketTake/basketPut modal stories

3a4e765

blushi mentioned this pull request Jul 19, 2023

Fix storybook issues related to Vite migration #1974

Closed

blushi merged commit a23fab8 into dev Jul 20, 2023
14 checks passed

blushi deleted the chore-1316-vite-migration branch July 20, 2023 09:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: vite migration #1955

chore: vite migration #1955

flagrede commented Jul 5, 2023 •

edited

Loading

netlify bot commented Jul 5, 2023 •

edited

Loading

blushi commented Jul 18, 2023

blushi Jul 18, 2023 •

edited

Loading

wgwz Jul 18, 2023

blushi commented Jul 18, 2023

erikalogie commented Jul 18, 2023

ryanchristo commented Jul 18, 2023

blushi commented Jul 18, 2023

wgwz commented Jul 18, 2023

wgwz commented Jul 18, 2023 •

edited

Loading

ryanchristo left a comment •

edited

Loading

blushi commented Jul 19, 2023 •

edited

Loading

blushi commented Jul 19, 2023

blushi commented Jul 19, 2023

erikalogie commented Jul 19, 2023 •

edited

Loading

chore: vite migration #1955

chore: vite migration #1955

Conversation

flagrede commented Jul 5, 2023 • edited Loading

Description

Author Checklist

How to test

Reviewers Checklist

netlify bot commented Jul 5, 2023 • edited Loading

✅ Deploy Preview for regen-website ready!

blushi commented Jul 18, 2023

blushi Jul 18, 2023 • edited Loading

Choose a reason for hiding this comment

wgwz Jul 18, 2023

Choose a reason for hiding this comment

blushi commented Jul 18, 2023

erikalogie commented Jul 18, 2023

ryanchristo commented Jul 18, 2023

blushi commented Jul 18, 2023

wgwz commented Jul 18, 2023

wgwz commented Jul 18, 2023 • edited Loading

ryanchristo left a comment • edited Loading

Choose a reason for hiding this comment

blushi commented Jul 19, 2023 • edited Loading

blushi commented Jul 19, 2023

blushi commented Jul 19, 2023

erikalogie commented Jul 19, 2023 • edited Loading

flagrede commented Jul 5, 2023 •

edited

Loading

netlify bot commented Jul 5, 2023 •

edited

Loading

blushi Jul 18, 2023 •

edited

Loading

wgwz commented Jul 18, 2023 •

edited

Loading

ryanchristo left a comment •

edited

Loading

blushi commented Jul 19, 2023 •

edited

Loading

erikalogie commented Jul 19, 2023 •

edited

Loading