.NET entity framework asp.net showing the following react issues ? how to resolve

Question

Hi Everyone (SME),

i am facing following 2 issue while building the web pack which is used to run asp.net with react js application i am using node js version 14.21.3

1. ERROR in ./node_modules/react-draggable/build/cjs/Draggable.js 210:22
2. ERROR in ./node_modules/redoc/bundles/redoc.browser.lib.js 41:47722

please let me know how resolve these issues.

Thanks for helping.

Sri

Answer 1

To resolve the issues you're encountering while building your ASP.NET with React application using Webpack, you can try the following steps:

1. Check for Dependency Compatibility: Ensure that the versions of react-draggable and redoc you are using are compatible with your version of Node.js (14.21.3). Sometimes, upgrading or downgrading these packages can resolve build issues. You can check the package documentation for compatibility notes.
2. Update Packages: Run the following command in your project directory to update your npm packages to their latest versions:

      npm update
   

   After updating, try rebuilding your project.
3. Clear npm Cache: Sometimes, clearing the npm cache can help resolve issues related to package installations. You can do this by running:

      npm cache clean --force
   

4. Reinstall Node Modules: Delete the node_modules folder and the package-lock.json file, then reinstall the dependencies:

      rm -rf node_modules package-lock.json
      npm install
   

5. Check Webpack Configuration: Ensure that your Webpack configuration is correctly set up to handle the files from react-draggable and redoc. You may need to add specific loaders in your webpack.config.js file to handle these libraries properly.
6. Look for Specific Errors: The error messages you provided may have more details. Check the lines indicated in the error messages for any specific issues or missing dependencies that might need to be addressed.

If the issues persist after trying these steps, consider looking for similar issues in the GitHub repositories of the respective packages or seeking help from the community forums.

---

References:

• Tutorial: Create a Node.js and React app in Visual Studio
• Manage npm packages in Visual Studio

Answer 2

Thanks for reaching out.
The errors are not ASP.NET-specific. They occur because Node 14.21.3 is too old and your build isn’t transpiling modern syntax shipped by react-draggable and redoc. Upgrade your toolchain and configure Babel to transpile these packages from node_modules.

Steps to resolve

1. Upgrade toolchain
   • Install Node 18 LTS or Node 20 LTS (Node 14 is EOL).
   • Use Webpack 5.
   • Ensure Babel presets are installed: @babel/preset-env, @babel/preset-react.
2. Transpile packages from node_modules
   • Some libraries publish ES2015+ syntax. Explicitly include react-draggable and redoc in your babel-loader rule.
3. (Webpack 5) Add minimal fallbacks only if you see errors for process or Buffer
   • Provide process and Buffer via ProvidePlugin and resolve.fallback.
4. Use compatible versions
   • react-draggable: ^4.x (e.g., 4.4.5)
   • @redocly/redoc@latest or recent redoc@2.x
   • If bundling redoc still fails, validate using the CDN to confirm your OpenAPI spec first.
   Sample webpack.config.js : below is the code**
   Entity framework core.txt

If it still fails, please share

• Your Node, Webpack, Babel, React, react-draggable, and redoc versions
• Relevant parts of webpack.config.js (module rules, resolve, plugins)
• The first lines of the error (they usually reveal the exact syntax/polyfill issue)

Tip: If you use TypeScript, set "target": "ES2017" and "lib": ["ES2017","DOM"] in tsconfig.json.

Let us know if the issue persists after following these steps. I’ll be happy to assist further if needed. If the issue has been resolved, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.