resolves import with browser field for SSR

[yen-tt]

Describe the bug

I'm using pages starter repo with chat SDKs. Chat-ui-react component lib have a third party dep with this package.json.

Instead of using the "non-browser" path (such as the one specified in "main" field), pageJS/vite bundler uses the "browser" path which contains browser API usage. This causes document is not defined error.

Using vite debug flag, I can see that vite.browserField is currently true. Overriding that manually to false in the starter repo seems to resolve this issue

export default defineConfig({
  resolve: {
    browserField: false,
  },
  plugins: [react(), yextSSG()],
});

Seems like something that should be set in pagesJS vite plugin for SSR?

Following that config update, I then receive this error from the bundle:

I'm unable to locate what or why it would be undefined. Any idea why this issue is occuring?

Reproduction

https://github.com/yen-tt/test-pages

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 962.31 MB / 64.00 GB
    Shell: 5.2.15 - /usr/local/bin/bash
  Binaries:
    Node: 19.9.0 - ~/.nvm/versions/node/v19.9.0/bin/node
    npm: 9.6.3 - ~/.nvm/versions/node/v19.9.0/bin/npm
    pnpm: 8.6.2 - ~/.nvm/versions/node/v19.9.0/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
  npmPackages:
    @yext/pages: 1.0.0-beta.22 => 1.0.0-beta.22

Used Package Manager

npm

Used Browser

Chrome

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[mkilpatrick]

Can you link the Yext account you're testing with as well as the command you're running that leads to this? A link to the Slack thread would be good too.

I don't have a guess for the second error, but does it still exist with 1.0.0-rc.0?

[jwartofsky-yext]

Can you link the Yext account you're testing with as well as the command you're running that leads to this? A link to the Slack thread would be good too.

I don't have a guess for the second error, but does it still exist with 1.0.0-rc.0?

I was able to trigger both errors using https://github.com/yen-tt/test-pages with the vite config modified like so:

export default defineConfig({
  resolve: {
    browserField: false,
  },
  plugins: [react(), yextSSG()],
});

To see the debug output, add -d to build:local in package.json
"build:local": "vite build -d",

The test repo is using "@yext/pages": "1.0.0-beta.22"

[yen-tt]

slack thread and Yext account link (although the repo is not using any data tie to a specific account so I think you could use any account here)
command: npm run dev (and "build:local": "vite build -d" for vite debug)

For the second error, I tried upgrading pages to "@yext/pages": "1.0.0-rc.0", and it gave me a different error:

[mkilpatrick]

The actual issue stems from react-textarea-autosize which I opened an issue for. It sounds like they are going to try to make an update that would resolve this. Once that happens chat-ui-react will need to be updated to the version of react-textarea-autosize with the fix.

Setting browserField to false is a no go because it breaks a lot of other things.