how to change "dir" in <body> element in the "_document" file #42

megetron · 2022-09-08T11:34:03Z

hey,
i am trying to change the direction of the html based on the changing language.
in the _document.js file i have placed this:

import useLanguageQuery from "next-export-i18n";
const [query] = useLanguageQuery();

but then i get:

1 of 1 unhandled error
Server Error
TypeError: next_export_i18n__WEBPACK_IMPORTED_MODULE_2___default is not iterable (cannot read property Symbol(Symbol.iterator))

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

pages/_document.js (3:16) @ eval

  1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
  2 | import useLanguageQuery from "next-export-i18n";
> 3 | const [query] = useLanguageQuery();
    |                ^
  4 | 
  5 | 
  6 | class CustomDocument extends Document {

do i miss something?

The text was updated successfully, but these errors were encountered:

martinkr · 2022-09-30T10:15:53Z

Hi @megetron ,

Thank you for reaching out.

I am not exactly sure about your code, but from the code snippet, it looks like you are trying to call the useLanguageQuery-hook from outside a function component.

Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

https://reactjs.org/docs/hooks-rules.html

Cheers,

Martin

Nabeeh-AlSawaf · 2022-12-07T09:56:01Z

you can achieve changing the dir element with minimal document node query with the following code:

import { useLanguageQuery } from "next-export-i18n";
import { useEffect } from "react";

const [query] = useLanguageQuery();

useEffect(() => {
    console.log(query)
    let dir = query?.lang == "ar" ? "rtl" : "ltr";
    let lang = query?.lang == "ar" ? "ar" : "en";
    document.querySelector("html").setAttribute("dir", dir);
    document.querySelector("html").setAttribute("lang", lang);
  }, [query]);

note in my example i am changing base on "Arabic language" "ar" , alter the code to your needs

martinkr added awaiting answer Feedback necessary to decide wether to proceed or close the issue stale labels Nov 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to change "dir" in <body> element in the "_document" file #42

how to change "dir" in <body> element in the "_document" file #42

megetron commented Sep 8, 2022

martinkr commented Sep 30, 2022

Nabeeh-AlSawaf commented Dec 7, 2022 •

edited

Loading

how to change "dir" in <body> element in the "_document" file #42

how to change "dir" in <body> element in the "_document" file #42

Comments

megetron commented Sep 8, 2022

martinkr commented Sep 30, 2022

Nabeeh-AlSawaf commented Dec 7, 2022 • edited Loading

Nabeeh-AlSawaf commented Dec 7, 2022 •

edited

Loading