-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
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] NextJs window is not defined on build with code referencing tauri-apps/api #7488
Comments
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: