I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.

Already gone through all posts related to this on stackoverflow. But didn't found any working solution.

import './App.css';
import '.js'

import Navbar from './ponents/navbar';
import Homepage from './ponents/homepage';
import Skills from './ponents/Skills';
import Project from './ponents/project';
import Contact from './ponents/contact';

Error Message

Failed to pile.

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

I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.

Already gone through all posts related to this on stackoverflow.. But didn't found any working solution.

import './App.css';
import 'https://kit.fontawesome./a076d05399.js'

import Navbar from './ponents/navbar';
import Homepage from './ponents/homepage';
import Skills from './ponents/Skills';
import Project from './ponents/project';
import Contact from './ponents/contact';

Error Message

Failed to pile.

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

• javascript
• reactjs
• webpack
• import
• dynamic-import

• 1 How did you create the project? – Konrad Commented Oct 20, 2022 at 16:30
• I used npx create-react-app <project-name> – Pranshu_Taneja Commented Oct 20, 2022 at 16:31
• 2 I guess that's because of this line import 'https://kit.fontawesome./a076d05399.js'. Why don't you use font-awesome from npm? – Konrad Commented Oct 20, 2022 at 16:37
• 2 I don't think so – Konrad Commented Oct 20, 2022 at 16:48
• 1 finally the process is done!! the mand worked... There was one more import font statement just as the same above one. and after removing that build mand run successfully... Thank you very much..!! – Pranshu_Taneja Commented Oct 20, 2022 at 16:51

3 Answers 3

The problem here was the import statement of an external js file.

import 'https://kit.fontawesome./a076d05399.js';

You can add the file in index.html & run build.

<script src="https://kit.fontawesome./a076d05399.js"></script>

And yes there's no problem with import statement in css.

@import url("https://cdn.jsdelivr/npm/[email protected]/fonts/remixicon.css");

In my case, it was failing because using external styles

import "https://unpkg./[email protected]/dist/leaflet.css";

Fixed with using via npm: npm i leaflet

import 'leaflet/dist/leaflet.css';

Official docs

To dynamically import ES modules you'll need to change webpack's output type to ESM.

Alternatively you could try ignoring the external import with webpackIgnore.