Get help on Discord

Customizing webpack configuration for split pane previews in Next.js app

1 replies
Last updated: Jul 1, 2021
Hi Sanity Team, i see there is some new code in the repo that allows for customizing the webpack configuration. Any ideas on when this will be released? (Or, is there a way I can install 
@sanity/server
at this latest commit? I'm not sure how to do this with a monorepo..)
Jun 30, 2021, 12:50 AM
All good! that --tag=custom-webpack should do the trick.My use case, by the way, is related to the split pane previews. I'm importing components from my frontend app, which is built on next.js. There are a few dependencies that will break when used outside of the context of a next app, such as 
next/link
, as well as some node stuff like 
fs
, 
net
& 
tls
. So, I need to tell webpack to resolve 
next/link
to a simple mock I'm using. Here is how I'm doing it:

const webpack = require('../.sanity-temp/node_modules/webpack');
const path = require('path');
const { merge } = require('webpack-merge');
const dotenv = require('dotenv');

const envPath = path.resolve(__dirname, '../docs/.env');

const { parsed: envVars } = dotenv.config({ path: envPath });

const modulesToTransform = [/tailwind-styled-components/];

module.exports = (config) => {
  config.module.rules = config.module.rules.map((rule) => {
    if (!rule.test || rule.test.toString() !== /(\.jsx?|\.tsx?)/.toString()) {
      return rule;
    }
    return {
      ...rule,
      exclude: (absPath) => {
        if (modulesToTransform.some((pattern) => pattern.test(absPath))) {
          return false;
        }
        if (/node_modules/.test(absPath)) return true;
        return false;
      },
    };
  });
  const custom = {
    plugins: [
      new webpack.DefinePlugin({
        CONTEXT: JSON.stringify('sanity'),
        ...Object.entries(envVars).reduce(
          (acc, [key, value]) => ({
            ...acc,
            [`process.env.${key}`]: JSON.stringify(value),
          }),
          {},
        ),
      }),
    ],
    resolve: {
      alias: {
        'next-sanity-image': path.resolve(
          __dirname,
          '../docs/src/mocks/nextSanityImage',
        ),
        'next/link': path.resolve(__dirname, '../docs/src/mocks/nextLink'),
        'next/image': path.resolve(__dirname, '../docs/src/mocks/nextImage'),
        '@sentry/node': '@sentry/browser',
        fs: path.resolve(__dirname, '../docs/.storybook/mocks/fs.mock.js'),
        net: path.resolve(__dirname, '../docs/.storybook/mocks/net.mock.js'),
        tls: path.resolve(__dirname, '../docs/.storybook/mocks/tls.mock.js'),
        react: path.resolve(__dirname, '../node_modules/react'),
        'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
        '@swell-public/docs': path.resolve(__dirname, '../docs/src/'),
      },
    },
  };

  const merged = merge(config, custom);
  return merged;
};
This is doing the trick!
Jul 1, 2021, 5:30 PM

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?