Help me fix my React project which is showing a webpack error

Job ID: 36432415

Budget: $30 – $250 USD

I was given the task of converting a codebase for a project that's embedded into other websites as a web app. Usually it's embedded as an iframe, but due to issues with scrolling and styling, I've been given the task of converting it to use web components. I have the app working, but there is a problems with my webpack config.

I am using mini css extract plugin, and am getting several warning about conflicting order of the css modules. I'm open to not using this plugin, but am just having problems getting the css to load properly.

If you're able to help, please bid the amount you can help for, and include the word "webpack" as the first word of your bid so I know you read the description. If you are able to solve the problem efficiently, I am able to hire you for future projects as I will need help regularly.

The exact issue I am having is I get a webpack error that there is a conflicting order for the css modules. I tried replacing webpack with parcel, and when I am able to get the script to run, some of the css loads but not all of it.

The only solution I found to get it to run as expected was to build the project in webpack, then move the css file to the project using parcel, rename the index.css to index2.css, and source both index.css and index2.css in my index.html.

Doing that, I'm able to get the project to render as expected. So I know the issue is specifically with how the css is being imported.

This project needs to be finished by Sunday, if you think you can solve it please let me know.
Related categories: CSS React.js Webpack