feat: add Vite & Storybook; delete Parcel

[stevending1st]

No description provided.

[TechQuery]

Vite bundles import() into UMD without async loading, which is different with ESM:

Source code

Idea-React/source/OpenMap/index.tsx

Line 19 in 1ef0e5b

const Map = lazy(() => import('./core'));

Next.js 12 error

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///D:/Work/idea2app/IdeaMall/PWA/node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet-src.js (230:19)
<unknown>
file:///D:/Work/idea2app/IdeaMall/PWA/node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet-src.js (7:66)
Object.<anonymous>
file:///D:/Work/idea2app/IdeaMall/PWA/node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet-src.js (10:3)
Module._compile
node:internal/modules/cjs/loader (1196:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1250:10)
Module.load
node:internal/modules/cjs/loader (1074:32)
Function.Module._load
node:internal/modules/cjs/loader (909:12)
Module.require
node:internal/modules/cjs/loader (1098:19)
require
node:internal/modules/cjs/helpers (108:18)
Object.<anonymous>
file:///D:/Work/idea2app/IdeaMall/PWA/node_modules/.pnpm/@react-leaflet+core@1.1.1_leaflet@1.9.4_react-dom@17.0.2_react@17.0.2/node_modules/@react-leaflet/core/cjs/dom.js (8:16)

Bundle structure

Possible solutions

1. https://babeljs.io/docs/babel-plugin-transform-modules-umd
2. https://vitejs.dev/guide/features.html#dynamic-import
3. https://stackoverflow.com/a/76303955
4. https://sambitsahoo.com/blog/vite-code-splitting-that-works.html