Usage with custom input components that depend on browser APIs

[danmichaelo]

Hi! We've just getting started with creating our own custom input components for a Next.js Sanity Studio project, more specifically a date picker based on https://react-day-picker.js.org/ , but this caused sanity-codegen to stop working because there is some dependency on a browser API:

> npx sanity-codegen

ReferenceError: window is not defined
    at Object.<anonymous> (/home/runner/work/sanity-demo/sanity-demo/sanity/node_modules/@sanity/base/lib/util/resizeObserver.js:14:22)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Module._compile (/home/runner/work/sanity-demo/sanity-demo/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Object.newLoader [as .js] (/home/runner/work/sanity-demo/sanity-demo/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/home/runner/work/sanity-demo/sanity-demo/sanity/node_modules/@sanity/base/lib/change-indicators/overlay/useResizeObserver.js:10:23)

Guess we're not the first ones running into this problem, but didn't find a solution when googling, so would be awesome if someone could share how they worked around this 🙏 Some kind of lazy-loading perhaps?

Our sanity-codegen.config.ts is really simple atm.:

import { SanityCodegenConfig } from "sanity-codegen";

const config: SanityCodegenConfig = {
  schemaPath: "./sanity/schemas/schema",
  outputPath: "./generatedTypes/modelTypes.ts",
};

export default config;

[ricokahler]

Hey @danmichaelo!

sanity-codegen maintainer here 👋

As you were alluding to, this occurs when node runs browser-dependent code during schema extraction. This problem isn't unique to sanity-codegen (e.g. next.js users experience this with SSR) but the schema's default environment is a single-page app run only the browser so it'll happen more often than other environments.

Right now sanity-codegen tries to shim out a few browser-only imports to prevent these kinds of errors (e.g. importing CSS), but I don't shim out any browser APIs. I don't think the studio bundler currently supports lazy loading with import() so the only option I can think of is to alias the import to some no-op module.

In the future I want to add an ignoredPackages option for this particular use case (see #67) but for now you can use the babelOptions option in the sanity-codegen.config.ts and utilize the defaultBabelOptions.

Could you try this?

import { SanityCodegenConfig, defaultBabelOptions } from 'sanity-codegen';

const config: SanityCodegenConfig = {
  schemaPath: './sanity/schemas/schema',
  outputPath: './generatedTypes/modelTypes.ts',
  babelOptions: {
    ...defaultBabelOptions,
    plugins: [
      // taken from here:
      // https://github.com/ricokahler/sanity-codegen/blob/c0761ea8292a9d89a5072e173694f96b4e06f120/src/cli.ts#L22-L44
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            'part:@sanity/base/schema-creator':
              'sanity-codegen/schema-creator-shim',
            'all:part:@sanity/base/schema-type':
              'sanity-codegen/schema-type-shim',
            'part:@sanity/base/schema-type': 'sanity-codegen/schema-type-shim',
            '^part:.*': 'sanity-codegen/no-op',
            '^config:.*': 'sanity-codegen/no-op',
            '^all:part:.*': 'sanity-codegen/no-op',
            // 👇👇👇
            'your-module-to-alias': 'sanity-codegen/no-op',
            // 👆👆👆
          },
        },
      ],
      // used to resolve css module imports that are allowed in sanity projects
      'css-modules-transform',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-numeric-separator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
    ],
  },
};

export default config;

---

Also: if you're willing to help test, maybe we can try to tackle #67 together? Lmk!

[jfulse]

Hello! I'm having the same issue. I tried your solution above, but:

• On version 0.9.6 I still get the window is not defined error (importing defaultBabelOptions from "sanity-codegen/cli")
• On version 1.0.0-alpha.12 I'm having issues importing from sanity-codegen in "sanity-codegen.config.ts"; it looks like the compiler can't find it. This might be an issue with my setup?

Cheers!

[ricokahler]

hi @jfulse,

I think long-term it may make sense to add in a window shim but for now we can try adding some conditions to your code to make it compatible with the schema extractor. can you paste in the file that uses window or imports a module that uses window?

[rodrigojmr]

I have the same issue, also using react-day-picker.

Following that up by replacing this line in resizeObserver.js:

var ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver || _resizeObserver.ResizeObserver;

It's totally a hack, but it evades this error.

Apologies for this next tangent.

After I no longer get that error, I get error #59 due to this custom component:

https://www.sanity.io/schemas/advanced-numeric-input-3ad972de

"@sanity/base/components": "sanity-codegen/no-op", fixed it. As for react-day-picker, I also needed to use "react-day-picker*": "sanity-codegen/no-op". I had to add the wildcard because I also use import MomentLocaleUtils from "react-day-picker/moment", and had to comment out this style import import "../node_modules/react-day-picker/lib/style.css?raw" due to react-day-picker styling. I really didn't want to bother adding webpack-css-loader.

I'm available to help testing #67 and resolving this. It took me a long time to trial and error and only after all these things I could run codegen again.

Here's the (awfully coded) component using react-day-picker:
https://gist.github.com/rodrigojmr/cc84ed03446b97c085dd6bd61d835f2e

[ricokahler]

Hi all, I've just released v0.9.7 which includes some browser environment mocking via jsdom-global. Let me know if this works for you!

[rodrigojmr]

It worked! Thank you so much.