Andarist / react-textarea-autosize

It seems, like with introduction of v8 this issue has returned
We are using this package with next v11.0.1 and getting the following error, when trying to start our application:

"ReferenceError: document is not defined"

This seems like due to build optimization.

In source code there is a undefined check:

react-textarea-autosize/src/getSizingData.ts

Line 43 in 0d7ac21

typeof document !== 'undefined'

But in actual packaged code, the check is gone

// react-textarea-autosize.browser.esm.js
// line 104
var isIE = !!document.documentElement.currentStyle ;

SSR should not reach for react-textarea-autosize.browser.esm.js. This is a browser build - this means that your bundler is configured incorrectly.

@Andarist I supposed too! But not sure if it's the same for @OlehRb

@Andarist, @malcolm-kee, not sure
We use this library in our own tiny design-system library, which is build by rollup, so unless we move it from build-in dependencies to let's say, peer-dependencies I guess it is not possible to provide a correct build of react-textarea-autosize for SSR apps, as it gets bundled as a part of our library..

But I will investigate if moving it away from built-in dependencies is going to solve this problem

By the way, did anyone test this library with the latest version of nextjs?

Its better not to bundle this dependency and let it be installed as a regular dep

@OlehRb check if rollup bundle this package. If yes, you can use the external options: https://rollupjs.org/guide/en/#external

I'm running into this problem when using the Next.js Edge Runtime with SSR as well.

@james-elicx this PR should resolve your issue. Note though that you need to tell Next.js (by customizing the webpack config) to use the worker condition.

@james-elicx this PR should resolve your issue. Note though that you need to tell Next.js (by customizing the webpack config) to use the worker condition.

Many thanks. Using the plugin code mentioned in vercel/next.js#33813 (comment) to add the worker condition, all is working as expected :)

Much appreciate the fix!

Note though that you need to tell Next.js (by customizing the webpack config) to use the worker condition.

@Andarist Do you have any pointer for a sample configuration to use the worker condition?

It depends on your bundler, in Next you can do something like this:

module.exports = async (phase, { defaultConfig }) => {
    /**
     * @type {import('next').NextConfig}
     */
    const nextConfig = {
        reactStrictMode: true,
        webpack: (config, ctx) => {
            if (ctx.nextRuntime === "edge") {
                if (!config.resolve.conditionNames) {
                    config.resolve.conditionNames = ['require', 'node'];
                }
                if (!config.resolve.conditionNames.includes("worker")) {
                    config.resolve.conditionNames.push("worker");
                }
            }
            return config;
        },
        experimental: {
            runtime: 'experimental-edge',
        },
    }
    return nextConfig
}

Thanks. Unfortunately throws an error while generating the og image on api/og route in next.js:

Uncaught TypeError: (0 , Xo.default) is not a function
    at <unknown> (webpack-internal:///(:3000/api/og/middleware)/./node_modules/satori/dist/index.wasm.cjs:9)
    at eval (webpack-internal:///(:3000/api/og/middleware)/./node_modules/satori/dist/index.wasm.cjs:9:1726)
    at Object.(middleware)/./node_modules/satori/dist/index.wasm.cjs (:3000/api/og/evalmachine.<anonymous>:2352:1)
    at __webpack_require__ (:3000/api/og/evalmachine.<anonymous>:37:33)
    at fn (:3000/api/og/evalmachine.<anonymous>:296:21)
    at eval (webpack-internal:///(:3000/api/og/middleware)/./node_modules/@vercel/og/dist/index.js:5:69)
    at Module.(middleware)/./node_modules/@vercel/og/dist/index.js (:3000/api/og/evalmachine.<anonymous>:2484:1)
    at __webpack_require__ (:3000/api/og/evalmachine.<anonymous>:37:33)
    at fn (:3000/api/og/evalmachine.<anonymous>:296:21)
    at eval (webpack-internal:///(:3000/api/og/middleware)/./pages/api/og.tsx:11:68)
    at Module.(middleware)/./pages/api/og.tsx (:3000/api/og/evalmachine.<anonymous>:869:1)

Probably because satori package is incompatible with the worker condition?

Probably because satori package is incompatible with the worker condition?

This should be irrelevant. You specify what conditions your environment is able to handle but every single package specifies what conditions they support (with fallbacks and everything). It's a "priority list" - satori only specified import and require conditions:
https://github.com/vercel/satori/blob/df8dec5bb5b4b5c3920e0677c78b358399b91872/package.json#L16-L19

and that should be fine.

You'd have to share a repro case for me to take a further look.

Thanks, Will get back if I can reproduce it in an isolated repo.

FWIW, this is occuring with Remix on Vercel Edge Functions. Remix doesn't have a way of customizing the bundler. The error is:

ReferenceError: document is not defined
    at (node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js:99:0)
    at (build/build-edge-eyJydW50aW1lIjoiZWRnZSJ9.js:91:0)
    at (build/server-build-edge-eyJydW50aW1lIjoiZWRnZSJ9.mjs:2:18)
    at (posts/:postId:middleware.js:1:17)

My temporary hack is to use a postinstall hook to replace the browser-optimized build with the generic build like so:

{
  "scripts": {
    "postinstall": "cp node_modules/react-textarea-autosize/dist/react-textarea-autosize{,.browser}.esm.js"
  }
}

That works fine for this package because the added code is minimal, but other packages like Prisma might be too heavy to include in browser builds like this. I'm not sure where exactly to lay the problem on, but let's link in https://github.com/vercel/remix here.

I wonder if the default Next.js configuration on Vercel is already set up to make a separate worker build for Edge Functions, or if users are running into this problem.

Remix automatically configures the worker condition for you when bundling for Cloudflare Workers (see here). You might need to configure serverBuildTarget to enable this.

Next.js currently also enables the worker condition when bundling for workers.

I think that this issue can be closed since the bundler that you are using should always give you the option to configure the build target etc

[v8] SSR support is broken