Bug report

Required System information

• Node.js version: 18.19.0
• NPM version: 10.2.3
• Strapi version: 4.14.3 -> 4.24.2
• Database: MySQL
• Operating system: darwin-x64
• Is your project Javascript or Typescript: JavaScript

Describe the bug

When updating Strapi to latest version or incrementally upgrading Strapi it results in a webpack error on yarn build from version 4.15.2 onwards

Steps to reproduce the behavior

4.14.3 -> 4.24.2 Direct

1. Update all strapi package.json dependencies to 4.24.2 and update node engine string to specify node v18 - 20
2. yarn install (all works fine)
3. Yarn add react@^18.0.0 react-dom@^18.0.0 react-router-dom@^5.2.0 styled-components@^5.2.1
4. yarn build (fails, results in: TypeError: webpack.DefinePlugin is not a constructor)

4.14.3 -> 4.15.2 Incremental

1. Manually update from all versions in between 4.14.3 to 4.15.2 incrementally.
2. yarn install and build all works fine up until v4.15.2 where the webpack error starts showing up

Downgrade and migration guide

Downgraded to 4.14.0 and followed migration guide:
https://docs.strapi.io/dev-docs/migration/v4/migration-guide-4.14.0-to-4.15.5

Again, results in the same behaviour.

Expected behavior

When upgrading, Strapi should retain webpack integration.

Screenshots

yarn build error:

Code Snippets

Yarn build --debug

yarn run v1.22.22
$ strapi build --debug
[DEBUG] Loaded package.json:
 {
  name: 'backend',
  private: true,
  version: '0.1.0',
  description: 'A Strapi application',
  scripts: {
    develop: 'strapi develop',
    start: 'strapi start',
    build: 'strapi build',
    strapi: 'strapi'
  },
  devDependencies: {},
  dependencies: {
    '@strapi/plugin-color-picker': '4.15.2',
    '@strapi/plugin-i18n': '4.15.2',
    '@strapi/plugin-users-permissions': '4.15.2',
    '@strapi/strapi': '4.15.2',
    mysql: '2.18.1',
    react: '^18.0.0',
    'react-dom': '^18.0.0',
    'react-router-dom': '^5.2.0',
    'strapi-plugin-ezforms': '^0.1.2',
    'strapi-plugin-navigation': '^2.2.2',
    'styled-components': '^5.2.1'
  },
  author: { name: 'Aaron' },
  strapi: { uuid: '50788187-593a-4a7c-87e6-8a1a47a43488' },
  engines: { node: '>=18.x.x <=20.x.x', npm: '>=6.0.0' },
  license: 'MIT',
  readme: 'ERROR: No README data found!',
  _id: 'backend@0.1.0'
}
⠋ Building build context
[INFO] Including the following ENV variables as part of the JS bundle:
    - ADMIN_PATH
    - STRAPI_ADMIN_BACKEND_URL
    - STRAPI_TELEMETRY_DISABLED
[DEBUG] Cleaning dist folder: /Users/aaronfawell/sites/strapi-boilerplate/site/strapi-boilerplate/backend/build
[DEBUG] Cleaned dist folder
[DEBUG] Dependencies from user's project
 {
  '@strapi/plugin-color-picker': '4.15.2',
  '@strapi/plugin-i18n': '4.15.2',
  '@strapi/plugin-users-permissions': '4.15.2',
  '@strapi/strapi': '4.15.2',
  mysql: '2.18.1',
  react: '^18.0.0',
  'react-dom': '^18.0.0',
  'react-router-dom': '^5.2.0',
  'strapi-plugin-ezforms': '^0.1.2',
  'strapi-plugin-navigation': '^2.2.2',
  'styled-components': '^5.2.1'
}
[DEBUG] User's plugins file
 {
  ezforms: { config: { captchaProvider: [Object], notificationProviders: [] } },
  upload: { config: { sizeLimit: 5242880, breakpoints: [Object] } },
  'preview-button': { enabled: '', resolve: './src/plugins/preview-button' }
}
[DEBUG] Enabled plugins
 {
  'color-picker': { name: 'color-picker', pathToPlugin: '@strapi/plugin-color-picker' },
  i18n: { name: 'i18n', pathToPlugin: '@strapi/plugin-i18n' },
  'users-permissions': {
    name: 'users-permissions',
    pathToPlugin: '@strapi/plugin-users-permissions'
  },
  ezforms: { name: 'ezforms', pathToPlugin: 'strapi-plugin-ezforms' },
  navigation: { name: 'navigation', pathToPlugin: 'strapi-plugin-navigation' }
}
[DEBUG] Enabled plugins with FE
 {
  'color-picker': { name: 'color-picker', pathToPlugin: '@strapi/plugin-color-picker' },
  i18n: { name: 'i18n', pathToPlugin: '@strapi/plugin-i18n' },
  'users-permissions': {
    name: 'users-permissions',
    pathToPlugin: '@strapi/plugin-users-permissions'
  },
  ezforms: { name: 'ezforms', pathToPlugin: 'strapi-plugin-ezforms' },
  navigation: { name: 'navigation', pathToPlugin: 'strapi-plugin-navigation' }
}
✔ Building build context (79.63915300369263ms)
⠋ Building admin panel
[DEBUG] Created the runtime directory
[DEBUG] Rendered the HTML
⠙ Building admin panel[DEBUG] Wrote the index.html file
[DEBUG] Wrote the app.js file
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
⠹ Building admin panel/Users/aaronfawell/sites/strapi-boilerplate/site/strapi-boilerplate/backend/src/admin/webpack.config.js:8
        new webpack.DefinePlugin({
        ^


TypeError: webpack.DefinePlugin is not a constructor
    at module.exports (/Users/aaronfawell/sites/strapi-boilerplate/site/strapi-boilerplate/backend/src/admin/webpack.config.js:8:9)
    at mergeConfigWithUserConfig (/Users/aaronfawell/sites/strapi-boilerplate/site/strapi-boilerplate/backend/node_modules/@strapi/admin/dist/_chunks/index-cce8ecb6.js:694:12)
    at async /Users/aaronfawell/sites/strapi-boilerplate/site/strapi-boilerplate/backend/node_modules/@strapi/admin/dist/_chunks/index-cce8ecb6.js:721:23

Node.js v18.19.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Additional context

This issue exists on the community forum however the solution doesn't seem to work for me:
https://forum.strapi.io/t/webpack-typeerror-when-going-higher-than-4-15/35561

console.logging webpack above the module.exports function in webpack.config.js file does return a list of getters so it definitely exists somewhere.

Requiring webpack in the webpack.config.js and omitting it as a parameter from the module.exports function fixes the issue however it clearly states in the webpack.config.js file 'Note: we provide webpack above so you should not require it'.

Can keep using this method, just don't want to run into any additional problems with the require further down the line!

please try deleting your yarn.lock or package-lock.json, reinstall node_modules and try to restart/rebuild

This is a templated message

Hello @PelirrojoAaron,

Thank you for reporting this bug, however we are unable to reproduce the issue you described given the information we have on hand. Can you please create a fresh project that you are able to reproduce the issue in, provide clear steps to reproduce this issue, and either upload this fresh project to a new GitHub repo or compress it into a .zip and upload it on this issue?

We would greatly appreciate your assistance with this, by working in a fresh project it will cut out any possible variables that might be unrelated.
Please note that issues labeled with status: can not reproduce will be closed in 14 days if there is no activity.

Thank you!