react-snap points to localost:4567 at images in js and css

Question

i did a simple React project that contains a css file and a react component that uses a img tag to display an image. The css is just using a background image at body.

• package.json:

{
  "name": "base-react-typescript",
  "version": "1.0.0",
  "description": "base-react-typescript",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "dev": "webpack serve --open --mode=development",
    "build": "webpack --mode=production",
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "source": "dist"
  },
  "dependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "html-webpack-plugin": "^5.5.3",
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "ts-loader": "^9.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.22.19",
    "@babel/preset-env": "^7.22.15",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.22.15",
    "@jest/globals": "^29.7.0",
    "@testing-library/jest-dom": "^6.1.3",
    "@types/jest": "^29.5.5",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "babel-jest": "^29.7.0",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.8.1",
    "eslint": "^8.49.0",
    "eslint-config-standard-with-typescript": "^39.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-n": "^16.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-webpack-plugin": "^4.0.1",
    "html-loader": "^4.2.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "react-snap": "^1.23.0",
    "react-test-renderer": "^18.2.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.66.1",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

• webpack.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')

  },
  devServer: {
    static: './dist'
  },
  module: {
    rules: [{
      test: /(\.s[ac]ss|css)$/i,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader'
        },
        {
          loader: 'resolve-url-loader'
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    },
    {
      test: /\.?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-typescript']
        }
      }
    },
    {
      test: /\.(ts)x?/i,
      exclude: /node_modules/,
      use: {
        loader: 'ts-loader'
      }
    },
    {
      test: /\.(jpe?g|png|webp|pdf|gif|svg)$/i,
      type: 'asset/resource'
    },
    {
      test: /\.?html$/i,
      exclude: /node_modules/,
      loader: 'html-loader'
    }]
  },

  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      title: 'base-react-typescript',
      filename: './index.html',
      template: 'static/index.html'
    })
  ]
}

All seems to be working fine, but in the postprocess step it generates an html that cannot be publish into production because it generates resource urls based on localhost:4567

for example, this is the basic code of the react component using the image:

import * as React from 'react'

import image from '../../css/img.png'
import '../../css/Base.css'

function Base (): React.JSX.Element {
  return <div>
      <img src={image} />
      Hello from BASE!
    </div>
}

export default Base

then the image in the static HTML is generated as:

<img src="http://localhost:45678/fd12d494b254065b7749.png">

Same as in CSS:

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    background-image: url(./img.png);
}

that generates:

background-image:url(http://localhost:45678/fd12d494b254065b7749.png)}

Am I forgetting something? this is the first time trying to apply react-snap.

Answer 1

first, why you've installed next.js as dependency and not using it? but for your problem try this in you webpack config:

plugins: [
  new HtmlWebpackPlugin({
    hash: true,
    title: 'base-react-typescript',
    filename: './index.html',
    template: 'static/index.html',
    inject: 'body' // Ensure that script tags are injected into the body
  })
]

add this to the end of your webpack(replace it).