Experiencing a bug in the production build of my application involving Webpack, React, postCSS, and potentially other JavaScript code not injecting correctly

I've encountered an issue with my webpack.prod.config when building my assets, which may also be related to the JS Babel configuration.

While I can successfully get it to work in the development build by inline CSS, the problem arises when attempting to consolidate everything into a single CSS file for production. In the development mode, the CSS is injected directly using import './filename.css' in each respective component, but this does not function properly in the production build. It seems like neither the CSS nor the JS are working correctly during production. The React JS components and other JS elements fail to display, leaving only the static HTML and CSS styling from CDN imports visible. Furthermore, clicking on the URLs within the script tags injected by Webpack leads back to the same page instead of redirecting to the correct JS or CSS source, which is quite perplexing. Although both the JS and CSS look fine in the Build > Static > JS + CSS outputs, there are instances where a "received text/html MIME" error message appears in the console.

An alternative scenario could involve potential issues with the JS code failing to construct the page accurately, especially in the production build (similar to the deployment process on Heroku). Initially set up as a create-react-app (ejected), I later integrated Express, preCSS (for SASS preprocessing), react-bootstrap, and some additional components.

This project serves as a learning platform for transitioning from traditional static HTML+CSS to utilizing React, JS, and Bootstrap (jQuery temporarily acts as we convert gradually to pure React). Previously functioning without complications, troubles surfaced after attempting postCSS and preCSS, resulting in the current malfunction.

The primary packages/libraries employed in this project include: - jQuery (CDN Script Tag) - BS3 (CDN Script Tag, .js, .css) - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin

Your assistance in resolving these issues is greatly appreciated.

HTML + Error Encountered in the Console

[![HTML Being Generated][1]][1] [![Console Error][2]][2]

Webpack.config.prod.js

(...snipped as previous content remains unchanged for reference)

Build.js

(...snipped as previous content remains unchanged for reference)
javascriptjqueryreactjswebpackpostcss

Answer №1

Within the webpack.config.prod.js file, I encountered an issue with the publicPath value being set as a variable named publicPath. This variable was inherited from code ejected from create-react-app, and unfortunately, I utilized it without fully comprehending what its actual value would be. Instead of resolving to the relative path '/', it was generating a path in the format github-username/repo-name, which did not suit my requirements.

The problem became apparent when I realized that the injected CSS and JS tags in the index.html file were referencing incorrect paths. Despite console errors indicating syntax issues, the root cause lay in the fact that the CSS and JS files were not properly loading into the page. To resolve this, I adjusted the path to use '/' as a relative reference point to the paths.appBuild directory, where all static assets are stored and served from.

A helpful resource in understanding this concept further was a post on Stack Overflow: Webpack publicPath

// The following lines will be removed from my webpack.config.prod.js file since they stem from create-react-app eject
var homepagePath = require(paths.appPackageJson).homepage;
var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
if (!publicPath.endsWith('/')) {
  // Helps prevent incorrect paths for file-loader
  publicPath += '/';
}

console.log('homepagePath: ', homepagePath); // Resolves to git repo URL
console.log('publicPath: ', publicPath); // Resolves to /retrospct/tellus-aerospace/

module.exports = {
  bail: true,
  devtool: 'source-map',
  entry: [
    require.resolve('./polyfills'),
    path.join(paths.appSrc, 'index')
  ],
  output: {
    path: paths.appBuild,
    filename: 'static/js/[name].[chunkhash:8].js',
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
    publicPath: '/' // Originally derived from the publicPath variable above
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

javascriptjqueryhtml

Updating a route in Next.js? Make sure to remove the classList as you

Looking to remove a specific class whenever the route changes in Next.js, I've attempted the following approach: React.useEffect(() => { const activatedLink = router.query.tags const classActivated = document.querySelector('.'+activated ...

javascriptreactjsnext.js

What steps can I take to ensure that my React child components will render successfully, even if a prop is absent

TLDR; Seeking solution to render child components in React even if a property of this.props is missing. My React app utilizes Yahoo's Fluxible and fetches data from a Wordpress site using WP REST API. Sometimes, the API may return incomplete data cau ...

javascriptreactjsstorefluxible

Maximizing HTML5 Game Performance through requestAnimationFrame Refresh Rate

I am currently working on a HTML5 Canvas and JavaScript game. Initially, the frames per second (fps) are decent, but as the game progresses, the fps starts decreasing. It usually starts at around 45 fps and drops to only 5 fps. Here is my current game loo ...

javascripthtmlperformancecanvasrequestanimationframe

You may encounter issues with invoking methods on a JavaScript object in Node.js after using res.send for response sending

Exploring Context and Design Overview Currently, I am utilizing a library known as Tiff.js to seamlessly load Tiff images on a designated webpage. The usage of this library extends both to the server-side and client-side functionalities. On the server end ...

javascriptangularjsnode.jsexpress

What are the steps to create a JSON file structured in a tree format?

Can you provide instructions on creating a JSON file in the following tree format? root child1 child11 child2 child21 child22 child3 child31 I am looking to generate a sample JSON file that adheres to the ...

javascriptjson

Determine changes in data retrieved from a JSON file using React

I've been working on a cryptocurrency app using React and a JSON API to fetch the latest data. My approach involves using fetch to load the JSON API and setInterval to refresh the app every 10 seconds. Now, I'm wondering if there's a way to ...

javascriptjsonreactjsfetch

What is the best way to change a variable in an AngularJS view?

My Request In my application, I have implemented 3 views, each with its own controller. The first view is the home screen, and from there the user can navigate to view 2 by clicking on a div element. On view 2, the user can then move to view 3 by clicking ...

javascriptangularjs

Assigning a custom class to the cdk-overlay-pane within a mat-select component is restricted to Angular Material version 10.2.7

I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There a ...

javascriptangulartypescriptangular-materialangular10

Managing numerous ajax forms within a single page

Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...

javascriptphpjqueryhtmlajax

Obtain text content using JQuery and AJAX rather than retrieving the value

I am struggling with a dynamic table that needs to perform calculations before submitting, requiring the presence of values. However, I want to submit the text from the options instead of the values. Despite trying various approaches, none of them seem to ...

javascriptjqueryajax

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below: <ul> <li> <a href="#" role="button" class="js-pagination link" data-page="1">1</a> </li> <li> <a href="#" role="button" class="js-pagination link active" data ...

javascriptjqueryhtmlcssselenium

Encountering an Invalid Host header while connecting a domain name with a reactjs application

Currently, I am in the process of deploying a JS application (with the backend in nodejs and front-end in reactjs) on a hosting server. To ensure smooth operation, I have dockerized all components including the back end, front end, and database. As of now, ...

node.jsreactjscross-domainvps

Offering various language options on a website determined by the URL

I've been contemplating how to add multi-language support to my personal website, which I developed using ExpressJS and NodeJS with EJS as the template engine. Currently, the website is only available in English, but I want to add a German version as ...

javascripthtmlnode.jsexpressejs

Is it possible for Typescript and Next.js to import a different project's *source code* only from the module's root directory?

Issue with Sharing React Components between Closed and Open Source Next.js Projects I am facing a challenge in my development setup involving two Next.js projects, one closed source (Project A) and the other open source (Project B). In Project A, which is ...

typescriptwebpacknext.jscompiler-options

Trigger the click event on a specific class selector to extract the corresponding ID

I have an HTML Table with each row: <table> <tr><td><a href='#' id='1' class='delete'>delete</a></td></tr> <tr><td><a href='#' id='2' class='de ...

javascripthtml

What is the best way to activate a modal in the parent component when a button is clicked in the child component?

Currently I have the following setup: panelHeader.vue (which is a child component) index.vue (the parent component where my main list view is) panelHeader.vue <template> <v-row> <div class="panelHeader"> ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

javascriptvue.jsvuex

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui