Open JackoPham opened 2 years ago
I'm having the same warning too Any solution to this?
me too
I'm having the same warning too Any solution to this?
same issue
i have the same problem
I thought i was the only one. but let me ask something is this error has to do with the ERR_CONNECTION_REFUSED error?
Same Error here.
Same error in docker container. Docker version is 20.10.12, base image is node:alpine
I am getting the same error:
"(node:9112) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ...
to show where the warning was created)
(node:9112) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option."
The same thing here after upgrade to ..... "react-scripts": "^5.0.0" (Node 16.*)
$ npm start
test@0.1.0 start react-scripts start
(node:21944) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ...
to show where the warning was created)
(node:21944) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. Starting the development server...
Compiled successfully!
Is this a duplicate of https://github.com/facebook/create-react-app/issues/11860 ?
This warning disappeared using the repair option in the node.js file. It worked for me
I got a warning when npm start. Please help me solve the problem.
_(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use
node --trace-deprecation ...
to show where the warning was created) (node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUPMIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
i am facing node(8868) type of error. Please help me solve the problem
(node:8868) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE]
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use node --trace-deprecation ...
to show where the warning was created)
(node:8868) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
I got also the same warning! please any solution available ? (node:11648) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option
I am facing the same issue
Would you all stop spamming? What is the purpose of you writing that you have the same issue? Will that fix the issue quicker? Subscribe to the issue and shut up
I have de same error with node 17-slim image in docker but in my computer I have node 17.7.0 and doesn't has the warning
(node:39133) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] (Use node --trace-deprecation ...
to show where the warning was created)
[1] (node:39133) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
any solution for this warning?
I have the same issue
This warning disappeared using the repair option in the node.js file. It worked for me
I got a warning when npm start. Please help me solve the problem. _(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use
node --trace-deprecation ...
to show where the warning was created) (node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUPMIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
What did you do?
Deleting node_modules and run npm install has fixed for me. Probably some dependency has to be update
which dependency needs to update
On Mon, Apr 11, 2022 at 11:43 AM FrancescoVarsallona < @.***> wrote:
Deleting node_modules and run npm install fixed for me. Probably some dependency has to be update
— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/12035#issuecomment-1094592541, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATBEWHBBQCV5H4E4L2UJXRLVEO7KJANCNFSM5N4363XA . You are receiving this because you commented.Message ID: @.***>
I am getting same warnings in multiple systems which have been installed at different point of time. I have tried removing and installing fresh did not fix the issue. My environment is Node 16.13.1, NPM 8.3.0
My way of solving this was... npm run build, then npm install -g serve, npx serve -s build. I couldn't figure out the webpack shit!! and the problem lied with the npm start so instead I used npx serve -s build... hope it helps!
Thank Richard! It's working well
I have got also the same problem. What is the best solution for this?
Obrigado Ricardo! Está funcionando bem
npx server does not dynamically update on mine. is yours updating the changes in the project automatically?
I updated my npm version from linux. You can type sudo npm update -g npm. That fix the same issue. After updated the npm version, I created a react app npx create-react-app myapp, cd myapp and run the command npm start and it worked. I hope you can solve it.
Try removing node_modules and package-lock.json. This worked for me
Try removing node_modules and package-lock.json. This worked for me
man you saved my time. Thank you very much!
I have fixed it. If you change package.json/react-script version to older one(in my case 4.0.3) then install node_module again, and it worked. I think that occurs becuase of dismatch of your node version and react-script version. So if you upgrade your node version or simply downgrade your react-script version, it works.
I have fixed it. If you change package.json/react-script version to older one(in my case 4.0.3) then install node_module again, and it worked. I think that occurs becuase of dismatch of your node version and react-script version. So if you upgrade your node version or simply downgrade your react-script version, it works.
It's appearing because webpack deprecated it and CRA still using it
I finally fixed this.If you are using yarn,just run yarn eject,then you should found '/config/webpackDevServer.config.js' file, Instead of onBeforeSetupMiddleware and onAfterSetupMiddleware, use the setupMiddlewares-property.Like this before:
onBeforeSetupMiddleware(devServer) {
// Keep `evalSourceMapMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
devServer.app.use(evalSourceMapMiddleware(devServer));
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(devServer.app);
}
},
onAfterSetupMiddleware(devServer) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
},
after:
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined')
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app)
}
middlewares.push(
evalSourceMapMiddleware(devServer),
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorkerMiddleware(paths.publicUrlOrPath)
)
return middlewares;
},
Ideally you wouldn't want to eject though. You'd want something that you can apply with craco or a similar tool. I tried a few snippets from this issue and similar issues, and couldn't get it resolved.
Ideally you wouldn't want to eject though. You'd want something that you can apply with craco or a similar tool. I tried a few snippets from this issue and similar issues, and couldn't get it resolved.
yeah,you are correct!I haven't tried craco for now.I thought it would be good if cra team can change the code in webpack devServer config or expose some API for us to customize.
I was having the same issue when trying to deploy a react app. I tried deployment services heroku and netlify, the same problem on both of them.
What fixed it for me is installing the serve package, building the project by running npm run build and replacing the npm start command with serve -s build instead of react-scripts start. Also of course removing the /build directory from .gitignore
This works locally too.
I'm not sure if its the best practice, but it works.
My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem?
One person mentioned it, but it's just one, so I'm wondering if its unrelated.
Anyone can confirm?
My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem?
One person mentioned it, but it's just one, so I'm wondering if its unrelated.
Anyone can confirm?
I have the same problem when running react with dotnet spa,It seems something related to sockets and proxy,I stuggled for a long time,didn't fixed it yet.
I find another temporary solution: 1.yarn add rewire; 2.make a start.js,and type
const rewire = require('rewire')
const defaults = rewire('./node_modules/react-scripts/scripts/start')
const serverConfig = defaults.__get__('createDevServerConfig')
serverConfig.onBeforeSetupMiddleware = null;
serverConfig.onAfterSetupMiddleware = null;
serverConfig.setupMiddlewares = (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined')
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app)
}
middlewares.unshift(
evalSourceMapMiddleware(devServer)
)
middlewares.push(
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorkerMiddleware(paths.publicUrlOrPath)
)
return middlewares;
}
3.change package.json scripts.start to
"start":"node start",
that’s works for me.
My local server doesn't update automatically, I need to hit f5 constantly. Anyone else having this problem? One person mentioned it, but it's just one, so I'm wondering if its unrelated. Anyone can confirm?
I have the same problem when running react with dotnet spa,It seems something related to sockets and proxy,I stuggled for a long time,didn't fixed it yet.
I'm thinking it's related. It showed up at the same time as this error, they come from same node module, and at least three people here have the same problem.
Try removing node_modules and package-lock.json. This worked for me
You're my hero today! I had a mismatch somewhere along the line and couldn't compile my site anymore, after deleting those two and re-running npm install
everything is working again. Thank you!
Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?
const rewire = require('rewire') const defaults = rewire('./node_modules/react-scripts/scripts/start') const serverConfig = defaults.__get__('createDevServerConfig') serverConfig.onBeforeSetupMiddleware = null; serverConfig.onAfterSetupMiddleware = null; serverConfig.setupMiddlewares = (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if (fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.unshift( evalSourceMapMiddleware(devServer) ) middlewares.push( redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; }
Doesn't work watch on windows 11 and docker, same thing also occurs in nextjs (in nextjs it can be fixed by changing config). Anyone knows what is the reason?
Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?
const rewire = require('rewire') const defaults = rewire('./node_modules/react-scripts/scripts/start') const serverConfig = defaults.__get__('createDevServerConfig') serverConfig.onBeforeSetupMiddleware = null; serverConfig.onAfterSetupMiddleware = null; serverConfig.setupMiddlewares = (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if (fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.unshift( evalSourceMapMiddleware(devServer) ) middlewares.push( redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; }
I have tried using craco to override the devServer config,didn't work.craco force checking the onBeforeSetupMiddleware and onAfterSetupMiddware exist and should be instance of Function.I think it because carco itself depends the old version car.What version create-react-app are you using,I found @craco/carco itself depends on cra veresion 4.*,if you are using cra version 5,switch to other library instead of using craco may be a better choose.
What version create-react-app are you using
For CRA 5 I'm using craco 7.0.0-alpha (currently 7.0.0-alpha.3).
There is a simpler solution to the hotreload problem, if using docker on windows 11 then you have WSL (e.g. Ubuntu) Add your project there (rather than running from the windows folder) and docker-compose up. It works without any problems
Anyone knows how to do something similar to below (assuming it works), but with craco instead of rewire?
const rewire = require('rewire') const defaults = rewire('./node_modules/react-scripts/scripts/start') const serverConfig = defaults.__get__('createDevServerConfig') serverConfig.onBeforeSetupMiddleware = null; serverConfig.onAfterSetupMiddleware = null; serverConfig.setupMiddlewares = (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined') } if (fs.existsSync(paths.proxySetup)) { require(paths.proxySetup)(devServer.app) } middlewares.unshift( evalSourceMapMiddleware(devServer) ) middlewares.push( redirectServedPath(paths.publicUrlOrPath), noopServiceWorkerMiddleware(paths.publicUrlOrPath) ) return middlewares; }
I have tried using craco to override the devServer config,didn't work.craco force checking the onBeforeSetupMiddleware and onAfterSetupMiddware exist and should be instance of Function.I think it because carco itself depends the old version car.What version create-react-app are you using,I found @craco/carco itself depends on cra veresion 4.*,if you are using cra version 5,switch to other library instead of using craco may be a better choose.
For anyone using CRACO and is trying to override the devServer config, in order to resolve the DeprecationWarning, here is the solution.
import fs from "fs";
import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
import evalSourceMap from "react-dev-utils/evalSourceMapMiddleware";
import redirectServedPath from "react-dev-utils/redirectServedPathMiddleware";
import noopServiceWorker from "react-dev-utils/noopServiceWorkerMiddleware";
import type { CracoConfig } from "@craco/craco";
const config: CracoConfig = {
webpack: {
plugins: {
add: [
new NodePolyfillPlugin({
excludeAliases: ["console"],
}),
] /* An array of plugins */,
},
},
devServer: (devServerConfig, { env, paths }) => {
devServerConfig = {
onBeforeSetupMiddleware: undefined,
onAfterSetupMiddleware: undefined,
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error("webpack-dev-server is not defined");
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app);
}
middlewares.push(
evalSourceMap(devServer),
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorker(paths.publicUrlOrPath)
);
return middlewares;
},
};
return devServerConfig;
},
};
export default config;
I hope this helps someone. Happy hacking : )
Hi i am new using CRACO, how did you apply the suggested configuration to override the configuration?.
Sorry for the question but i cant figure out how to do this, I appreciate your help.
rewire
Hi is this possible to do using react-app-rewired?If yes how? thanks
ok, i figure it out. If your are NOT using typescript this is the solution suggested by luis, using CRACO:
install modules using npm:
npm i @craco/craco@7.0.0-alpha.3
npm i node-polyfill-webpack-plugin
Create craco.config.js
file on root directory, whit this code:
const fs = require("fs");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const evalSourceMap = require("react-dev-utils/evalSourceMapMiddleware");
const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
const noopServiceWorker = require("react-dev-utils/noopServiceWorkerMiddleware");
module.exports = {
webpack: {
plugins: {
add: [
new NodePolyfillPlugin({
excludeAliases: ["console"],
}),
],
},
},
devServer: (devServerConfig, { env, paths }) => {
devServerConfig = {
onBeforeSetupMiddleware: undefined,
onAfterSetupMiddleware: undefined,
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error("webpack-dev-server is not defined");
}
if (fs.existsSync(paths.proxySetup)) {
require(paths.proxySetup)(devServer.app);
}
middlewares.push(
evalSourceMap(devServer),
redirectServedPath(paths.publicUrlOrPath),
noopServiceWorker(paths.publicUrlOrPath)
);
return middlewares;
},
};
return devServerConfig;
},
};
configure your package.json
:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
},
And the waring is gone
I got a warning when npm start. Please help me solve the problem.
_(node:1681) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use
node --trace-deprecation ...
to show where the warning was created) (node:1681) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUPMIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.