JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

1 Antwort

Functional

26.11.2022, 15:48

"window" ist in Next.js in der Regel nicht definiert, weil Next.js den JavaScript-Code auf dem Server rendert. Und da ist eben noch nicht bekannt, was der Nutzer für einen Browser verwendet und wie groß bspw. sein Bildschirm ist, daher kann "window" nicht definiert sein.

Next.js muss also gezwungen werden den Teil des Codes, der auf "window" zugreift, erst beim Client auszuführen, und nicht auf dem Server. Aus deinem Code-Schnipsel lässt sich nicht erkennen, welcher Teil auf "window" zugreift, vermutlich irgendeine der verwendeten Bibliotheken.

Ist es ein Component, das gerendert wird und auf "window" zugreift, sollte dieses mit konditionell gerendert werden (erst dann wenn "window" definiert ist, also beim Client):

const MyNextComponent = () => {
  // ...

  return (
    <div>
      {/* something... */}
      {typeof window !== "undefined" && (
        <ComponentThatUsesWindow />
      )}
    </div>
  );
}

Wird "window" hingegen von einem anderen Codeteil verwendet, kann dieser bspw. in einem useEffect ausgeführt werden, was Next.js auch dazu bringt, diesen Teil des Codes erst beim Client auszuführen:

const MyNextComponent = () => {
  useEffect(() => {
    // some code that uses window
  }, []);

  // ...
}

Falls das Problem "react-globe" ist (wovon ich ausgehe), hier ein paar GitHub Issues zu dem Thema der verwandten Bibliothek "react-globe.gl":

In letzterem wird das hier empfohlen:

let Globe = () => null;
if (typeof window !== 'undefined') Globe = require('react-globe.gl').default;

Sollte auch mit "react-globe" funktionieren, einfach "react-globe.gl" durch "react-globe" ersetzen.

Woher ich das weiß:Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung

Ähnliche Fragen

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zur Frage

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zur Frage

Browser schliesst sich immer?

Hallo ich programmiere seit geraumer Zeit mit Python und wollte heute mit Selenium starten. Mein Ziel ist es eine Website zu öffnen, jedoch startet Chrome kurz und schliesst sich wieder.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service

service_object_name = Service(r"C:\Program Files (x86)\chromedriver\chromedriver.exe")
options_name = webdriver.ChromeOptions()

browser = webdriver.Chrome(service=service_object_name, options=options_name)
browser.get("www.google.com")

würde mich sehr über eine antwort freuen

...zur Frage

React Js Props State unterschied?

Was Props sind weiss ich aber State will ich nicht so ganz verstehen.

Die Dokumentation von React ist sowieso komisch.
Habe gehört das es ähnlichkeiten hat.

Props würde ich so benutzen in der index.js

import App from irgendwas…
<App name="Max"/>
Und in der App.js
const App = (props)=>{
<h1> {name.props} </h1>} 
export default …

kann man das gleiche jetzt auch mit state machen oder wie kann ich mir das vorstelle. ?

...zur Frage

Python Selenium xpath ul / li?

Hallo Zusammen,

ich versuche aktuell über Selenium eine Website auszulesen. Zum Auslesen nutze ich Selenium xpath. Es geht um folgende Bespielseite: https://www.westernwelt.com/Cowboyhut-3X-von-Resistol-aus-Filz_1

Der von Chrome kopierte xpath lautet:
//*[@id="product-offer"]/div[2]/div/div[2]/div[2]/div/dl/dd[2]/div/div/div/ul/li[3]/a/span/span/span

Sobald in diesem Pfad ein ...ul/li/... vorkommt bekomme ich keine Ergebnisse mehr. Wo ist hier mein Denkfehler?

from selenium import webdriver
from selenium.webdriver.common.by import By#

url= 'https://www.westernwelt.com/Cowboyhut-3X-von-Resistol-aus-Filz_1'

driver = webdriver.Chrome()
driver.get(url)

xpath = '//*[@id="product-offer"]/div[2]/div/div[2]/div[2]/div/dl/dd[2]/div/div/div/ul/li[3]/a/span/span/span'
elements = driver.find_element(by=By.XPATH, value=xpath)

...zur Frage

Farbe einer Rectangle ändern? (Tkinter)?

Hi!

Wie kann ich durch eine IF-Stellung die Farbe des Rechteckes ändern?

Mein Code:

from tkinter import *
import random
from tkinter import ttk

window = Tk()
window.title('Memory Game')

tabs = ttk.Notebook(window)
root = ttk.Frame(tabs)

w = Canvas(window, width=1920, height=1080)
window.geometry('1910x1080')
w.pack()

w.create_rectangle(0, 0, 150, 80, fill='red')                                                                       
w.create_text(75, 40, text="Frei", font=20)

w.create_rectangle(150, 0, 300, 80, fill="green")                                                     
textfeld1 = Text(master=w, width=10, height=1, wrap='word', font='arial')
textfeld1.place(x=180, y=30)

window.mainloop()

Wenn jetzt zum Beispiel Tom in das erste Textfeld geschrieben wird und durch einen Button in einer Variable geschpeichert wird, ich eine If-Stellung aufstellen kann, in der dann das Rechteck eine andere Farbe bekommt.

Danke im Vorraus!

...zur Frage

wie memory leak in python script finden?

Hallo, ich hab ein python script auf einen raspberry pi 4 8gb laufen welches im loop ausgefuehrt wird und von tag zu tag immer mehr memory nutzt.

das script nutzt folgende imports:

import time

from selenium import webdriver

from selenium.webdriver.common.by import By

from random import *

import secrets

from selenium.webdriver.common.keys import Keys

import praw

from selenium.webdriver.firefox.options import Options

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

ich hab auch schon memory profiler ausprobiert, indem ich alles was im loop ausgefuehrt wird in einer funktion gespeichert hab und diese funktion im loop mit memory profiler zeile fuer zeile nach der memory nutzung suchen lassen habe aber das kommt bei jeder zeile nur 26.7MiB Nutzung raus.

z.b.

497 26.7 MiB 0.0 MiB 1 wait = randint(waita, waitb)

Ich hoffe mir kann jemand helfen wie ich genau heraus finden kann was so viel memory nutzt. <3

...zur Frage

Python **kwargs für Vererbung bei Klassen?

Liebe Community,

ich verstehe nicht ganz wozu man dieses **kwargs in diesem Code braucht. Das ist eine Kivy App in Python. Aber das ist eigentlich unwichtig.

Also meine Frage ist, wozu man das **kwargs bei der Vererbung braucht. (Gerne auch mit Bezug auf den aktuellen Code)

Eine ausführliche und genaue Erklärung wäre echt super, weil ich an diesem Problem schon seit Tagen verzweifel.

 from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.uix.image import Image
from kivy.core.window import Window
import random


class HangmanGame(BoxLayout):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.word_list = ["python", "java", "ruby", "javascript", "php"]
        self.guess_word = []
        self.secret_word = ""
        self.remaining_guesses = 6
        self.img_path = "img/hangman_{}.png"
        self.create_game_layout()
        self.new_game()

“““. . .(Leider konnte ich nicht den ganzen Code einfügen. Wegen dem Zeichenlimit. Aber die wichtigen Stellen sind drin. Sprich die __init__() Methode mit dem **kwargs, welches ich nicht verstehe und die Instanziierung des Objektes)“““

HangmanApp().run()

...zur Frage

Brauche ich Lizenzen bei meinen genutzten Py3-Modulen?

Hallo Liebe/r Leser/in,

Ich bin ein kleiner Python Programmierer mit einem Ziel, ich möchte Software entwerfen die Nützlich ist und jeder nutzen kann.

Für mein geplantes 5000 -10000 Zeiliges Projekt benutze ich schon viele Module aber kann ich sie auch einfach so nutzen?

Ca. 10 verschiedene Module sind in mein Programm integriert und da stellte ich mit irgendwann die Frage ob ich eine Kostenlose, "non profit" App einfach so veröffentlichen darf wenn ich diese imports nutze:

import sys

import platform

import configparser

import os

import subprocess

import ctypes

import shutil

import psutil

import GPUtil

from PyQt5.QtGui import QKeySequence, QTextCursor

from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, QMenu, QPushButton, QHBoxLayout, QVBoxLayout, QWidget, \

QMessageBox, QDialog, QLabel, QCheckBox, QFileDialog, QListWidget, QListWidgetItem, QFrame, QInputDialog, \

QColorDialog, QShortcut, QTextEdit, QLineEdit

from PyQt5.QtCore import Qt, QDateTime, QTimer, QEvent

Ja das sind schon ein paar Module und da ich erst bei 500Zeilen bin kann ich noch locker etwas ändern.

Also was muss ich beachten, Was muss ich rausmachen, was darf ich nutzen?

(Bin bereit euch Infos zu geben aber vor der Veröffentlichung noch nicht den ganzen Code)

Danke euch im Voraus :)

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

Wie bekomme ich diesen Wert mit BS4?

Seite: Pegelstand Salzach, Mittersill (pegelalarm.at)

HTML Code:

from re import S
import requests
from bs4 import BeautifulSoup
import csv
  
URL = "https://pegelalarm.at/paw/chart.html?commonid=203075-at"
r = requests.get(URL)
  
soup = BeautifulSoup(r.content, 'html5lib')
  
value = soup.find('div', attrs = {'id':'d2l2'}).get_text()

print(value)

Ouptut:

{{station.yvalue|numberpa}} {{yUnit}}

Ich habe schon alles probiert bekomme aber immer statt dem Wert "257 cm" den Output {{station.yvalue|numberpa}} {{yUnit}}.

Hoffe es kann mir jemand weiterhelfen :)

...zur Frage

Wie kann ich die Eingabe des Textfeldes auslesen?

Hallo!

Wie kann ich die Eingabe(zB.: "Hallo") in ein Textfeld(Tkinter) auslesen und verarbeiten?

Dass ich zum Beispiel, wenn Tom hineingeschrieben wird, eine if/else Stellung benutzen kann?

Mein Code:

from tkinter import *
from tkinter import ttk

window = Tk()
window.title('Memory Game')

tabs = ttk.Notebook(window)
root = ttk.Frame(tabs)

w = Canvas(window, width=1910, height=1080)
w.pack()

w.create_rectangle(0, 0, 150, 80, fill="red")                                                                    
w.create_text(75, 40, text="Frei", font=20)

w.create_rectangle(150, 0, 300, 80, fill="green")                                                          
textfeld1 = Text(master=w, width=10, height=1, wrap='word', font='arial')
textfeld1.place(x=180, y=30)

window.mainLoop()

...zur Frage

NameError: name 'guild' is not defined?

import discord
import time
from discord.ext import commands
import random

intents = discord.Intents.default()
intents.message_content = True

client = discord.Client(intents=intents)

@client.event
async def on_ready():
    print(''' 

Bereit!

 ''')
    await client.change_presence(activity=discord.Game(name="Python 3.9"))

@client.event
async def on_message(message):
    if message.author == client.user:
        return

    while 5 > 1:
        if message.content.startswith('$py'):
            time.sleep(1)
            await message.channel.send('Hey')
            await message.channel.send('https://cdn.discordapp.com/emojis/1021051851967320114.webp?size=4096')
            await guild.create_text_channel('Python 3.9')
client.run('My Token')

error: await guild.create_text_channel('Python 3.9')

NameError: name 'guild' is not defined

...zur Frage

Visual Studio Code formatiert Javascript/React Code falsch?

Hallo! Ich habe eine neue React App gestartet und habe gerade angefangen zu coden, doch als ich das erste mal gespeichert habe, hat Visual Studio Code angefangen, die JS Files falsch zu formatieren.

Die Datei an sich ist übrigens eine beinahe unformatierte Datei die automatisch generiert wurde.

So will ich es formatiert haben:

function App() {
    return (
    <div className = "App" >
            <h1>yo</h1>
    </div >);
 }

Aber so wird es autoformatiert:

function App() {
    return ( <
        div className = "App" >
        <
        h1 > yo < /h1> < /
        div >
    );
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen