Cannot resolve console [Building for Cloudflare Workers]

[hrgui]

Following the Cloudflare Workers example, upon running build:worker, I get this error:

👀  ./node_modules/vite-plugin-ssr/dist/cjs/html/inferMediaType.js
Module not found: Error: Can't resolve 'console' in '/Users/hrgui/projects/pokedex-vite-ssr/node_modules/vite-plugin-ssr/dist/cjs/html'

Here's a test repo: https://github.com/hrgui/pokedex-vite-plugin-ssr

[hrgui]

This is also reproducible in the examples/cloudflare-workers example:

ound 2 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
👀  ./node_modules/vite-plugin-ssr/dist/cjs/html/inferMediaType.js
Module not found: Error: Can't resolve 'console' in '/Users/hrgui/projects/vite-plugin-ssr/examples/cloudflare-workers/node_modules/vite-plugin-ssr/dist/cjs/html'

[marshallswain]

npm install console will probably allow it to build. It worked for me, anyway.

[marshallswain]

However, I do run into this error about the global window object when building or deploying. You may or may not experience the same thing.

[marshallswain]

I've just confirmed that I run into the same issue with window is undefined with all three apps:

1. Your test repo.
2. My own repo updated from the vue SSR example
3. The cloudflare workers example

[brillout]

I will have a look

[brillout]

I can reproduce. It's webpack.

$ npm i --save-dev webpack@4 webpack-cli@4 && npx webpack
ERROR in ./node_modules/vite-plugin-ssr/dist/cjs/html/inferMediaType.js
Module not found: Error: Can't resolve 'console' in '/home/romuuu/.prog/files/code/vite-plugin-ssr/examples/cloudflare-workers/node_modules/vite-plugin-ssr/dist/cjs/html'
 @ ./node_modules/vite-plugin-ssr/dist/cjs/html/inferMediaType.js 4:18-36
 @ ./node_modules/vite-plugin-ssr/dist/cjs/html/injectAssets.node.js
 @ ./node_modules/vite-plugin-ssr/dist/cjs/html/index.node.js
 @ ./node_modules/vite-plugin-ssr/dist/cjs/index.js
 @ ./worker/ssr.js
 @ ./worker/index.js

@frandiox Maybe you have seen this Error: Can't resolve 'console' before.

[brillout]

Vite will ship a new feature this week that will allow us to get rid of webpack altogether.

[brillout]

In the meantime; is someone up for digging into this webpack error?

I'm tempted to wait until we can remove Webpack entirely. ETA this week.

[marshallswain]

@brillout Thanks for checking on this. What is the feature that's coming out for Vite this week?

[brillout]

This one: vitejs/vite#4490

[frandiox]

@brillout hmm, no, i don't recall seeing that error in Vitedge 🤔
We were using Webpack with no special configuration, just the webworker target.

[brillout]

Fix released in 0.2.6.

Thanks @frandiox @marshallswain.

[hrgui]

I do run into the same issue about the window - #129 (comment)

Error: Something went wrong with the request to Cloudflare...
Uncaught ReferenceError: window is not defined
  at line 1
  at line 1
  at line 1
  at line 1 in n
  at line 6
  at line 6
  at line 1 in n
  at line 1
  at line 1 in n
  at line 34

I've updated my test repo and that's how far i went. Shall I make a new issue?

[brillout]

@hrgui You sure it has something to do with vite-plugin-ssr? It seems more CF Worker related. (It actually makes sense: window doesn't exist in a CF worker.)

[hrgui]

I'll dig into it some more - it has to do with window being written in the webpack compilation for the worker, which doesn't exist in a CF worker. I think it's importBuild.js, which I need to take a look at how that's being compiled.

I am suspecting its one of these:

getPageFile=t.getPageFiles=void 0;const a=n(1),i=n(0);let r,o;async function s(e){if(o){const e=a.getSsrEnv();r&&e.isProduction||(r=await o()),i.assert(i.hasProp(r,".page"))}i.assert(i.hasProp(r,".page"));return Object.entries(r[e]).map(([e,t])=>({filePath:e,loadFile:t}))}!function(){const t=Symbol(),n=i.isNodejs()?e:window;i.assert(!n[t]),n[t]=!0}(),t.setPageFiles=function(e){i.assert(i.hasProp(e,".page")),r=e},t.isPageFilesSet=function(){return!!r},t.setPageFilesAsync=function(e){o=e},t.getPageFiles=s,t.getPageFile=async function(e,t){i.assert(!t.includes("\\"));const n=await s(e),a=function(e,t){if(0===(e=e.filter(({filePath:e})=>e.startsWith(t+".page."))).length)return 

startsWith("/")||e.startsWith("http")||e.startsWith("./"),t+"Wrong `base` value `"+e+"`; `base` should start with `/`, `./`, or `http`.")}},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.projectInfo=void 0;t.projectInfo={name:"vite-plugin-ssr",version:"0.2.6",npmPackageName:"vite-plugin-ssr",

I was able to reproduce this with the cloudflare workers example in this repo also after updating to 0.2.6.

[brillout]

@hrgui

Your error

Error: Something went wrong with the request to Cloudflare...
Uncaught ReferenceError: window is not defined

is a runtime error.

So yes vite-plugin-ssr does contain references to window but AFAICT vite-plugin-ssr actually never tries to read window on the server-side.

You can try to add console.log(typeof window) to your woker code, and you'll see that webpack is fine transpiling that.

You can then try to add console.log(window.hello) to your worker code, and you'll probably see your runtime error.

[hrgui]

I see. I just copied the worker example from https://github.com/brillout/vite-plugin-ssr/blob/master/examples/cloudflare-workers/worker/ssr.js#L1-L20.

When I changed ssr.js to this:

// import { createPageRender } from "vite-plugin-ssr";
// We load `importBuild.js` so that the worker code can be bundled into a single file
// import "../dist/server/importBuild.js";

export { handleSsr };

const renderPage = () => null;

async function handleSsr(url) {
  const pageContext = { url };
  const result = await renderPage(pageContext);
  if (result.nothingRendered) {
    return null;
  } else {
    return new Response(result.renderResult, {
      headers: { "content-type": "text/html" },
      status: result.statusCode,
    });
  }
}

It is able to be deployed, but I need to figure out what about these three lines are causing window to be evaluated in runtime:

import { createPageRender } from "vite-plugin-ssr";
// We load `importBuild.js` so that the worker code can be bundled into a single file
import "../dist/server/importBuild.js";

export { handleSsr };

const renderPage = createPageRender({ isProduction: true })

I'll report back when I get more info. Cloudflare workers are hard to debug.

---

update 08/10 10:30 AM PST

Even after removing all window. references from the worker, Cloudflare Workers is still evaluating the window object. Need to debug more.

---

update 08/10 10:33 AM PST

When hardcoding isNodejs() to true, Cloudflare Workers deploys correctly. See issue #130

[brillout]

@hrgui Nice digging 👌

[oleksandr-dukhovnyy]

In my case, the behavior of the IDE led to this error.
I don't know why or how, but at some point while working on a file with >100 lines of code, the IDE (VSCode) enabled auto-import for a console variable that was not declared in the file by adding the following line to the top of the file:

import console from 'console';

I then spent a lot of time to understand what happened. I hope my comment saves someone some energy and nerves)

[brillout]

@Aleksandr-JS-Developer Good to know, thanks for sharing 💚.