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,
},
},
});
};
Related
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.
I'm trying to implement hot reloading in my company's project. The projet works with React, Redux and .NET with Serverside Rendereing (SSR). I want my project to hot reload when I'm working on my React and SCSS files and keep my state as is (so I don't have to redo the clicks etc. on my app).
To achieve that, I tried to use the devServer conf from Webpack, like so :
devServer: {
static: distFolder,
devMiddleware: {
writeToDisk: true,
serverSideRender: true,
publicPath: distFolder
},
proxy: {
context: () => true,
target: 'http://localhost:5000',
},
hot: true,
port: 3000
},
The webpack dev server is running well, but I have an error on my app :
Error
Note that I tried several options, with or without proxy, with or without serverSideRender, with or without static... I can't find any way to solve this on the webpack documentation, so I'm looking for people who had the same issues and who managed to resolve it.
Thanks !
Does anyone know how I can cache my APP_SHELL files using sw-precache plugin and React?
The application was created with the cra command and I have managed to read my own service-worker. For the build and to take my files I have the following configuration:
module.exports = {
staticFileGlobs: [
'build/static/css/**.css',
'build/static/js/**.js',
'index.html',
'/'
],
swFilePath: './build/service-worker.js',
stripPrefix: 'build/',
importScripts: (['./service-worker-custom.js']),
handleFetch: false,
minify: true,
}
But I do not know in which part to indicate that I need to cache the APP_SHELL of my PWA.
I have tried to do it from my custom service worker but I can not register the files correctly, I have tried it in this way:
const cacheUrls = [
'/',
'build/static/css/**.css',
'build/static/js/**.js',
'build/media/**.jpg'
];
const cacheUrls = [
'/',
'/index.html',
'/static/css/',
'/static/js/',
'/static/media/',
];
const cacheUrls = [
'/',
'build/static/css/*.css',
'build/static/css/**/*.css',
'build/static/js/*.js',
'build/static/js/**/*.js',
'build/media/**/*.jpg',
'build/media/*.jpg'
];
But in no way registers the files in cache, only the index.html and the others when reviewing their conditional from the chrome console have the same content as index.html.
Thanks!
Sample repo demonstrating the issue is here.
I'm trying to set up webpack dev server so that:
Requests to / are served by public/landing.html (a static landing page)
Requests to anything else are served by my React app
Using create-react-app, and based on webpack-dev-server's options, I've set up my webpackDevServer.config.js as follows:
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
rewrites: [
// shows views/landing.html as the landing page
{ from: /^\/$/, to: 'landing.html' },
// shows views/subpage.html for all routes starting with /subpage
{ from: /^\/subpage/, to: 'subpage.html' },
// shows views/404.html on all other pages
{ from: /./, to: '404.html' },
],
},
And when I start webpack here's what I see:
Requests to /subpage are routed correctly to subpage.html
Requests to /foo are routed correctly to 404.html. Eventually, these would be handled by my React app.
Requests to / are routed incorrectly to my React app.
How can I get landing.html to respond to requests at /?
I ended up opening a bug request with webpack-dev-middleware and discovered it was not a bug but a failure of configuration.
Specifically, the issue is using HtmlWebpackPlugin alongside historyApiFallback. I believe plugins are processed before the regex matching, and HtmlWebpackPlugin's default file output is index.html; this means that out of the box, / will always be routed to the HtmlWebpackPlugin output file.
The solution to this is to set a custom filename in HtmlWebpackPlugin, which allows you to control the matching again. Here's a sample repo demonstrating the fix and here's the webpack config:
module.exports = {
context: __dirname,
entry: [
'./app.js',
],
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devServer: {
publicPath: "/",
// contentBase: "./public",
// hot: true,
historyApiFallback: {
// disableDotRule: true,
rewrites: [
{ from: /^\/$/, to: '/public/index.html' },
{ from: /^\/foo/, to: '/public/foo.html' },
{ from: /(.*)/, to: '/test.html' },
],
}
},
plugins: [
new HtmlWebpackPlugin({
title: "Html Webpack html",
hash: true,
filename: 'test.html',
template: 'public/plugin.html',
}),
],
};
Two thoughts come to mind:
What you want to do is not possible with Webpack Dev Server (as far as I'm aware)
And, once npm run build is run and deployed the deployed app would not follow the same rules as configured in Webpack Dev Server
Even if I'm mistaken on #1, #2 seems like a bigger issue if you ever plan to deploy the app. This leads me to recommend an alternate setup which will work on dev and production (or wherever it's deployed).
A few options:
setup the app as a single-page app (SPA) and use React Router to serve the static routes (/ and /subpage) and wildcards (everything else)
setup node (or another server) to serve the static routes (/ and /subpage) and wildcards (everything else)
An Attempt
In an attempt to setup the routes I was able to achieve this setup:
Display landing.html when / is requested
Display subpage.html when /subpage is requested
Display the React App at a specific path, like app.html
To do this make the following changes:
Move /public/index.html to /public/app.html
mv ./public/index.html ./public/app.html
In /config/webpackDevServer.config.js, update historyApiFallback to:
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
rewrites: [
// shows views/landing.html as the landing page
{ from: /^\/$/, to: "landing.html" },
// shows views/subpage.html for all routes starting with /subpage
{ from: /^\/subpage/, to: "subpage.html" },
// shows views/app.html on all other pages
// but doesn't work for routes other than app.html
{ from: /./, to: "app.html" }
]
}
In /config/paths.js update appHTML to:
appHtml: resolveApp("public/app.html")
In /config/webpack.config.dev.js, updateplugins` to include:
new HtmlWebpackPlugin({
filename: "app.html",
inject: true,
template: paths.appHtml
})
Requesting a random URL, like localhost:3000/foo will return a blank page but contains the HTML from the app.html page without the bundled <script> tags injected. So maybe you can find a solution to this final hurdle.
I am using webpack for react(es6) project.
My problem
I have built react app with ES6, so everywhere i have used import keyword for dependency. Now for server side rendering i am using NodeJS so its not support import yet. For this i have to use require instead of import.
Now i have used webpack for bundling my app, but it always generate final bundle file (single.bundle.js), That's why i am not able to import chunk of transpiled code for server side rendering.
Solution
If it is possible to transpile every file (src to dist), then i can import this es5 file into nodejs server code.
Question
Is this possible with webpack to transpile whole folder with same out put rather than bundle file ?
Otherwise i have to use grunt or gulp. :(
You can use webpack for server too. It will transpile to webpack server bundle only your specific code containing react and excluding node_modules by externals option. Here is example of webpack.config.js for server side
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: './src/server.js',
output: {
path: __dirname,
filename: 'server.js'
},
target: 'node',
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
externals: nodeModules,
}