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 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.