Customizing webpack configuration for split pane previews in Next.js app
1 replies
Last updated: Jul 1, 2021
J
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/serverat this latest commit? I'm not sure how to do this with a monorepo..)
Jun 30, 2021, 12:50 AM
J
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
This is doing the trick!
next/link, as well as some node stuff like
fs,
net&
tls. So, I need to tell webpack to resolve
next/linkto 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; };
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.