Would someone tell me what I am doing wrong in my React project

FYI, I used create-react-app because I couldn’t figure out the webpack.config.js file. This is a long post because of all the code.

I am mostly done my final portfolio (GitHub repo) and I was going to deploy on Netlify but Netlify build process stopped with the errors Failed to compile. and "build.command" failed.

For some reason, I have images that are not being added to my build folder. I have images that are shown on another page, they are in my build folder, but the images from the AllConfigs object in my /configs page are a problem. On that page I am doing the following:

import AllConfigs from "../data/AllConfigs";
// then in the jsx:
  AllConfigs[0].map((config, i) => (
    <div key={i} className="flex flex-col justify-center items-center border border-solid border-slate-400 bg-slate-100 p-4 shadow-md shadow-slate-500 md:flex-row xl:items-start">
      <div className="w-3/4 sm:w-5/8 xl:w-1/2 self-center mb-8 xl:mb-0 xl:self-start">
        {/* config.imgUrl is not getting built */}
        <img src={config.imgUrl} alt={config.name} />
      <div className="w-full px-4 ml-4 xl:w-1/2 border-l border-gray-400">
        <h4 id="lean-to" className="text-2xl font-semibold mt-0 mb-2 text-teal-600">
        <p className="mb-3">{config.notes}</p>
        <p>{config.ridgelines !== 1 ? `Ridgelines: ` + config.ridgelines : null}</p>
        <p className="mb-3">
          <span className="font-bold">Tie points</span>: A minimum of {config.tiePoints.guylines !== 0 ? config.tiePoints.guylines + ` guylines, ` : null}
          {config.poles !== 0 ? config.poles + ` poles and pole tarp ties, ` : null} {config.tiePoints.stakes} stakes, {config.tiePoints.ridgeline} ridgeline ties.
        <p className="mb-3">
          <span className="font-bold">Tarp fold(s)</span>: <span>{config.foldPoints}</span>

Here is the first import and it’s reference in the first object in AllConfigs:

import ltfold0 from "../assets/images/FoldLT.png";

const AllConfigs = [
      id: 1,
      name: "Lean-To",
      notes: "Stake C & D to the ground, tie A & B on the ridgeline.",
      imgUrl: ltfold0,
      tarps: "All",
      angles: [30, 50],
      ridgelines: 1,
      poles: 0,
      tiePoints: {
        stakes: 2,
        ridgeline: 2,
        poles: 0,
        guylines: 0
      foldPoints: "N/A"

And here is what I see when I inspect the image:


...plus 100's to 1000's of more characters then...

  alt="Arrowhead Wedge"
  class="w-full m-0 p-0"

That is unlike the src for my other page /results which references a media folder in the build folder: <img src="/static/media/LeanTo.0a56b889b76c9d0938c4.png" alt="Lean-To configuration" class="w-11/12 border-2 boder-solid border-slate-400 sm:m-4 sm:w-5/12 md:w-1/2">. The Results.js file is importing all the component files where I do the following:

import LEANTOImg from "../assets/images/LeanTo.png";
const Lean_To = new Config_LT("Lean-To", userTarp[0], userTarp[1], 1, 0, LEANTOImg);
// I push all the fields I want onto an object called finalObj and in the jsx:
  finalObj.map((type, index) =>
    type[2].sleepClear <= 0 && type[2].sleepDiagClr < 6 ? null : (
      <div key={index} className="flex flex-col justify-center items-center my-8 bg-slate-100 border border-solid border-slate-400 sm:flex-row">
        <img src={type[2].configImg} alt={type[2].configName + ` configuration`} className="w-11/12 border-2 boder-solid border-slate-400 sm:m-4 sm:w-5/12 md:w-1/2" />
        <div className="p-4">
          <h3 className="text-2xl font-bold text-teal-600 mb-4 mt-2 md:text-3xl">{type[2].configName}</h3>
          <p className="mb-1 text-base lg:text-xl">
            Set your <span className="italic">ridgeline height </span>
            to <span className="font-bold">{type[2].ridgeHeight}</span> inches. The resulting <span className="italic">lean angle</span> is {type[2].angle}&deg;.

Why aren’t the images referenced in the AllConfigs file being added to the media folder with npm run build? Why Do they not have an src value of /static/media/FileName.hash.png? Why do the images in question have an src starting with data:image/png;base64? Is it because AllConfigs.js is a vanilla JS file and not a functional React component or file? Do I need to manually add the folder ./assets/images in my build folder and then add those images? I’m also getting 2 dependabot error mesages: Terser insecure use of regular expressions before v4.8.1 and v5.14.2 leads to ReDoS, and Inefficient Regular Expression Complexity in nth-check.

What am I missing? I need to start job-hunting again and all I need is for this to deploy on Netlify. I really need some help with this!

I figured this might be too long to get an answer but after doing some research I believe it is a problem with Webpack and specifically PNG files under 8KB or so. I had to copy the images into the root of the public folder, then use process.env.PUBLIC_URL:

<img src={process.env.PUBLIC_URL + leantoimages[i]} alt={config.name} className="w-full m-0 p-0" />

I was going to delete this post but maybe someone could use that info in the future. The link that helped me is Using the Public Folder.

Did you try adding IMAGE_INLINE_SIZE_LIMIT=0 to your .env file?

Not sure why the png files are not working for you as data URIs. I would think that should still work.

Thanks - I got the solution that I mentioned in my 2nd post. I do not have a .env file. I thought they were only used with back-end stuff. I think create-react-app does that behind the scenes similar to theitr webpack config. I’ve only created .env files for a few videos/courses that I’ve taken.

It’s amazing that the REact courses I’ve taken did not cover hamburger menus or dealing with the issues involving images. I’ll look at those links later. I needed my 3rd portfolio project so that I could start applying to jobs. Now all my portfolio items are all my stuff. Thanks for the reply!

environment variables are variables you set on your operating system that processes running on your computer can use. They aren’t specific to any type of programming (or to programming full stop), they’re just values that may happen to be used by programs you run. They’re just user-configurable global values

Dotenv is a common program that takes values you write in a .env file and [temporarily] sets them to the OS environment

If you at least read the docs I posted?

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153. You can control the 10,000 byte threshold by setting the IMAGE_INLINE_SIZE_LIMIT environment variable as documented in our advanced configuration.

I think I saw doc that said it was 8700 or near their with that cutoff, but I had some very small PNG files.

And no I didn’t read the docs you linked to. You added that after I found a solution and I’ve been busy updating my portfolio. Is there something wrong with the solution I used? Is there only one best practices solution? I didn’t want to use CRA but I don’t have enough knowledge of webpack to write my own webpack.config file.

No, using the public folder is fine as long as you remember to use it for every asset that is affected by that rule. The config would (or should) have allowed you to keep everything as you had it and it would work for any new assets added later.

Also, it’s just that the docs would have answered your assumptions about the .env file.

There really isn’t anything wrong with using CRA, although I would suggest giving Vite a look.

That’s good to know. And for now - baby steps for me. I have some JS things I need to get better at plus I need to get back to the repo being built with some other fCC coders.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.