Can't manage to build with pre-rendering

[anna1drz]

Hello

I'm trying to build a simple preact app that sends get requests to an API on user input. I have pasted some demo code below but for my actual project I'm using debouncing and caching. (get requests aren't send as frequently).

I cannot build without the "--no-prerender" argument, even after wrapping my code in "if(typeof window !== 'undefined)".

Here's the full error I'm getting:

Build  [=================== ] 93% (6.7s) after chunk asset optimization
ReferenceError: window is not defined
method: UqHU

Stack:

{
    "fileName": "D:\\preact-app\\build\\ssr-build\\ssr-bundle.js",
    "lineNumber": 1,
    "functionName": "Object.UqHU",
    "typeName": "Object",
    "methodName": "UqHU",
    "columnNumber": 71328,
    "native": false
}
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.

Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"

Alternatively use "preact build --no-prerender" to disable prerendering.

See https://github.com/preactjs/preact-cli#pre-rendering for further information.

Here's the demo code I wrote to make things simple and show how my project is set up:

import { render, Component } from 'preact';
import axios from 'axios';

class Form extends Component {

  state = { returnValue: ''}
 
  getValue(inputValue) {
    if(typeof window !== 'undefined')
    {
      axios.get('http://localhost:3000/words?string=word1/word2').then((response) => {
        let string = [];
        for(var i = 0; i < response.data.length; i++)
        {
          string.push(response.data[i].word);
        }
        string = string.join(" ");
        this.setState({returnValue: string})
      })
    }
  }

  onInput = e => {
    e.preventDefault();
    const { value } = e.target;
    this.getValue(value);
  }

  render(_, { returnValue }) {
    return (
      <>
        <form>
          <textarea autofocus onInput={this.onInput} name='Enter text'/>
        </form>
        <div id='results'>{this.state.returnValue}</div>
      </>
    );
  }
}
export default Form;

Everything works if I comment out the code I'm currently wrapping with "if(typeof window !== 'undefined')"

Please note that I'm a beginner developer

[rschristian]

If you update your preact-cli version, you'll see a slightly better error message (something I worked on recently), pointing out the error is in /node_modules/form-data/lib/browser.js. To skip over the details, axios depends on another library called form-data which isn't doing something right. Just the import of axios is triggering this.

There's a few different solutions you can take:

1. Use the fetch() API instead
   - fetch() is built into all modern browsers and should be faster & smaller than axios by a considerable margin. If you are following a tutorial or something (as you say you're a beginner), this is a bit of a different interface to axios, so may not be desirable.
2. Use something like redaxios
   - redaxios looks to wrap fetch() into an interface that matches axios. It's therefore much smaller and much faster than axios while still working mostly the same. There are some unsupported features though, so if you're doing complex things with axios, this may not work ideally.
3. Patch form-data
   - Probably the simplest solution, you can just fix form-data yourself. This lets you keep working with the same dependencies. I can provide concrete steps if you want to go this route (or you can read patch-package's docs), just let me know what package manager you're using (NPM, Yarn v1, PNPM, etc).
   - You'd want to alter /node-modules/form-data/lib/browser.js to look like this:

   /* eslint-env browser */
   module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;

Whichever way you go, you can remove that window check around your axios code -- it's not the issue here.

[anna1drz]

Will use fetch instead of axios
Thanks!

[rschristian]

No problem, and certainly feel free to ping me or if you run into any other issues.

Happy to help.