devserver associated setting may not come to effect when use function

[DamonMuscle]

module.exports = {
/config 1/
devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
devServerConfig.port = 3009;
return devServerConfig;
},
/config 2/
devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
return { ...devServerConfig, port: 3009 };
},
/config 3/
devServer: {
port: 3009,
},
};
When I use config 1 or 2, the setting will not come to effect. Only config 3 works fine.

create-react-app -V
3.4.1

"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.47",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"
},
"devDependencies": {
"@craco/craco": "^5.6.4"
}

[patricklafrance]

Hi @DamonMuscle

Not much I can do for this one.

With option 3 CRACO set CRA PORT env variable (https://create-react-app.dev/docs/advanced-configuration) which is then pick up by CRA here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L60

This is why it works.

When you use the function format of CRACO devServer, sadly, the function is executed at runtime when the devServer proxy is created by CRA. This is too late to set an environment var and CRA doesn't acknowled the port prop of the devServer config.

[DamonMuscle]

Hi @patricklafrance

Thank you for your reply.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.