Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] blank screen running a build (maybe related to nuxt v3 rc?) #4098

Closed
meadowsys opened this issue May 10, 2022 · 10 comments
Closed

[bug] blank screen running a build (maybe related to nuxt v3 rc?) #4098

meadowsys opened this issue May 10, 2022 · 10 comments

Comments

@meadowsys
Copy link
Contributor

meadowsys commented May 10, 2022

Describe the bug

Creating proper builds (release tauri build and debug tauri build --debug) both don't work at all, while development server does work. Development server (tauri dev) works fine, displaying content as expected from the development server. With either a release or a debug build, all that is shown is a white screen.

I am attempting to use tauri with the nuxt v3 release candidate.

Opening the console in a development build shows this:

image

elements shows this:

elements screenshot

It appears to be similar to what .output/public/index.html contains:

<!DOCTYPE html>
<html >

<head >
  <link rel="stylesheet" href="/_nuxt/entry.f1888983.css">
</head>

<body >
  <!-- unminified the body for more readability -->
  <div id="__nuxt"></div>
  <script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script>
  <script type="module" src="/_nuxt/entry-521b7af6.mjs"></script>
</body>

</html>

My nuxt.config.ts looks like this:

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
	telemetry: false,
	builder: "vite",
	target: "static",
	ssr: false
	// target: "static" and ssr: false creates a standard SPA according to nuxt docs (unfortunately cannot find again where this is stated, but I have deployed .output/public to gh pages with success before under this configuration setting)
});

Snippet of tauri.conf.json (removed everything else that was default):

{
	"build": {
		"beforeBuildCommand": "pnpm run build", // nuxt build
		"beforeDevCommand": "pnpm run dev", // nuxt dev
		"devPath": "http://localhost:3000",
		"distDir": "../.output/public"
	},
	"tauri": {
		"bundle": {
			"identifier": "custom.identifier"
		}
	}
}

Reproduction

  1. init a nuxt app with pnpm dlx nuxi init nuxt-app
  2. install tauri cli: pnpm i -D @tauri-apps/cli
  3. I installed optional tauri API using pnpm i -D @tauri-apps/api (unsure if relevant, but I did do this so I included anyway)
  4. init tauri app with pnpm create tauri-app
    • web assets relative to <current dir>/src-tauri/tauri.conf.json: I put ../.output/public
    • url of dev server left at default (http://localhost:3000)
  5. checked pnpm tauri info (see below)
    • I noticed some inaccuracies: I am on an Apple silicon Mac, so I believe OS should be aarch64 or something like that (the build commands do produce aarch64 builds as expected though)
    • another inaccuracy: bundler is vite, not webpack (see above, nuxt.config.ts, perhaps tauri just doesn't recognise nuxt v3 yet? vite support is new in v3 I believe
  6. change build.beforeBuildCommand to pnpm run build
  7. change build.beforeDevCommand to pnpm run dev
  8. observe pnpm tauri dev works
  9. observe bundle produced by pnpm tauri build does not work as expected (including the app in the DMG)
  10. observe bundle produced by pnpm tauri build --debug does the same thing (also including app in the DMG)

Expected behavior

bundled builds produced by tauri build and tauri build --debug can display the content instead of a blank page

Platform and versions

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 16.15.0
  › npm: 8.9.0
  › pnpm: 7.0.1
  › yarn: Not installed!
  › rustup: 1.24.3
  › rustc: 1.60.0
  › cargo: 1.60.0
  › Rust toolchain: stable-aarch64-apple-darwin 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.10
  › @tauri-apps/api [NPM]: 1.0.0-rc.5
  › tauri [RUST]: 1.0.0-rc.9,
  › tauri-build [RUST]: 1.0.0-rc.8,
  › tao [RUST]: 0.8.4,
  › wry [RUST]: 0.16.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../.output/public
  › devPath: http://localhost:3000/
  › framework: Vue.js (Nuxt)
  › bundler: Webpack

App directory structure
  ├─ .output
  ├─ node_modules
  ├─ src-tauri
  ├─ .nuxt
  └─ .git

Stack trace

None, just the cryptic error as stated above:

console with one error saying TypeError: 'text/html' is not a valid JavaScript MIME type

Additional context

minimal reproduction repo: https://github.com/autumnblazey/tauri-nuxtv3-repro. Just followed the steps to initialise nuxt, then tauri

some edits for formatting / silly typos

edit 2: added reproduction repo

@meadowsys meadowsys changed the title [bug] nuxt v3 (release candidate) does not work with nuxt [bug] blank screen on build (maybe related to nuxt v3 rc?) May 10, 2022
@meadowsys meadowsys changed the title [bug] blank screen on build (maybe related to nuxt v3 rc?) [bug] blank screen running a build (maybe related to nuxt v3 rc?) May 10, 2022
@meadowsys
Copy link
Contributor Author

hmmm, would it have to do with the .mjs extension of /_nuxt/entry-521b7af6.mjs (last <script> in <body>)

@FabianLars
Copy link
Member

would it have to do with the .mjs extension

That does ring a bell. yes 🤔 I think someone else reported a similar problem on discord a few days ago (so it's good we now have an issue for it).

@meadowsys
Copy link
Contributor Author

meadowsys commented May 11, 2022

aha! this here. the filename matches an extension (.mjs), but doesn't match any specific one, so it gets the default text/html

Some(_) => Self::Html,

@meadowsys
Copy link
Contributor Author

meadowsys commented May 11, 2022

I could attempt a PR on this to add .mjs (and maybe some other extensions and mime types?), but I want to make sure that this is what tauri wants first. Also, I'm not sure, but is .mjs a standardised JavaScript file extension? Because if it isn't, it may be better to change on the nuxt side instead

edit: .mjs is at least recognised as a common file extension if not a standardised one, as per here (link from a comment in the file, just one line below, heh)

@FabianLars
Copy link
Member

If webkit is able to handle .mjs files i don't see a reason not to add support for it. Buuut i remember that we talked about this a while back, so i wonder why we didn't add it 🤔

I could attempt a PR on this to add .mjs

Sure, we always appreciate PRs!

and maybe some other extensions and mime types?

Hmm, i don't think that's necessary, since the infer crate should be able to handle most of what we need (plus the uri match function should be relatively extensive fallback-wise). If you know of another common extension that isn't working then don't mind me.

Also, I'm not sure, but is .mjs a standardised JavaScript file extension? Because if it isn't, it may be better to change on the nuxt side instead

If nuxt outputs it by default i can't imagine that it's not standard-ish.

@meadowsys
Copy link
Contributor Author

meadowsys commented May 11, 2022

If webkit is able to handle .mjs files i don't see a reason not to add support for it

Hmm I think it's just the file extension/mime type that is the issue here, it is just javascript after all :p

since the infer crate should be able to handle most of what we need

ahh right, this makes more sense now that I look at the code more

and alright, I'll look into making a PR then!

dceddia pushed a commit to dceddia/tauri that referenced this issue May 14, 2022
Co-authored-by: Lucas Nogueira <lucas@tauri.studio>
@marcelodelta
Copy link

I have the same problem. How to solve?

@wlodevelopteam
Copy link

hi, I have the same problem. How to solve?

@meadowsys
Copy link
Contributor Author

If the issue is with .mjs file extension, the fix should be in the latest releases of tauri, try updating if you haven't, I suppose?

@zpng
Copy link

zpng commented Jun 25, 2023

console

how can i open a console panel?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants