Skip to content
Get help on Slack

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 remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?