"npm run build" : "The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script"

Question

I tried to do a React project where I make my own JSON file for the project. The file is given here:

const Portfolio_data = [
  {
    id: 1,
    title: "Vaccine Tweet Data Sentiment Analysis",
    image: require("./images/twiteer sentiment analysis.jpeg"),
    gitLink:
      "https://github.com/samratalamshanto/sentiment-analysis-on-vaccine-tweet-data",
  },
];
export default Portfolio_data;

Now when I use this in the project and run the "npm run build" command. It did not work. The given error msg was:

> protfolio@0.1.0 build G:\anaconda\project\download files\last down\New folder\desktop\Samrat\protfolio\protfolio
> react-scripts build

Creating an optimized production build...

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! protfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the protfolio@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Samrat Alam\AppData\Roaming\npm-cache\_logs\2022-05-29T04_52_37_352Z-debug.log

But when I remove this "require()", this "npm run build" command works. But I can not load the images in the project.

My component code:

import React from "react";

import "./Protfolio.css";

import dataProtfolio from "./ProtfolioData";
import CardProtfolio from "./CardProtfolio";

const Protfolio = () => {
  return (
    <>
      <section className="protfolio top" id="protfolio">
        <div className="container portfolio_container">
          <div className="heading text-center">
            <h3> What I Do..</h3>
            <h1>Academic Project</h1>
          </div>

          <div className="content grid">
            {dataProtfolio.map((val, index) => {
              return (
                <CardProtfolio
                  key={index}
                  img={val.image}
                  title={val.title}
                  gitlink={val.gitLink}
                />
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
};

export default Protfolio;

My package.json is:

{
  "name": "protfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "module": "^1.2.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "react-simple-typewriter": "^3.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

How can I solve this problem where I can use images as well as can run the "npm run build" command without error?

Answer 1

You can import image in es5 module syntax in file containing require statement and them assign imported file to image variable.