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     

Answer 1

In my case, it was failing because using external styles

import "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css";

Fixed with using via npm: npm i leaflet

import 'leaflet/dist/leaflet.css';

Official docs

Answer 2

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/remixicon@2.5.0/fonts/remixicon.css");

Answer 3

If you're encountering issues with dynamically importing the font awesome script and the remixicon font in your React app, you can try adding them directly to your index.html file instead of importing them in your JavaScript or CSS files. Here's how you can do it:

Open your index.html file located in the public folder of your React app.

Add the following script tag to include the font awesome script:

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

This will load the font awesome script from the provided URL.

Add the following link tag to include the remixicon font:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css">

This will load the remixicon font styles from the provided URL.

Save the index.html file.

Run the npm run build command again to build your React app.

By including the script and link tags directly in the index.html file, you ensure that these external resources are loaded when the app is built and deployed. This approach bypasses any issues related to dynamic imports and allows the necessary scripts and styles to be available to your app.

Make sure to remove any previous import statements for these resources in your JavaScript or CSS files since you're now including them directly in the index.html file.

After successfully building your app with these changes, you should be able to deploy it to your website without encountering the previous error.