I ran into a weird issue with my recent Nextjs build that I cannot figure out. Any page other than the index.js page throws an error saying that Fast Refresh had to perform a full reload whenever I make a change to the page.
Nextjs version: 12.2.3
React version: 17.0.2
The error in the terminal (no console errors):
Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: Aborted because ./pages/contact.js is not accepted
Update propagation: ./pages/contact.js -> ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=D%3A%5Csites%5Coverpeaks%5Coverpeaks-nextjs%5Cpages%5Ccontact.js&page=%2Fcontact!
at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=1669755499923:869:31)
at http://localhost:3000/_next/static/chunks/webpack.js?ts=1669755499923:552:21
at Array.map (<anonymous>)
contact.js:
const contact = () => {
return <div>contact</div>;
};
export default contact;
next.config.js:
/**
* #type {import('next').NextConfig}
*/
module.exports = {
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
domains: ["cms.overpeaks.ca"],
},
webpack: (config) => {
config.resolve = {
...config.resolve,
fallback: {
fs: false,
path: false,
os: false,
},
};
return config;
},
};
What my structure looks like:
image
I noticed this while working on my about.js page, so I thought it might have to do with the code within there, so I created a brand new page (contact.js) and am having the same issue. I've tried removing everything within next.config.js with no difference. At this point I'm starting to think there's a bug within Nextjs causing this.
Related
This is a weird one, my react application can run without any trouble, but when I ran a yarn:build, the built dist cannot be hosted properly even though the build was successful. Following is the console output.
Uncaught TypeError: e is not a constructor
at ETe (index.504b65a0.js:323:24562)
at Ce (index.504b65a0.js:335:4732)
at index.504b65a0.js:313:68312
The most recent update I did was introducing aws-sdk to the code. And while I bumped into Uncaught ReferenceError: global is not defined and Failed to resolve entry for package "fs"., I added couple of fields in my Vite.config.
import { defineConfig } from 'vite';
import createVitePlugins from './config/plugins';
import cssOption from './config/style';
import { VITE_APP_BASE, VITE_APP_PORT, VITE_APP_OPEN } from './config';
import proxy from './config/setupProxy';
import path from 'path';
import build from './config/build';
export default defineConfig(() => {
return {
base: VITE_APP_BASE,
plugins: createVitePlugins(),
css: cssOption,
server: {
host: true,
port: VITE_APP_PORT,
open: VITE_APP_OPEN,
proxy,
},
define: {
global: 'window', // <----------- to resolve global
},
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
fs: require.resolve('rollup-plugin-node-builtins'), // <-------- to resolve fs
},
},
build,
};
});
Since the code is running fine in development mode, I don't really know what could the problem be and where shall I look into. Please let me know what other information do I have to provide to properly debug this issue.
Hi I'm loosely following this guide and it's all fine except when I need to add the polyfill packages to the webpack. When in gatsby develop there is no html generated.
when using gatsby build && gatsby serve I get some of the page but it's missing the background hero image and some other components. The text is white so I'm not sure how much gets rendered there.
the react context I'm building has a part that requires some of the left out polyfill packages. Not sure what part but I need help figuring out why the page does not render at all in develop mode.
My gatsby-node.js
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
// fs: require.resolve(''),
fs: false,
stream: require.resolve('stream-browserify'),
// stream: false,
// buffer: require.resolve('buffer/'),
// util: require.resolve('util/'),
// assert: require.resolve('assert/'),
http: require.resolve('stream-http/'),
// http: false,
// url: require.resolve('url/'),
https: require.resolve('https-browserify/'),
// https: false,
os: require.resolve('os-browserify/browser'),
// os: false,
path: require.resolve('path-browserify'),
// path: false,
},
},
});
};
I have the following structure to use one domain to multiple projects:
A repo that contains a single vercel.json file to configure path to others projects
A repo that contains a home app example
A repo that contains a checkout app example
The vercel.json works pretty great and is deployed in nizen.com.br, here is how is it:
// vercel.json
{
"rewrites": [
{
"source": "/checkout",
"destination": "https://checkout.nizen.com.br/checkout"
},
{
"source": "/",
"destination": "https://home.nizen.com.br"
}
]
}
So if we go to nizen.com.br we get the home app example without styles and a bunch of errors in console trying to get the assets of home.nizen.com.br in nizen.com.br and the same happens to checkout app.
Here is one of the similar errors that appear in console on Home app:
And here is the checkout app:
About the app next.config.js files, only Home app stays untouched and Checkout app has a basePath added with value "/checkout" as follows:
// Checkout app next.config.js
module.exports = {
reactStrictMode: true,
basePath: "/checkout",
};
I have tried to use the Next rewrites in hope that will solve the problem but it didn't work.
// example of rewrite that I did
module.exports = {
async rewrites() {
return [
{
source: "/",
destination: "https://home.nizen.com.br",
},
];
},
};
I tried to pass :path* and :path in source and destination, as well use fallback and even change the destination to checkout app to see if something change and none of that worked.
If I got to https://home.nizen.com.br the app runs perfect and same to checkout. What am I doing wrong?
I have solved this question changing the strategy. Instead of using a repo with vercel.json to route the micro-frontends, I'm using the home app as the project hosted in nizen.com.br and it's next.config.js file is the one who makes the magic happen!
//Home App next.config.js file
module.exports = {
reactStrictMode: true,
async rewrites() {
return {
fallback: [
{
source: "/checkout",
destination: "https://checkout.nizen.com.br/checkout",
},
{
source: "/checkout/:path*",
destination: "https://checkout.nizen.com.br/checkout/:path*",
},
],
};
},
};
Both the source and destination must point to the same sub-path (/checkout) and both fallback blocks are necessary. I'm using Next version 12 by the time I'm writing this.
I have created two dynamic page but error displayed:
exporting a Next.js application via next export disables API routes.
This command is meant for static-only hosts, and is not necessary to
make your application static. Pages in your application without
server-side data dependencies will be automatically statically
exported by next build, including pages powered by getStaticProps.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export
I followed exportPathMap method using next.config.js but could not solve. Could you please check my config code below solve this issue?
Page Root: pages/category/[list]/[id].js and pages/store/[list]/[id].js
next.config.js
module.exports = {
images: {
domains: ["dl8mjowvdz1rh.cloudfront.net", "app.ae"],
},
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/': { page: '/' },
'/category/:list/:id': { page: '/category/:list/:id', query: { title: 'Category Page' } },
'/store/:list/:id': { page: '/store/:list/:id', query: { title: 'Store Page' } },
}
},
};
I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error
Error: Couldn't find a style target
We used reactDOMserver, react-app-wire, with webpack-override file
See webpack configs below:
const { resolve } = require("path");
require("ignore-styles");
module.exports = {
webpack: function (config) {
config.entry = resolve(dirname, "../client/src/ssr");
config.optimization = undefined;
config.output = {
filename: "ssr.js",
globalObject: 'this',
libraryTarget: "commonjs",
path: resolve(dirname, "../client/build"),
};
return config;
},
};
from server
app.get("^/$", (req, res) => {
Object.assign(global, {
navigation: {},
window: ssr.getWindow(),
navigator: {
userAgent: req.headers["user-agent"],
},
global: {},
document:ssr.ssrDocument
});
const App = require("./build/ssr");
const context = {};
let app = App.default(req.url, context);
then res,render app
AND SSR JS FILE
ssr.js file :
import { renderToString } from "react-dom/server";
for renderToString(
....
<App/>
....
)
And received Error: Couldn't find a style target
I had a CSR app and now implemented Server-Side Rendering (SSR) with React, and get this error
Error: Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid
Get this error when I run the server and try to access the page.
We also tried other approaches with these loaders:
css-loader, sass loader and style-loader and even with isomorphic-style-loader
They led to the error with No PostCSS config and after fixing this by adding to the project postcss.config.js file AND AFTER we received same error about style target and additional error with antd
Error: No PostCSS Config found in: D:_PROJECT....\client\node_modules\antd\dist
Tech sack in use: nodejs, reactjs, antdesign, babel and webpack.
I already tried a lot of solutions from StackOverflow and other sources, nothing helped!
Please, help me to solve it.
Thank you!
I think you cannot use style-loader server side.
Find the loader like this: https://github.com/codebandits/react-app-rewire-css-modules/blob/master/index.js just use style-loader instead, and remove it.. or switch to razzle