850 feature request migrate to vite #882

DonKoko · 2024-03-26T15:40:43Z

Migrating shelf to Vite thanks to @rphlmr
Most files changed are cleanup to make Vite work.
We have completely removed barrel imports as they don't work with Vite.
Moreover relevant changes are:

Added vite.config
server middleware is slightly adjusted
updated dockerfiles
fixing css imports to be Vite compliant
Server middleware is slightly adjusted to handle new folder/file structure

Remove barrel imports

vite migration

DonKoko · 2024-03-27T06:33:17Z

@rphlmr I found an issue. react-map-gl doesn't work with vite.
In order to test it you need to scan a QR and allow the app to access your location.
Once the location is saved in the DB, the app will attempt to render the map on the asset page. That will break the asset page. This is the error the app throws:

  <-- GET /assets/react_devtools_backend_compact.js.map
[23:34:15.405] ERROR (58893): The asset you are trying to access does not exist or you do not have permission to access it.
    err: {
      "cause": {
        "name": "NotFoundError",
        "code": "P2025",
        "clientVersion": "5.10.2",
        "stack":
            NotFoundError: No Asset found
                at /Users/donkoko/devs/shelf/webapp/node_modules/@prisma/client/runtime/library.js:32:611
                at async /Users/donkoko/devs/shelf/webapp/node_modules/@prisma/client/runtime/library.js:32:551
                at async Module.getAsset (/Users/donkoko/devs/shelf/webapp/app/modules/asset/service.server.ts:44:12)
                at async loader (/Users/donkoko/devs/shelf/webapp/app/routes/_layout+/assets.$assetId.tsx:101:19)
                at async Object.callRouteLoaderRR (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/data.js:52:16)
                at async callLoaderOrAction (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:4166:16)
                at async Promise.all (index 3)
                at async loadRouteData (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3638:19)
                at async queryImpl (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3481:20)
                at async Object.query (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3381:18)
                at async handleDocumentRequestRR (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/server.js:184:15)
                at async requestHandler (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/server.js:108:18)
                at async file:///Users/donkoko/devs/shelf/webapp/node_modules/remix-hono/build/handler.js:7:16
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async file:///Users/donkoko/devs/shelf/webapp/node_modules/remix-hono/build/session.js:19:9
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async logger2 (/Users/donkoko/devs/shelf/webapp/server/logger.ts:46:3)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async eval (/Users/donkoko/devs/shelf/webapp/server/middleware.ts:75:5)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async eval (/Users/donkoko/devs/shelf/webapp/server/middleware.ts:75:5)
                at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
                at async file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/hono-base.js:188:25
                at async getRequestListener.errorHandler.err (file:///Users/donkoko/devs/shelf/webapp/node_modules/@hono/vite-dev-server/dist/dev-server.js:87:32)
                at async responseViaResponseObject (file:///Users/donkoko/devs/shelf/webapp/node_modules/@hono/node-server/dist/index.mjs:300:15)
      },
      "label": "Assets",
      "title": "Asset not found",
      "additionalData": {
        "id": "react_devtools_backend_compact.js.map",
        "organizationId": "clu021ne5000011g39745fvxm"
      },
      "shouldBeCaptured": true,
      "status": 500,
      "traceId": "srxw2shu6mwtr59fqm7fwcof",
      "name": "ShelfError",
      "message": "The asset you are trying to access does not exist or you do not have permission to access it.",
      "stack":
          ShelfError: The asset you are trying to access does not exist or you do not have permission to access it.
              at Module.makeShelfError (/Users/donkoko/devs/shelf/webapp/app/utils/error.ts:46:12)
              at loader (/Users/donkoko/devs/shelf/webapp/app/routes/_layout+/assets.$assetId.tsx:143:43)
              at async Object.callRouteLoaderRR (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/data.js:52:16)
              at async callLoaderOrAction (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:4166:16)
              at async Promise.all (index 3)
              at async loadRouteData (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3638:19)
              at async queryImpl (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3481:20)
              at async Object.query (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/router/dist/router.cjs.js:3381:18)
              at async handleDocumentRequestRR (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/server.js:184:15)
              at async requestHandler (/Users/donkoko/devs/shelf/webapp/node_modules/@remix-run/server-runtime/dist/server.js:108:18)
              at async file:///Users/donkoko/devs/shelf/webapp/node_modules/remix-hono/build/handler.js:7:16
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async file:///Users/donkoko/devs/shelf/webapp/node_modules/remix-hono/build/session.js:19:9
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async logger2 (/Users/donkoko/devs/shelf/webapp/server/logger.ts:46:3)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async eval (/Users/donkoko/devs/shelf/webapp/server/middleware.ts:75:5)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async eval (/Users/donkoko/devs/shelf/webapp/server/middleware.ts:75:5)
              at async dispatch (file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/compose.js:29:17)
              at async file:///Users/donkoko/devs/shelf/webapp/node_modules/hono/dist/hono-base.js:188:25
              at async getRequestListener.errorHandler.err (file:///Users/donkoko/devs/shelf/webapp/node_modules/@hono/vite-dev-server/dist/dev-server.js:87:32)
              at async responseViaResponseObject (file:///Users/donkoko/devs/shelf/webapp/node_modules/@hono/node-server/dist/index.mjs:300:15)
    }

However its actually the ShelfMap component that breaks. I saw that you placed a comment in the file, linking to a github discussion (visgl/react-map-gl#2272) however the fix you did doesn't seem to work. I also read the discussion and I tried to install 7.2.0-beta.1 but that also didn't work for me but I am not sure why.
The imports would just fail:

You can check this repo: https://github.com/tordans/berlin-bikenetwork-monitoring/blob/main/package.json. They are not using vite, but he is using 7.2.0-beta.1 and it seems to work.

rphlmr · 2024-03-27T10:53:38Z

@DonKoko I pushed a fix. I hope it solves the issue on staging env

DonKoko · 2024-04-01T09:58:47Z

Something I noticed when I was testing an un-related task.
So if you scan a qr code, it usually redirects you to the asset page with some url params. When redirected after a scanning of a QR code we automatically show the actions dropdown.
For some reason this is not working in the vite branch. I tried it in a few different branches and there was no issue.

You can see in the screenshot the overlay shows but not the menu.

It should look like this

So after some testing and switching between branches, i realized that if I dont run npm i after switching away from vite branch, it doesn't work again, so I assume its because of this: https://github.com/Shelf-nu/shelf.nu/pull/882/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R49

Was there something related to vite that required this update?

P.S. I have temporarily removed vite from staging app so we can test some other features.

rphlmr · 2024-04-01T12:37:43Z

Thanks for sharing.
I'll look at that asap.
The reason why I have updated radix dependencies is because they improve esm support. Some dependencies were causing issues.
https://www.radix-ui.com/primitives/docs/overview/releases
Except select, they all are minors.
I'll come back with a fix.

DonKoko · 2024-04-01T12:40:17Z

@rphlmr yeah i tried setting Dropdown dependency back to the prev version, but indeed the import was then broken. So we have to figure out a bit more about this. Glad we left vite in testapp for some more time. This is such a specific case, finding it was honestly kinda tricky and just got lucky.

rphlmr · 2024-04-02T17:05:09Z

@DonKoko action dropdown should be ok
cf 5deeb24

rphlmr and others added 30 commits March 22, 2024 09:44

upgrade to vite

d9754a0

add required config for tailwind

41ef61c

removing all barrel imports from components folder

0d02f98

automatic linting fixes

400a18b

changing db barrel + automatic linting fixes

fa7bf50

remove barrels from hooks folder

3ddba8c

removing barrels from integrations folder

3a7aeee

remove barrels from modules folder and all subfolders

2a9a1ba

automatic linting fixes

3a9ed8a

remove barrel imports from utils folder

99323fd

automatic linting fixes

cf526fd

Merge pull request #876 from Shelf-nu/remove-barrel-imports

7c727b3

Remove barrel imports

Merge branch 'main' into 850/vite

8cbdb42

Merge branch '850-feature-request-migrate-to-vite' into 850/vite

243d99b

fix doc

f7b4409

fix merge conflict

e9c7a6f

fix type error

38aee0c

migrate css imports

8ea6613

Remove deprecated LiveReload

6b37e0d

Remove "use client"

da653f2

update for esm support

652fbac

update custom server

eab75d8

fix vite dev reload on navigate

0a8a56d

remove css bundle

ca8b3ec

fix unit test

add9a8d

fix scan device name

01420c2

vite: stabilize dev env

852f8f1

migrate remix type definition

0b8b704

fix vite build issue

a2f86b7

migrate production build

f4244ec

DonKoko and others added 9 commits March 25, 2024 16:08

Merge branch 'main' into 850-feature-request-migrate-to-vite

de4bef6

prevent routes with a ?t= params to be catched by the dev server

517cc30

Merge branch '850-feature-request-migrate-to-vite' into 850/vite

a10abc2

serve new Remix build (vite)

6db8d79

merging main and fixing conflicts

36a9eab

Merge branch '850-feature-request-migrate-to-vite' into 850/vite

58e22c8

fix serve public files in dev

8ec00b7

remove useless code

456aad7

Merge pull request #874 from rphlmr/850/vite

989e56e

vite migration

DonKoko linked an issue Mar 26, 2024 that may be closed by this pull request

[Feature request]: Migrate to Vite #850

Closed

DonKoko mentioned this pull request Mar 26, 2024

vite migration #874

Merged

5 tasks

Fix map crash

87fd6e8

DonKoko mentioned this pull request Apr 1, 2024

[Feature request]: Create a flow to link an 'unclaimed tag' to an existing asset #829

Closed

rphlmr added 2 commits April 2, 2024 17:47

merging main and fixing conflicts

8d1b852

fix qr actions dropdown display on mobile

5deeb24

rphlmr and others added 6 commits April 2, 2024 19:17

excludes new Remix 2.9.0 single fetch .data responses

1428441

update with main and fix conflicts

664f8bb

re-install packages

0f015e7

update with main and fix conflicts

d9dacbd

fix email image attachment

19de0ec

merge with main and fix conflicts

df2234c

DonKoko merged commit 6b2fd83 into main Apr 15, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

850 feature request migrate to vite #882

850 feature request migrate to vite #882

DonKoko commented Mar 26, 2024

DonKoko commented Mar 27, 2024

rphlmr commented Mar 27, 2024

DonKoko commented Apr 1, 2024 •

edited

rphlmr commented Apr 1, 2024 •

edited

DonKoko commented Apr 1, 2024

rphlmr commented Apr 2, 2024

850 feature request migrate to vite #882

850 feature request migrate to vite #882

Conversation

DonKoko commented Mar 26, 2024

DonKoko commented Mar 27, 2024

rphlmr commented Mar 27, 2024

DonKoko commented Apr 1, 2024 • edited

rphlmr commented Apr 1, 2024 • edited

DonKoko commented Apr 1, 2024

rphlmr commented Apr 2, 2024

DonKoko commented Apr 1, 2024 •

edited

rphlmr commented Apr 1, 2024 •

edited