Closed kevinold closed 3 years ago
FYI I was able to get the app running on vite here: https://github.com/yyx990803/cypress-realworld-app/commit/e06faa9a5b0eab4eb384b86354f7923b63300c82
Steps needed:
The dependency react-virtualized
contains a bogus import in its ESM file (see issue) which causes the dep pre-bundling to fail. This is a bug in this dep that needs to be patched manually. I don't know how webpack allows this to even build.
Move index.html
out of public
. See https://vitejs.dev/guide/#project-root - with Vite index.html
is your app's entry point never put it in public
.
Remove all the %PUBLIC_URL%
references in index.html
- Vite does't need these and will automatically rebase the urls on build.
Add <script type="module" src="/src/index.tsx"></script>
to index.html
The app contains imports to two deps that are not listed in dependencies
: lodash
and faker
. Vite is strict on dependencies and will error on these, so add them to dependencies
in package.json
.
The code imports lodash/fp
which is a deep import - this needs to be added to optimizeDeps.include
in vite.config.js
.
The code imports SVGs as React components. This is not something that Vite supports out of the box so I simply removed references to them.
Now the app works!
The code imports SVGs as React components
vite-plugin-svgr could help in this case. It is already used in our production build.
@yyx990803 @pd4d10
Thanks for the feedback.
vite @2.0.0-beta.50
with the updates suggested (https://github.com/vitejs/vite/issues/1652#issuecomment-765875146 and https://github.com/vitejs/vite/issues/1652#issuecomment-765880015) with the exception of moving index.html
out of public
https://github.com/cypress-io/cypress-realworld-app/pull/741dev:vite
script is updated to point to public
per the docs: "dev:vite": "NODE_ENV=development vite --debug public"
react-virtualized
(https://github.com/bvaughn/react-virtualized/issues/1632) and what appears to be a warning from xstate
Your PR did not show how you were able to get around the react-virtualized
error to boot the application.
Would you explain?
$ cypress-realworld-app git:(kevin/vite) ✗ yarn dev:vite
yarn run v1.22.4
$ NODE_ENV=development vite --debug public
[dotenv][DEBUG] did not match key and value when parsing line 13:
[dotenv][DEBUG] did not match key and value when parsing line 14:
[dotenv][DEBUG] did not match key and value when parsing line 15: # OKTA SAML - SimpleSamlPHP
[dotenv][DEBUG] did not match key and value when parsing line 26:
[dotenv][DEBUG] did not match key and value when parsing line 27:
[dotenv][DEBUG] did not match key and value when parsing line 28: # OKTA SAML - Shibboleth
[dotenv][DEBUG] did not match key and value when parsing line 39:
[dotenv][DEBUG] did not match key and value when parsing line 40: # Box.com OAuth2
[dotenv][DEBUG] did not match key and value when parsing line 47:
[dotenv][DEBUG] did not match key and value when parsing line 48: # Microsoft OAuth2
[dotenv][DEBUG] did not match key and value when parsing line 54:
Optimizable dependencies detected:
@material-ui/core, @material-ui/icons, @material-ui/lab, @xstate/react, axios, clsx, date-fns, dinero.js, faker, formik, history, lodash, react, react-dom, react-infinite-calendar, react-number-format, react-router, react-router-dom, react-virtualized, shortid, uuid, xstate, yup, lodash/fp
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies or config have changed)
> node_modules/xstate/es/invokeUtils.js: warning: Ignoring this import because "node_modules/xstate/es/actions.js" was marked as having no side effects
3 │ import './actions.js';
╵ ~~~~~~~~~~~~~~
node_modules/xstate/package.json: note: "sideEffects" is false in the enclosing "package.json" file
8 │ "sideEffects": false,
╵ ~~~~~~~~~~~~~
> node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js: error: No matching export for import "bpfrpt_proptype_WindowScroller"
74 │ import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 warning and 1 error
(node:50903) UnhandledPromiseRejectionWarning: Error: Build failed with 1 error:
node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js:74:9: error: No matching export for import "bpfrpt_proptype_WindowScroller"
at failureErrorWithLog (/Users/kevinold/cypress-repos/cypress-realworld-app/node_modules/esbuild/lib/main.js:969:15)
at buildResponseToResult (/Users/kevinold/cypress-repos/cypress-realworld-app/node_modules/esbuild/lib/main.js:767:32)
at /Users/kevinold/cypress-repos/cypress-realworld-app/node_modules/esbuild/lib/main.js:819:20
at handleIncomingPacket (/Users/kevinold/cypress-repos/cypress-realworld-app/node_modules/esbuild/lib/main.js:566:9)
at Socket.readFromStdout (/Users/kevinold/cypress-repos/cypress-realworld-app/node_modules/esbuild/lib/main.js:482:7)
at Socket.emit (events.js:315:20)
at addChunk (_stream_readable.js:295:12)
at readableAddChunk (_stream_readable.js:271:9)
at Socket.Readable.push (_stream_readable.js:212:10)
at Pipe.onStreamRead (internal/stream_base_commons.js:186:23)
(node:50903) 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:50903) [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.
You need to manually remove that line, because that import simply doesn't exist. It's a bug in the dependency that webpack/rollup somehow tolerates. esbuild, which Vite uses to pre-bundle the dependencies, is pretty strict about broken imports so there's no way around that.
I opened an issue in react-virtualized
: https://github.com/bvaughn/react-virtualized/issues/1632 - but the project seems to be no longer actively maintained so a fix probably can't be expected. You may need something like patch-package to automate the fix locally.
Also, your script vite --debug public
is wrong because the --debug
flag expects an argument and public
will be interpreted as the debug flag instead of the server root. The root
option should preferrably be placed before all other --*
flags.
I still strongly recommend against putting index.html
inside public
. More reasoning here. <root>/public
is also a special directory for Vite (for static assets that should copied to dist verbatim) so it's better to use the actual project root as root.
In other words, please don't try to bend Vite to work like CRA because they are conceptually different.
Also, your script
vite --debug public
is wrong because the--debug
flag expects an argument andpublic
will be interpreted as the debug flag instead of the server root. Theroot
option should preferrably be placed before all other--*
flags.I still strongly recommend against putting
index.html
insidepublic
. More reasoning here.<root>/public
is also a special directory for Vite (for static assets that should copied to dist verbatim) so it's better to use the actual project root as root.In other words, please don't try to bend Vite to work like CRA because they are conceptually different.
Thanks for this information. I do want to understand why index.html
must be in the root of a project. Most frontend projects I encounter keep source and assets in directories such as src
and public
. This allows for tooling in scripts
, cypress
, test
, etc directories to be placed at the root of the repository. Placing index.html
in the root of a repository implies that the developer must place any scripts (e.g. deployment and or testing), tests, etc along side their infrastructure and testing code.
See the RWA repo and all of the files and directories in the root of the project.
The goal is not to bend vite to work like CRA, but to aid in adoption for folks to be able to migrate to Vite without reorganizing existing projects.
webpack tends to make people think of main.js
as the entry point and html as an after thought - That is not true in Vite. index.html
is source code and part of the module graph in Vite. IMO it's special enough to be placed in the project root.
You can put index.html
in src
and use src
as Vite root if you want - but you'll then have to move public
into src
as well, because for now public
must be inside Vite root to be automatically served.
In fact, assets are also part of the module graph (when import
ed from js they expose the built URL), and it's preferred to put assets next to feature source files in large projects. This makes it easier to organize assets for sub modules (e.g. each page can have its own nested assets directory). public
is only meant for static assets that must retain their exact location in the dist build like robots.txt
or favicon.ico
.
This makes sense. Thanks for your help and explanations. I appreciate your work on Vite and am excited to use it.
Hey @yyx990803 thanks for creating vite 👍🏼
I was reading through this issue and thought if we could configure vite in way to ignore es builds for certain 3rd party dependencies.
I simulated this behaviour by removing the es
folder and any reference within package.json
from react-virtualized. This fix obviously works only until you run npm install
again ;)
Wdyt?
Describe the bug
Ultimately the following errors/restrictions are preventing the application from booting.
The app is open sourced and a PR tracking the configuration of vite is here: https://github.com/cypress-io/cypress-realworld-app/pull/741
The goal is to use vite as a replacement or in conjunction with create-react-app tooling.
The following is logged after configuring a create-react-app based app to use vite.
In addition to these logs, the site does not load, but gets stuck on compilation of
istanbul
ignore comment like so:https://github.com/cypress-io/cypress-realworld-app/blob/develop/src/machines/dataMachine.ts#L124
There are additional throughout the codebase which may be seen here: https://github.com/cypress-io/cypress-realworld-app/search?q=istanbul+ignore+next
One oddity is that with our
index.html
located inpublic
, we must usehttp://localhost:3000/public/index.html
to navigate to the site.Reproduction
yarn install
yarn vite
System Info
vite
version: 2.0.0-beta.36Logs