webpack: ReferenceError: window is not defined

[alpapan]

I couldn't figure this out, any ideas?

is this a canvasxpress issue or something with NextJS or webpack? (it also occurs with turbopack)

frontend:dev:  ⨯ ReferenceError: window is not defined
frontend:dev:     at __webpack_require__ (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43)
frontend:dev:     at __webpack_require__ (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43)
frontend:dev:     at eval (./src/app/playing/canvasxpress/component.js:7:76)
frontend:dev:     at (ssr)/./src/app/playing/canvasxpress/component.js (/home/alexie/software/curatorium/apps/frontend/.next/server/app/playing/canvasxpress/page.js:173:1)
frontend:dev:     at __webpack_require__ (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43)
frontend:dev:     at eval (./src/app/playing/canvasxpress/page.tsx:7:68)
frontend:dev:     at (ssr)/./src/app/playing/canvasxpress/page.tsx (/home/alexie/software/curatorium/apps/frontend/.next/server/app/playing/canvasxpress/page.js:184:1)
frontend:dev:     at Object.__webpack_require__ [as require] (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43)
frontend:dev:     at JSON.parse (<anonymous>)

component.js

import CanvasXpressReact from 'canvasxpress-react';
import React from 'react';

export default class CanvasXpressComponent extends React.Component {
  render() {
    var target = 'canvas';

    var data = {
      y: {
        vars: ['Variable1'],
        smps: ['Sample1', 'Sample2', 'Sample3'],
        data: [[33, 48, 55]],
      },
    };

    var config = {
      graphOrientation: 'vertical',
      graphType: 'Bar',
      theme: 'CanvasXpress',
      title: 'Simple Bar graph',
    };
    return (
      <CanvasXpressReact
        target={target}
        data={data}
        config={config}
        width={500}
        height={500}
      />
    );
  }
}

react nextjs (v14) code to instantiate

'use client';
import CanvasXpressComponent from './component';

export default function Page() {
  return (
    <div>
      <CanvasXpressComponent />
    </div>
  );
}

[neuhausi]

What version are you using. I introduced a bug in a previous version. Can you try the latest version and let me know. Thank you

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Alexie Papanicolaou @.> Sent: Friday, May 31, 2024 3:55:43 AM To: neuhausi/canvasxpress-react @.> Cc: Subscribed @.***> Subject: [neuhausi/canvasxpress-react] webpack: ReferenceError: window is not defined (Issue #6)

I couldn't figure this out, any ideas?

is this a canvasxpress issue or something with NextJS or webpack? (it also occurs with turbopack)

frontend:dev: ⨯ ReferenceError: window is not defined frontend:dev: at webpack_require (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43) frontend:dev: at webpack_require (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43) frontend:dev: at eval (./src/app/playing/canvasxpress/component.js:7:76) frontend:dev: at (ssr)/./src/app/playing/canvasxpress/component.js (/home/alexie/software/curatorium/apps/frontend/.next/server/app/playing/canvasxpress/page.js:173:1) frontend:dev: at webpack_require (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43) frontend:dev: at eval (./src/app/playing/canvasxpress/page.tsx:7:68) frontend:dev: at (ssr)/./src/app/playing/canvasxpress/page.tsx (/home/alexie/software/curatorium/apps/frontend/.next/server/app/playing/canvasxpress/page.js:184:1) frontend:dev: at Object.webpack_require [as require] (/home/alexie/software/curatorium/apps/frontend/.next/server/webpack-runtime.js:33:43) frontend:dev: at JSON.parse ()

component.js

import CanvasXpressReact from 'canvasxpress-react'; import React from 'react';

export default class CanvasXpressComponent extends React.Component { render() { var target = 'canvas';

var data = {
  y: {
    vars: ['Variable1'],
    smps: ['Sample1', 'Sample2', 'Sample3'],
    data: [[33, 48, 55]],
  },
};

var config = {
  graphOrientation: 'vertical',
  graphType: 'Bar',
  theme: 'CanvasXpress',
  title: 'Simple Bar graph',
};
return (
  <CanvasXpressReact
    target={target}
    data={data}
    config={config}
    width={500}
    height={500}
  />
);

} }

react nextjs (v14) code to instantiate

'use client'; import CanvasXpressComponent from './component';

export default function Page() { return (

); }

— Reply to this email directly, view it on GitHubhttps://github.com/neuhausi/canvasxpress-react/issues/6, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAB6HS75STPARASZUZLLEUTZFAUH7AVCNFSM6AAAAABISKBNF6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGMZDOMJZGAYDIOI. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[alpapan]

The latest one i believe

   "node_modules/canvasxpress": {
      "version": "49.9.97",
      "resolved": "https://registry.npmjs.org/canvasxpress/-/canvasxpress-49.9.97.tgz",
      "integrity": "sha512-EzeafpmBcj++EAKlEMhH+/zDavg8g9XmWUYnMKRcsJd1nKGTQBk8s/JYZGhELeMEtMUTpq714eE20RB16Q6hyg=="
    },
    "node_modules/canvasxpress-react": {
      "version": "49.9.97",
      "resolved": "https://registry.npmjs.org/canvasxpress-react/-/canvasxpress-react-49.9.97.tgz",
      "integrity": "sha512-zWWiWncU6PQivE1W2xvqDvLERgF9oDznenocLj/9U0K7jao4QzWbLm++bsS3P1yiz2MbWo8Ho+xD3+uUhGhryg==",
      "dependencies": {
        "canvasxpress": "^49.9.97"
      }
    },

$ npm view canvasxpress-react
npm warn Ignoring workspaces for specified package(s)

canvasxpress-react@49.9.97 | Dual licensing | deps: 1 | versions: 276
Node program to run canvasXpress with react
https://github.com/neuhausi/canvasxpress#readme

keywords: bioinformatics, genomics, data, visualization, graph, reproducible, research, analytics

dist
.tarball: https://registry.npmjs.org/canvasxpress-react/-/canvasxpress-react-49.9.97.tgz
.shasum: 6c5cb2cf30c1897bf00d719fa8d119e9c90804e5
.integrity: sha512-zWWiWncU6PQivE1W2xvqDvLERgF9oDznenocLj/9U0K7jao4QzWbLm++bsS3P1yiz2MbWo8Ho+xD3+uUhGhryg==
.unpackedSize: 3.7 kB

dependencies:
canvasxpress: ^49.9.97 

maintainers:
- neuhausi <imnphd@gmail.com>

dist-tags:
latest: 49.9.97  

published 4 days ago by neuhausi <imnphd@gmail.com>

[alpapan]

(happy to send you file/code to debug, i just did on a skeleton nextjs 14 with the app router.)

[neuhausi]

Do you happen to have a minimal example so I can debug that

[alpapan]

certainly, full instructions with a skeleton nextjs: https://github.com/alpapan/alpapan_tests

[neuhausi]

I cannot reproduce it. Here are the snapshots of the web site and the command line windows:

[alpapan]

Oh that's because you're looking at localhost:3000 rather than localhost:3000/playing

Here is my entire log on a fresh attempt, hopefully it helps

Using Windows 11 with WSL2

cat /etc/issue
Ubuntu 22.04.4 LTS \n \l
node --version
v20.11.1
npm --version
10.2.4

npx create-next-app@latest 

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/alexie/software/play/my-app.

Using npm.

Initializing project with template: app-tw 

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 359 packages, and audited 360 packages in 23s

133 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at /home/alexie/software/play/my-app

cd my-app/ && npm install canvasxpress-react --save && cd ..
added 2 packages, and audited 362 packages in 9s

133 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

git clone git@github.com:alpapan/alpapan_tests.git
Cloning into 'alpapan_tests'...
Cloning into 'alpapan_tests'...
remote: Enumerating objects: 31, done.
remote: Counting objects: 100% (31/31), done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 31 (delta 3), reused 29 (delta 1), pack-reused 0
Receiving objects: 100% (31/31), 32.78 KiB | 141.00 KiB/s, done.
Resolving deltas: 100% (3/3), done.

mkdir my-app/src/app/playing/
cp alpapan_tests/for_neuhaus/src/app/playing/* my-app/src/app/playing/
cd my-app
npm run dev

browse to localhost:3000/playing

> my-app@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 917ms
 ○ Compiling /playing ...
 ✓ Compiled /playing in 6.7s (531 modules)
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/playing/component.js:7:76)
    at (ssr)/./src/app/playing/component.js (/home/alexie/software/play/my-app/.next/server/app/playing/page.js:173:1)
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/playing/page.tsx:7:68)
    at (ssr)/./src/app/playing/page.tsx (/home/alexie/software/play/my-app/.next/server/app/playing/page.js:184:1)
    at Object.__webpack_require__ [as require] (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "3132599147"
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/playing/component.js:7:76)
    at (ssr)/./src/app/playing/component.js (/home/alexie/software/play/my-app/.next/server/app/playing/page.js:173:1)
    at __webpack_require__ (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/playing/page.tsx:7:68)
    at (ssr)/./src/app/playing/page.tsx (/home/alexie/software/play/my-app/.next/server/app/playing/page.js:184:1)
    at Object.__webpack_require__ [as require] (/home/alexie/software/play/my-app/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
digest: "4169927845"
 GET /playing 500 in 2449ms
 ✓ Compiled in 979ms (253 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1798ms (286 modules)
 GET /favicon.ico 200 in 1883ms
^C

Loads fine but errors in log:

[neuhausi]

I followed your script and I still don't get what you are getting:

I modified this line because the directory structure didn't exist

mkdir -p my-app/src/app/playing/

When I run:

npm run dev

I get:

> my-app@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1183ms

When I browse to browse to localhost:3000/playing

Can you open the console and check when the error is occurring?

[neuhausi]

Ok. I finally got it working Looking at the error it looks like I am not checking if window exists. I will add that check and hopes it fixes it. Thank you.

[neuhausi]

I have tried many iteration of checking for the existence of window without luck. Do you have any suggestions? The graphs are fully functional so I don't know when window is not existent

[alpapan]

I agree that the graphs are fully functional and I'm happy to ignore the error.

I'm sorry but I'm just learning react...

[alpapan]

I suspect it's a typescript to Javascript compilation issue... (As nextjs is in typescript)

[neuhausi]

What can I do?

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Alexie Papanicolaou @.> Sent: Sunday, June 9, 2024 12:49:32 PM To: neuhausi/canvasxpress-react @.> Cc: Isaac Neuhaus @.>; Comment @.> Subject: Re: [neuhausi/canvasxpress-react] webpack: ReferenceError: window is not defined (Issue #6)

I suspect it's a typescript to Javascript compilation issue... (As nextjs is in typescript)

— Reply to this email directly, view it on GitHubhttps://github.com/neuhausi/canvasxpress-react/issues/6#issuecomment-2156695427, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAB6HSZMKWAYCQSS3U2ZQM3ZGSBRZAVCNFSM6AAAAABISKBNF6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJWGY4TKNBSG4. You are receiving this because you commented.Message ID: @.***>

[alpapan]

honestly? let's file it "we know there is a warning but not to fix now"!

i'm only now learning react so maybe i will know more in a few months

[alpapan]

i figured it out.

NextJS compiles all code - including client side code - upon initialisation to make static pages. As there wasn't a browser, there was no window.

Hence the error on the console but not on the browser

Sorry if i wasted your time...

[neuhausi]

NP

From: Alexie Papanicolaou @.> Date: Thursday, June 13, 2024 at 5:49 AM To: neuhausi/canvasxpress-react @.> Cc: Isaac Neuhaus @.>, Comment @.> Subject: Re: [neuhausi/canvasxpress-react] webpack: ReferenceError: window is not defined (Issue #6)

i figured it out.

NextJS compiles all code - including client side code - upon initialisation to make static pages. As there wasn't a browser, there was no window.

Hence the error on the console but not on the browser

Sorry if i wasted your time...

— Reply to this email directly, view it on GitHubhttps://github.com/neuhausi/canvasxpress-react/issues/6#issuecomment-2165161469, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAB6HS3C26VKGMEHWHSECV3ZHFTJFAVCNFSM6AAAAABISKBNF6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRVGE3DCNBWHE. You are receiving this because you commented.Message ID: @.***>

[alpapan]

good day just thought i leave a note for posterity.

In order to make a client react component to work seamlessly with NextJS 13+, we need to import it dynamically and set ssr to false.

Therefore the page code becomes:

// page.tsx
import dynamic from 'next/dynamic';

const CanvasXpressComponent = dynamic(() => import('./components/cxexample'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      <CanvasXpressComponent />
    </div>
  );
}

where the cxexample is just:

//cxexample.tsx
'use client';

import CanvasXpressReact from 'canvasxpress-react';
import React from 'react';

export default class CanvasXpressComponent extends React.Component {
  render() {
    var target = 'canvas';

    var data = {
      y: {
        vars: ['Variable1'],
        smps: ['Sample1', 'Sample2', 'Sample3'],
        data: [[33, 48, 55]],
      },
    };

    var config = {
      graphOrientation: 'vertical',
      graphType: 'Bar',
      theme: 'CanvasXpress',
      title: 'Simple Bar graph',
    };
    return (
      <CanvasXpressReact
        target={target}
        data={data}
        config={config}
        width={500}
        height={500}
      />
    );
  }
}

[neuhausi]

Thank you