0

I have narrowed down the error to the postscribe method. It produces the following error:

ReferenceError: window is not defined

Produced by the following code:

import { Card, Col, Row, Typography } from "antd";
import {} from "@ant-design/icons";
import postscribe from "postscribe";

type MyProps = {

}
type MyState = {

}
export default class Home extends Component<MyProps, MyState> {
  componentDidMount = () => {
    postscribe(
      "#globe",
      `
      <script src="./js/threejs.js"></script>
      <script src="./js/orbit-controls.js"></script>
      <script src="./js/globe.js"></script>
    `
    );
  };

  render() {

    return (
      <>
        <div id="globe" className="globeContainer peekaboo">
          <canvas
            width="700"
            height="655"
            className="w-lg-100 h-lg-100 w-75 h-75 me-lg-0 me-n10 mt-lg-5"
          ></canvas>
        </div>
      </>
    );
  }
}

what I've tried so far is wrapping the poscribe method with a window check:

if (typeof window !== "undefined") {
      postscribe(
        "#globe",
        `
        <script src="./js/threejs.js"></script>
        <script src="./js/orbit-controls.js"></script>
        <script src="./js/globe.js"></script>
      `
      );
    }
wuiiz93
  • 119
  • 1
  • 10
  • 1
    Your logic is seemingly correct. `componentDidMount` will be called on the client-side which already has `window` object. Could you share more details for your implementation with me? – Nick Vu Mar 05 '22 at 07:25
  • https://stackoverflow.com/questions/62645284/referenceerror-window-is-not-defined-angular-9 – wuiiz93 Mar 07 '22 at 04:18
  • Does this answer your question: [Why am I getting ReferenceError: self is not defined when I import a client-side library?](https://stackoverflow.com/a/66100185/1870780)? Try dynamically importing `postscribe` inside `componentDidMount` instead. – juliomalves Mar 08 '22 at 21:20

0 Answers0