Hi, I am trying to use nextra with an existing next.js (12.0.10) and react (17.0.2) Project.
The current config file had the following content-
const flowRight= require("lodash/flowRight");
// TODO: enable AntDDayjsWebpackPlugin after this PR is merged: https://github.com/ant-design/antd-dayjs-webpack-plugin/pull/64
// const AntDDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
if (!process.env.ROOT_URL) {
if (process.argv[1].endsWith("/depcheck")) {
/* NOOP */
} else {
throw new Error("ROOT_URL is a required envvar");
}
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(function (process = null) {
// You *must not* use `process.env` in here, because we need to check we have
// those variables. To enforce this, we've deliberately shadowed process.
module.exports = () => {
const withLess = require("next-with-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(
path.resolve(__dirname, "../assets/antd-custom.less"),
"utf8"
)
);
const ContentSecurityPolicy = `
default-src 'self';
frame-src 'self' https://js.stripe.com;
script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com;
img-src 'self' avatars.githubusercontent.com;
style-src 'self' 'unsafe-inline' ;
style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com;
font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com;
`;
const securityHeaders = [
{
key: "Content-Security-Policy",
value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
},
];
return flowRight(withLess)({
poweredByHeader: false,
distDir: `../.next`,
trailingSlash: false,
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
},
async headers() {
return [
{
// Apply these headers to all routes in your application.
source: "/:path*",
headers: securityHeaders,
},
];
},
webpack(config, { webpack, isServer }) {
return {
...config,
plugins: [
...config.plugins,
new webpack.DefinePlugin({
/*
* IMPORTANT: we don't want to hard-code these values, otherwise
* we cannot promote a bundle to another environment. Further,
* they need to be valid both within the browser _AND_ on the
* server side when performing SSR.
*/
"process.env.ROOT_URL":
"(typeof window !== 'undefined' ? window.__GRAPHILE_APP__.ROOT_URL : process.env.ROOT_URL)",
"process.env.T_AND_C_URL":
"(typeof window !== 'undefined' ? window.__GRAPHILE_APP__.T_AND_C_URL : process.env.T_AND_C_URL)",
}),
new webpack.IgnorePlugin({
// These modules are server-side only; we don't want webpack
// attempting to bundle them into the client.
resourceRegExp: /^(node-gyp-build|bufferutil|utf-8-validate)$/,
}),
// new AntDDayjsWebpackPlugin(),
],
externals: [
...(config.externals || []),
isServer ? { "pg-native": "pg/lib/client" } : null,
].filter((_) => _),
};
},
});
};
})();
``` and it returned ->
```{
poweredByHeader: false,
distDir: '../.next',
trailingSlash: false,
headers: [AsyncFunction: headers],
webpack: [Function: webpack]
}````
Now I tried mixing nextra with the config using the method shared, destructuring and using flowRight(lodash) , but all of them are causing the all the pages in my next.js site to stop working.
Would love any insight into if I can retrofit nextra in the existing config. Right now, I get a feeling that combined webpack is not working correctly, though not sure how to debug it. Any help/directions here would be really helpful. Thanks
Hi, I am trying to use nextra with an existing next.js (12.0.10) and react (17.0.2) Project. The current config file had the following content-