Wrangler: Unable to push compiled FAB

[geelen]

Not quite a bug but definitely not a feature, I'm having a weird issue uploading FABs to Wrangler.

Pushed a repo here with what I'm trying to wrangler publish: https://github.com/geelen/fab-cloudflare-error

This is the error I'm getting:

⬇️ Installing wranglerjs...
⬇️ Installing wasm-pack...
✨  Built successfully, built project size is 293 KiB.
Error: Something went wrong! Status: 400 Bad Request, Details {
  "result": null,
  "success": false,
  "errors": [
    {
      "code": 10021,
      "message": "Uncaught ReferenceError: document is not defined\n  at line 176 in e\n  at line 170 in e\n  at line 148 in 3niX\n  at line 148 in n\n  at line 176 in nWF0\n  at line 148 in n\n  at line 155 in DTay\n  at line 148 in n\n  at line 170 in VDXt\n  at line 148 in n\n"
    }
  ],
  "messages": []
}

Now, what's _weird_, is that if I copy/paste the dist/main.js file into the Workers console, it runs fine. But if I copy worker/script.js, it fails. But the only difference between the two is the first line:

const window = this;

So... can someone explain why this line's being added? The FAB is already compiled into server.js, the index.js just sets up the event listener. Wrangler has been working for smaller nextjs apps built into a FAB but for some reason this one is dying (could be the presence of next-images or dynamic routes or something but weirdly, just removing that first line fixes things)

[geelen]

Oh, interestingly, I tracked down things a little further:

This is inside the bundle:

function e() {
  var t =
      arguments.length > 0 && void 0 !== arguments[0]
        ? arguments[0]
        : {},
    n = t.name,
    i = void 0 === n ? 'stylesheet' : n,
    r = t.optimizeForSpeed,
    s = void 0 === r ? o : r,
    u = t.isBrowser,
    p = void 0 === u ? 'undefined' != typeof window : u
  !(function(e, t) {
    if (!(e instanceof t))
      throw new TypeError(
        'Cannot call a class as a function'
      )
  })(this, e),
    c(a(i), '`name` must be a string'),
    (this._name = i),
    (this._deletedRulePlaceholder = '#'.concat(
      i,
      '-deleted-rule____{}'
    )),
    c(
      'boolean' == typeof s,
      '`optimizeForSpeed` must be a boolean'
    ),
    (this._optimizeForSpeed = s),
    (this._isBrowser = p),
    (this._serverSheet = void 0),
    (this._tags = []),
    (this._injected = !1),
    (this._rulesCount = 0)
  var l =
    this._isBrowser &&
    document.querySelector('meta[property="csp-nonce"]')
  this._nonce = l ? l.getAttribute('content') : null
}

That looks like it's a part of styled-jsx (relevant lines):

export default class StyleSheet {
  constructor({
    name = 'stylesheet',
    optimizeForSpeed = isProd,
    isBrowser = typeof window !== 'undefined'
  } = {}) {
    invariant(isString(name), '`name` must be a string')
    this._name = name
    this._deletedRulePlaceholder = `#${name}-deleted-rule____{}`

    invariant(
      typeof optimizeForSpeed === 'boolean',
      '`optimizeForSpeed` must be a boolean'
    )
    this._optimizeForSpeed = optimizeForSpeed
    this._isBrowser = isBrowser

    this._serverSheet = undefined
    this._tags = []
    this._injected = false
    this._rulesCount = 0

    const node =
      this._isBrowser && document.querySelector('meta[property="csp-nonce"]')
    this._nonce = node ? node.getAttribute('content') : null
  }

So yeah in this case, the presence of window is making styled-jsx think it's in a browser and it can use document

[geelen]

Lol well I found the culprit, but I wonder why this is here or how I could bypass it:

// We inject some code at the top-level of the Worker; called {prologue}.
// This aims to provide additional support, for instance providing {window}.
pub fn create_prologue() -> String {
    r#"
        const window = this;
    "#
    .to_string()
}

[xtuc]

I think it's related to #477. I'm on it.

[xtuc]

Using https://github.com/cloudflare/wrangler/pull/490 I can deploy it https://nextjs9-fab-cf-workers.sven.workers.dev. It's a webpack misconfiguration, a workaround would be to specify target: "webworker" in your webpack config.

[ashleygwilliams]

i think this is solved! if i'm incorrect, please reopen!!