Unable to boot create-react-app based project migrating to vite #1652
Comments
|
FYI I was able to get the app running on vite here: yyx990803/cypress-realworld-app@e06faa9 Steps needed:
Now the app works! |
vite-plugin-svgr could help in this case. It is already used in our production build. |
|
Thanks for the feedback.
Your PR did not show how you were able to get around the 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 |
|
Also, your script I still strongly recommend against putting 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 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 You can put In fact, assets are also part of the module graph (when |
|
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 👍🏼 |
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: cypress-io/cypress-realworld-app#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
istanbulignore 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.htmllocated inpublic, we must usehttp://localhost:3000/public/index.htmlto navigate to the site.Reproduction
yarn installyarn viteSystem Info
viteversion: 2.0.0-beta.36Logs
The text was updated successfully, but these errors were encountered: