[bug] NextJs window is not defined on build with code referencing tauri-apps/api #7488
Comments
binhlt0402
added
status: needs triage
|
I found out just adding |
|
Sorry for reviving the zombies but I have various custom hooks throughout my codebase and I heavily use I just want to verify this: Do I have to do For reference, one of my custom hook looks as below: export const useOverviewInfo = (): OverviewInfo => {
const [ currentCpuUsage, setCurrentCpuUsage ] = useState<number>(0);
const [ currentMemoryUsage, setCurrentMemoryUsage ] = useState<number>(0);
const [ totalMemoryAmount, setTotalMemoryAmount ] = useState<number>(0);
const [ currentDiskUsage, setCurrentDiskUsage ] = useState(0);
const [ totalDiskAmount, setTotalDiskAmount ] = useState(0);
console.trace("states", { currentCpuUsage, currentMemoryUsage, totalMemoryAmount, currentDiskUsage, totalDiskAmount });
const fetchCpuUsage = async () => {
console.log("Fetching cpu usage...");
const cpuUsage: number = await invoke('get_cpu_usage');
console.trace("Cpu usage", cpuUsage);
return cpuUsage;
};
const fetchMemoryUsage = async () => {
console.log("Fetching memory usage...");
const memoryUsage: number = (await invoke('get_memory_usage')) as number / (1024 * 1024 * 1024);
console.trace("Memory usage", memoryUsage);
return memoryUsage;
};
const fetchTotalMemoryAmount = async () => {
console.log("Fetching total memory amount...");
const totalMemory: number = (await invoke('get_total_memory')) as number / (1024 * 1024 * 1024);
console.trace("Total memory", totalMemory);
return totalMemory;
};
const fetchCurrentDiskUsage = async () => {
console.log("Fetching current disk usage...");
const diskUsage: number = (await invoke('get_disk_usage')) as number / (1024 * 1024 * 1024);
console.trace("Disk usage", diskUsage);
return diskUsage;
};
const fetchTotalDiskAmount = async () => {
console.log("Fetching total disk amount...");
const totalDisk: number = (await invoke('get_total_disk')) as number / (1024 * 1024 * 1024);
console.trace("Total disk", totalDisk);
return totalDisk;
};
useEffect(() => {
fetchTotalMemoryAmount().then((val) => setTotalMemoryAmount(val));
fetchCurrentDiskUsage().then((val) => setCurrentDiskUsage(val));
fetchTotalDiskAmount().then((val) => setTotalDiskAmount(val));
}, []);
useEffect(() => {
const interval = setInterval(() => {
fetchCpuUsage().then((val) => setCurrentCpuUsage(val));
fetchMemoryUsage().then((val) => setCurrentMemoryUsage(val));
}, 1000);
return () => {
console.info("Clearing fetchCpuUsage and fetchMemoryUsage intervals...");
clearInterval(interval);
};
}, [currentCpuUsage, currentMemoryUsage]); |
if we're specifically talking about |
|
Thank you so much, I've trying to solve this for 2 days now. Search results lacked so much info. Might be a dumb question, but may I ask: Why importing from |
|
The problematic modules are |
|
I wanted to create an utility function to spawn new windows from anywhere in the application so just the Promise example provided in this issue wouldn't work. I wrote it in a slightly different way so you can reuse the function and I hope it can help somebody dealing with this issue. export interface WebviewOptions {
label: string;
onCreated?: (event?: Event<unknown>) => void;
onError?: (event?: Event<unknown>) => void;
onDestroyed?: (event?: Event<unknown>) => void;
}
function noop() {
/* Do nothing */
}
export function spawnWebview(
{
label,
onCreated = noop,
onError = noop,
onDestroyed = noop,
}: WebviewOptions,
options = {},
) {
// Before proceeding, it checks whether the window object is defined. If it's
// not (which may happen in certain non-browser environments like Node.js),
// the function exits immediately.
if (typeof window === 'undefined') {
return;
}
import('@tauri-apps/api/window').then(({ WebviewWindow }) => {
const webview = new WebviewWindow(label, {
url: 'index.html',
...options,
});
webview
.once('tauri://created', () => onCreated())
.catch((e) => throwNewError('created', e));
webview
.once('tauri://error', (e) => onError(e))
.catch((e) => throwNewError('error', e));
webview
.once('tauri://destroyed', () => onDestroyed())
.catch((e) => throwNewError('destroyed', e));
});
}
function throwNewError(type: string, e?: Error) {
throw new Error(`Webview ${type} event failed with error: `, e);
}This also should work with other APIs different than |
Describe the bug
Similar to #6554 I tried to build a project with a line code using appWindow.setSize to resize the windows and I got the same error when run
npm run tauri build. I tried several work around mention in #6554 and none of them working. Since my issue is with Nextjs instead of SvelteKit I created a new bug report instead of comment in #6554.Reproduction
right below
Home() {3. Add 'use client' to the beginning of page.tsx
4. Add
"allowlist": { "window": { "all": true } },to tauri.conf.json5. Build using 'npm run tauri build'
Expected behavior
It should build a working Tauri bundle
Platform and versions
Stack trace
Additional context
No response
The text was updated successfully, but these errors were encountered: