search

martin-markovic / learn-connect

Multi-feature platform designed to enhance the online learning experience.
MIT License
0 stars 0 forks source link

Webpack Polyfill Issues and Module Format #34

Closed martin-markovic closed 3 weeks ago

martin-markovic commented 3 weeks ago

Description:

I’m facing an issue with bundling errors in my React project using create-react-app (CRA) due to missing Node.js polyfills in Webpack 5. Specifically, I encountered errors related to missing core modules like url. To resolve this, I attempted to override the default CRA Webpack configuration using react-app-rewired.

However, after setting up react-app-rewired, I encountered a new issue related to the module format. My project is configured with "type": "module" in package.json, which treats all .js files as ES modules. This caused a conflict when trying to require a config-overrides.js file, leading to the error:

Error [ERR_REQUIRE_ESM]: require() of ES Module [path-to-config-overrides.js] from [path-to-react-app-rewired/config-overrides.js] not supported.

I’ve tried several workarounds, including renaming files to .cjs and adjusting import methods, but the issue persists.

Steps to Reproduce:

  1. Create a new React project using create-react-app.
  2. Install react-app-rewired to override the Webpack configuration.
  3. Set "type": "module" in package.json.
  4. Attempt to modify the Webpack configuration using a config-overrides.js file.
  5. Start the development server with react-app-rewired.

Expected Behavior:

The project should start without bundling errors, applying the necessary Webpack overrides.

Actual Behavior:

The development server fails to start, throwing a module format error related to the use of require() in an ES module context.

Operating System:

Windows 10 64-bit

Additional Context:

I would appreciate any guidance or solutions for resolving this conflict while maintaining the use of ES modules in my project.

Edit:

Updated issue description to reflect the source of the issue.

martin-markovic commented 3 weeks ago

The issue was due to an incorrect import statement for a server-side module (express) in the frontend code. This was imported erroneously with intelliSense. The import has been removed, and the issue is now resolved.