After the last update, im having a lot of warnings in the console regarding styled components.
we are currently at “styled-components”: “^6.1.19”,
I was looking for some of those props in our project’s code base (<PROJECT_NAME>) and its not there, that leads me to think that its coming from our various widgets (one example is the treatable - without the engine).
attached a screenshot.
@itzhak-broad-chasm this is included in our migration notes: Widgets Showcase, in section: New Requirement: Defining shouldForwardProp of styled-components upgrade
@bphan ok thank you, there’s also one more thing when running web pack - I get (node:9262) [DEP0060] DeprecationWarning: The util._extend API is deprecated. Please use Object.assign() instead.
was there a mention somewhere of upgrading web pack or something?
@itzhak-broad-chasm This issue is a bit weird. Can you describe more about it?
@binh-deep-cache of course
given our package.json
{
"name": "<PROJECT_NAME>-client",
"version": "16.0.0-alpha001-SNAPSHOT",
"description": "<PROJECT_NAME> Client",
"repository": {
"type": "git",
"url":removed for being able to post
},
"publishConfig": {
"registry": removed for being able to post
},
"engines": {
"node": "^22.17.1"
},
"scripts": {
"build": "webpack --progress --config webpack.prod.js",
"e2e": "npm run e2e:test --",
"e2e:codegen": "playwright codegen https://eoptrunkwieselsimu2:59030/<PROJECT_NAME>/editor",
"e2e:lint": "eslint --ext .ts tests/e2e/src",
"e2e:show-report": "npx playwright show-report",
"e2e:test": "npx playwright test",
"e2e:test:headed": "npx playwright test --headed --workers=1",
"e2e:test:ui": "npx playwright test --ui",
"e2e:cleanup": "npx playwright test --config ./playwright.cleanup.config.ts",
"generate": "npm run generate:antlr && npm run generate:createModelGraph && npm run generate:modelValidation",
"generate:antlr": "antlr4-buildtool runBuildTool --config=antlr-build-tool.config.json",
"generate:createModelGraph": "node ./scripts/createModelGraph.mjs",
"generate:modelValidation": "run-script-os",
"generate:modelValidation:win32": "gradlew -b ./resources/models/build.gradle clean convertValidation --warning-mode all",
"generate:modelValidation:default": "./gradlew -b ./resources/models/build.gradle clean convertValidation --warning-mode all",
"jenkins:bom": "npx @cyclonedx/cyclonedx-npm --output-format 'XML' --output-file ./publish/bom_<PROJECT_NAME>_client.xml",
"jenkins:e2e:init": "npm ci --include=dev",
"jenkins:e2e:test": "npx playwright test --config ./playwright.config.ts",
"jenkins:e2e:teardown": "npx playwright test --config ./playwright.teardown.config.ts",
"jenkins:generate": "npm run generate:createModelGraph && npm run generate:antlr && npm run jenkins:generate:modelValidation",
"jenkins:generate:modelValidation": "./gradlew -b ./resources/models/build.gradle clean convertValidation",
"jenkins:nightly": "npm ci && npm run nightly && npm run jenkins:review && npm run jenkins:publishSnapshot",
"jenkins:publishRelease": "./gradlew publish -P releaseVersion=$npm_package_version -P stage=RELEASE",
"jenkins:publishSnapshot": "./gradlew publish -P releaseVersion=$npm_package_version -P stage=NIGHTLY --info",
"jenkins:release": "npm run jenkins:review && npm run jenkins:bom && npm run jenkins:publishRelease",
"jenkins:review": "npm ci && npm run jenkins:generate && npm run lint && npm test && npm run build",
"lint": "npm run lint:eslint && npm run lint:css",
"lint:css": "stylelint \"./src/**/*.tsx\"",
"lint:eslint": "eslint .",
"lint:eslint:config": "eslint --print-config src/index.tsx",
"lint:eslint:fix": "npm run lint:eslint -- --fix",
"nightly": "node ./scripts/nightly.mjs",
"release": "node ./scripts/release.mjs",
"serve": "webpack serve --progress=profile --config webpack.dev.js",
"start": "npm ci && npm run generate && npm run serve",
"test": "npm run test:unit",
"test:unit": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --forbid-only --forbid-pending --require ignore-styles",
"test:unit:watch": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --watch",
"test:watch": "npm run test:unit:watch",
"tsc": "tsc --watch",
"tsc:check": "tsc",
"update-a12": "node ./scripts/update-a12-dependencies.js"
},
"author": "mgm technology partners",
"license": "UNLICENSED",
"dependencies": {
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-build-tool": "~5.1.0",
"@com.mgmtp.a12.antlrcodeeditor/antlrcodeeditor-core": "~5.0.0",
"@com.mgmtp.a12.base/base-model-api": "~29.0.0",
"@com.mgmtp.a12.client/client-core": "~16.0.0",
"@com.mgmtp.a12.crud/crud-core": "~2.0.0",
"@com.mgmtp.a12.dataservices/dataservices-access": "38.0.0",
"@com.mgmtp.a12.expression/expression-core": "~2.0.1",
"@com.mgmtp.a12.formengine/formengine-core": "~38.0.0",
"@com.mgmtp.a12.kernel/kernel-core-runtime-api-ts": "~30.1.0",
"@com.mgmtp.a12.kernel/kernel-md-facade": "~30.1.0",
"@com.mgmtp.a12.overviewengine/overviewengine-core": "~38.0.0",
"@com.mgmtp.a12.uaa/uaa-authentication-client": "~9.0.2",
"@com.mgmtp.a12.utils/utils-collections": "~6.0.0",
"@com.mgmtp.a12.utils/utils-connector": "~8.0.1",
"@com.mgmtp.a12.utils/utils-localization": "~7.0.0",
"@com.mgmtp.a12.utils/utils-localization-react": "~7.0.0",
"@com.mgmtp.a12.utils/utils-logging": "~6.0.0",
"@com.mgmtp.a12.widgets/widgets-core": "~38.0.0",
"@com.mgmtp.a12.widgets/widgets-styles": "^33.2.2",
"@monaco-editor/react": "^4.6.0",
"acorn": "^8.12.1",
"antlr4": "^4.13.2",
"fuse.js": "^7.0.0",
"immer": "^10.1.1",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"monaco-editor": "^0.33.0",
"react": "^19.1.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^19.1.1",
"react-moment": "^1.1.3",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-saga": "^1.3.0",
"reselect": "^5.1.1",
"styled-components": "^6.1.19",
"typed-redux-saga": "^1.5.0",
"typescript-fsa": "^3.0.0"
},
"overrides": {
"react": "$react",
"react-redux": "$react-redux",
"@com.mgmtp.a12.client/client-core": {
"react-redux": "$react-redux"
}
},
"devDependencies": {
"@com.mgmtp.a12.devtools/devtools": "^10.1.1",
"@com.mgmtp.a12.devtools/eslint-config": "^2.0.2",
"@cyclonedx/cyclonedx-npm": "^1.19.3",
"@eslint/eslintrc": "^3.3.1",
"@eslint/js": "^9.32.0",
"@playwright/test": "1.52.0",
"@types/chai": "^4.3.17",
"@types/deep-equal": "^1.0.4",
"@types/inquirer": "^9.0.7",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.7",
"@types/mocha": "^10.0.7",
"@types/node": "^20.12.12",
"@types/react": "^19.1.9",
"@types/react-dom": "^19.1.7",
"@types/react-redux": "^7.1.34",
"@types/sinon": "^17.0.3",
"@types/sinon-chai": "^3.2.12",
"@types/uuid": "^3.4.10",
"autoprefixer": "^10.4.20",
"chai": "^4.5.0",
"chokidar": "^3.6.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^12.0.2",
"core-js": "^3.38.0",
"cross-env": "^7.0.3",
"cross-spawn": "^7.0.3",
"css-loader": "^7.1.2",
"eslint": "^9.32.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-playwright": "^2.2.2",
"eslint-plugin-prettier": "^5.5.3",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"global-jsdom": "^24.0.0",
"html-webpack-plugin": "^5.6.0",
"ignore-styles": "^5.0.1",
"inquirer": "^10.1.8",
"jsdom": "^24.1.1",
"jsdom-global": "^3.0.2",
"mini-css-extract-plugin": "^2.9.1",
"mocha": "^10.7.3",
"postcss": "^8.4.41",
"postcss-loader": "^8.1.1",
"postcss-styled-syntax": "^0.6.4",
"prettier": "^3.3.3",
"redux-saga-test-plan": "^4.0.6",
"run-script-os": "^1.1.6",
"semver": "^7.6.3",
"sinon": "^18.0.0",
"sinon-chai": "^3.7.0",
"source-map-support": "^0.5.21",
"style-loader": "^4.0.0",
"stylelint": "^16.9.0",
"stylelint-config-recommended": "^14.0.1",
"stylus": "github:stylus/stylus#0.64.0",
"stylus-loader": "^8.1.1",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
"tsconfig-paths": "^4.2.0",
"tslint": "^6.1.3",
"typescript": "^5.8.2",
"typescript-plugin-css-modules": "^5.1.0",
"uuid": "^10.0.0",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4",
"webpack-1ev-server": "^5.0.4",
"webpack-merge": "^6.0.1"
},
"private": true
}
when running “npm run serve” at the end of the build I get this error
this is on dev environment, so our webpack config consists of 2 files
web pack dev
const path = require("path");
const webpack = require("webpack");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const <PROJECT_NAME>Version = process.env.npm_package_version;
module.exports = merge(common, {
mode: "development",
devtool: "eval-source-map",
devServer: {
devMiddleware: {
writeToDisk: true,
publicPath: "/<PROJECT_NAME>/extensions"
},
port: 9000,
proxy: [
{
context: (url) =>
url.includes("<PROJECT_NAME>") && !url.includes("<PROJECT_NAME>/extensions") && !url.includes("<PROJECT_NAME>/editor"),
target: "http://localhost:8080",
secure: false
}
],
historyApiFallback: {
rewrites: [
{
from: /^\/<PROJECT_NAME>\/editor/,
to: "/<PROJECT_NAME>/extensions"
}
]
},
client: {
overlay: false
}
},
watchOptions: {
ignored: /node_modules/
},
cache: {
type: "filesystem",
version: <PROJECT_NAME>Version,
buildDependencies: {
config: [__filename, path.resolve(process.cwd(), "webpack.common.js")]
}
},
plugins: [
new HtmlWebpackPlugin({
template: "resources/html/index.html",
excludeChunks: ["<PROJECT_NAME>"],
inject: "body",
hash: false
}),
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify("development"),
// needed for faster hot reloading with styled-components
SC_DISABLE_SPEEDY: false
})
]
});
and web pack common
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const <PROJECT_NAME>Version = process.env.npm_package_version;
module.exports = {
entry: {
main: "./src/index.tsx",
<PROJECT_NAME>: "./src/extensions/index.ts"
},
output: {
// This is normaly the default value, but it is needed for the clean-webpack-plugin
path: path.resolve(process.cwd(), "dist")
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
// disable type checker - we will use it in fork plugin
transpileOnly: true
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false
}
},
{
loader: "css-loader",
options: {
esModule: false
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2)$/i,
type: "asset",
generator: {
filename: "static/media/[hash][ext][query]"
}
},
{
test: /\.styl$/,
exclude: /\.plasma\.styl$/,
use: [
"style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false
}
},
{
loader: "css-loader",
options: {
esModule: false
}
},
"postcss-loader",
{
loader: "stylus-loader",
options: {
stylusOptions: {
resolveURL: false
}
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin({}),
new MiniCssExtractPlugin({}),
new CopyWebpackPlugin({
patterns: [
{ from: "resources/models/*.json", to: "models/[name][ext]", toType: "template" },
{ from: "generated/models/*.validation.js", to: "models/[name][ext]" },
{ from: "node_modules/@com.mgmtp.a12.widgets/widgets-styles/dist/assets", to: "assets" },
{ from: "node_modules/monaco-editor/min/vs", to: "vs" }
]
}),
new ForkTsCheckerWebpackPlugin(),
new webpack.DefinePlugin({
<PROJECT_NAME>_VERSION: `"${<PROJECT_NAME>Version}"`,
A12_ENABLE_REACT_18_SUPPORT: false
})
],
optimization: {
splitChunks: {
cacheGroups: {
<PROJECT_NAME>Ext: {
name: "<PROJECT_NAME>-ext",
test: /\.ext\.module\.css$/,
chunks: "all",
enforce: true
}
}
}
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".json", ".css", ".styl"],
// To avoid error "Module not found: Error: Can't resolve 'fs' in 'node_modules/antlr4'"
// which results from 'fs' set to null in
// 'node_modules/antlr4/FileStream.js' and 'node_modules/antlr4/CharStreams.js'
fallback: {
fs: false
},
alias: {
antlr4: path.resolve(__dirname, "node_modules/antlr4/dist/antlr4.node.cjs")
}
}
};
I would assume its coming off one of the plugins / libraries, I just wanted to know if its something known, if not, I would have to search the node_modules for the use of util._extend to see which one is causing that.
Or maybe you can follow by the hint from the console (Use node --trace-deprecation ..) to find our the issuing package 