Vitejs + React + Tauri app is broken after building #6801

prayag17 · 2023-04-26T10:55:58Z

prayag17
Apr 26, 2023

Hello I am building a tauri app with reactjs (Source Code: https://github.com/prayag17/JellyPlayer) and it runs perfectly fine when I run the app with npm run tauri dev but after building the application with npm run tauri build the application does launch but it shows a black screen.

Answered by FabianLars

Apr 26, 2023

I think i found the issue/solution, in case it helps i'll add all the steps i took:

i had to add prop-types and @tauri-apps/api so that it was able to build in the first place
I ran npm run tauri build -- --debug because i didn't want to wait for a release build
In the console i see this error:

Error

index-96322c44.js:4332  Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at yh (index-96322c44.js:7246:17)
    at q2 (index-96322c44.js:3584:23)
    at n2 (index-96322c44.js:3658:14)
    at J2 (index-96322c4…

View full answer

FabianLars · 2023-04-26T12:11:28Z

FabianLars
Apr 26, 2023
Maintainer

Did you already try a debug build?

You can do so by running npm run tauri build -- --debug and then opening the app from target/debug/.

These builds will have devtools enabled so you can check its console for errors.

6 replies

FabianLars Apr 26, 2023
Maintainer

Just to be explicit, npm run dev and npm run tauri build -- --debug are not the same thing. If you did differentiate between them already you can instead add the "devtools" feature flag to the tauri dependency in Cargo.toml, and then create a normal release build via npm run tauri build again. The feature flag enables the devtools for release builds too.

prayag17 Apr 26, 2023
Author

I ran the command npm run tauri build -- --debug but it seems to create build files at target/release not at target/debug. I was able to get devtools in prod build and it is giving me the error as follow:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

prayag17 Apr 26, 2023
Author

This error message tho doesn't tell which component or library is causing the issue

FabianLars Apr 26, 2023
Maintainer

I think i found the issue/solution, in case it helps i'll add all the steps i took:

i had to add prop-types and @tauri-apps/api so that it was able to build in the first place
I ran npm run tauri build -- --debug because i didn't want to wait for a release build
In the console i see this error:

Error

index-96322c44.js:4332  Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at yh (index-96322c44.js:7246:17)
    at q2 (index-96322c44.js:3584:23)
    at n2 (index-96322c44.js:3658:14)
    at J2 (index-96322c44.js:3770:16)
    at Yi (index-96322c44.js:4403:28)
    at Wk (index-96322c44.js:7130:9)
    at Vk (index-96322c44.js:6630:12)
    at Uk (index-96322c44.js:6623:5)
    at Jk (index-96322c44.js:6606:7)
    at Ok (index-96322c44.js:6322:8)
Mi @ index-96322c44.js:4332
index-96322c44.js:6732  Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at yh (index-96322c44.js:7246:17)
    at q2 (index-96322c44.js:3584:23)
    at n2 (index-96322c44.js:3658:14)
    at J2 (index-96322c44.js:3770:16)
    at Yi (index-96322c44.js:4403:28)
    at Wk (index-96322c44.js:7130:9)
    at Vk (index-96322c44.js:6630:12)
    at Uk (index-96322c44.js:6623:5)
    at Jk (index-96322c44.js:6606:7)
    at Ok (index-96322c44.js:6322:8)

Piping that into google surprisingly enough showed me the correct underlying issue already, for example this one: https://www.bergqvist.it/blog/2022/10/25/minified-react-error-in-production-with-vite-js.
I had my doubts so i went ahead and built react in dev mode: https://vitejs.dev/guide/env-and-mode.html#modes (scroll down to .env.testing, that's what i used plus modifying the build command in package.json to vite build --mode testing)
This is the new error i got:

Error

index-2df87f9a.js:2068  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at App.jsx:289.
    at App (https://tauri.localhost/assets/index-2df87f9a.js:114839:20)
    at Router (https://tauri.localhost/assets/index-2df87f9a.js:25580:15)
    at BrowserRouter (https://tauri.localhost/assets/index-2df87f9a.js:25809:5)
    at Provider (https://tauri.localhost/assets/index-2df87f9a.js:105462:10)
    at QueryClientProvider (https://tauri.localhost/assets/index-2df87f9a.js:48648:11)
printWarning2 @ index-2df87f9a.js:2068
index-2df87f9a.js:23323  Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at createFiberFromTypeAndProps (index-2df87f9a.js:23323:21)
    at createFiberFromElement (index-2df87f9a.js:23344:19)
    at createChild (index-2df87f9a.js:14272:30)
    at reconcileChildrenArray (index-2df87f9a.js:14465:29)
    at reconcileChildFibers2 (index-2df87f9a.js:14742:20)
    at reconcileChildren (index-2df87f9a.js:17185:33)
    at updateContextProvider (index-2df87f9a.js:18546:7)
    at beginWork (index-2df87f9a.js:18836:18)
    at HTMLUnknownElement.callCallback2 (index-2df87f9a.js:6559:18)
    at Object.invokeGuardedCallbackDev (index-2df87f9a.js:6584:20)
2index-2df87f9a.js:2068  Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at App.jsx:289.
    at App (https://tauri.localhost/assets/index-2df87f9a.js:114839:20)
    at Router (https://tauri.localhost/assets/index-2df87f9a.js:25580:15)
    at BrowserRouter (https://tauri.localhost/assets/index-2df87f9a.js:25809:5)
    at Provider (https://tauri.localhost/assets/index-2df87f9a.js:105462:10)
    at QueryClientProvider (https://tauri.localhost/assets/index-2df87f9a.js:48648:11)
printWarning2 @ index-2df87f9a.js:2068
index-2df87f9a.js:23323  Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at createFiberFromTypeAndProps (index-2df87f9a.js:23323:21)
    at createFiberFromElement (index-2df87f9a.js:23344:19)
    at createChild (index-2df87f9a.js:14272:30)
    at reconcileChildrenArray (index-2df87f9a.js:14465:29)
    at reconcileChildFibers2 (index-2df87f9a.js:14742:20)
    at reconcileChildren (index-2df87f9a.js:17185:33)
    at updateContextProvider (index-2df87f9a.js:18546:7)
    at beginWork (index-2df87f9a.js:18836:18)
    at HTMLUnknownElement.callCallback2 (index-2df87f9a.js:6559:18)
    at Object.invokeGuardedCallbackDev (index-2df87f9a.js:6584:20)
index-2df87f9a.js:16931  The above error occurred in the <EmotionThemeContext.Provider> component:

    at ThemeProvider$2 (https://tauri.localhost/assets/index-2df87f9a.js:32358:5)
    at ThemeProvider$1 (https://tauri.localhost/assets/index-2df87f9a.js:32413:5)
    at ThemeProvider (https://tauri.localhost/assets/index-2df87f9a.js:34715:12)
    at SnackbarProvider2 (https://tauri.localhost/assets/index-2df87f9a.js:36259:24)
    at App (https://tauri.localhost/assets/index-2df87f9a.js:114839:20)
    at Router (https://tauri.localhost/assets/index-2df87f9a.js:25580:15)
    at BrowserRouter (https://tauri.localhost/assets/index-2df87f9a.js:25809:5)
    at Provider (https://tauri.localhost/assets/index-2df87f9a.js:105462:10)
    at QueryClientProvider (https://tauri.localhost/assets/index-2df87f9a.js:48648:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ index-2df87f9a.js:16931
index-2df87f9a.js:22293  Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at createFiberFromTypeAndProps (index-2df87f9a.js:23323:21)
    at createFiberFromElement (index-2df87f9a.js:23344:19)
    at createChild (index-2df87f9a.js:14272:30)
    at reconcileChildrenArray (index-2df87f9a.js:14465:29)
    at reconcileChildFibers2 (index-2df87f9a.js:14742:20)
    at reconcileChildren (index-2df87f9a.js:17185:33)
    at updateContextProvider (index-2df87f9a.js:18546:7)
    at beginWork (index-2df87f9a.js:18836:18)
    at beginWork$1 (index-2df87f9a.js:22633:18)
    at performUnitOfWork (index-2df87f9a.js:22081:17)

The last error mentions line 289 meaning it's about Konami
I add the code from the page above and it works :)

import Konami from 'react-konami-code';
// @ts-ignore
const Kon = Konami.default ? Konami.default : Konami;

// ...
// Using Kon instead of Konami in line 289 now.

Answer selected by prayag17

prayag17 Apr 26, 2023
Author

Brooooo, Thank you so much!! I was not able to get the full error msg with vite cause I only set the build.minify prop to false 🤦‍♂️. I did search for the error on google and it gave the the same result as yours but not knowing which lib was faulty made it more difficult to track down. Thank you so much tho

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vitejs + React + Tauri app is broken after building #6801

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Vitejs + React + Tauri app is broken after building #6801

prayag17 Apr 26, 2023

Replies: 1 comment · 6 replies

FabianLars Apr 26, 2023 Maintainer

FabianLars Apr 26, 2023 Maintainer

prayag17 Apr 26, 2023 Author

prayag17 Apr 26, 2023 Author

FabianLars Apr 26, 2023 Maintainer

prayag17 Apr 26, 2023 Author

prayag17
Apr 26, 2023

Replies: 1 comment 6 replies

FabianLars
Apr 26, 2023
Maintainer

FabianLars Apr 26, 2023
Maintainer

prayag17 Apr 26, 2023
Author

prayag17 Apr 26, 2023
Author

FabianLars Apr 26, 2023
Maintainer

prayag17 Apr 26, 2023
Author