👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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.

Was this answer helpful?