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

Question

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.com. But didn't found any working solution.

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

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

Error Message

Failed to compile.

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

Dissertate

How did you create the project? – Peripheral

I used npx create-react-app <project-name> – Dissertate

I guess that's because of this line import 'https://kit.fontawesome.com/a076d05399.js'. Why don't you use font-awesome from npm? – Peripheral

I did remove that line. But unfortunately nothing changed!! Is there anything else i can do... its been very long and its not resolving.. – Dissertate

Do you have more imports like this? – Peripheral

will that be a problem too? @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); – Dissertate

I don't think so – Peripheral

finally the process is done!! the command worked... There was one more import font statement just as the same above one. and after removing that build command run successfully... Thank you very much..!! – Dissertate

Answer 1

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

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

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

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

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

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

Stabilizer

Does this work with TypeScript? – Aldric

Answer 2

In my case, it was failing because using external styles

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

Fixed with using via npm: npm i leaflet

import 'leaflet/dist/leaflet.css';

Official docs

Slosberg

Answer 3

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.

Domino