CODEWITHSUNDEEP
javascriptreactjswebpackimportdynamic-import
Pranshu_Taneja
Pranshu_Taneja

Reputation: 354

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.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

Upvotes: 8

Views: 21387

Answers (3)

Aleksi
Aleksi

Reputation: 5036

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.

Upvotes: 1

mza
mza

Reputation: 84

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");

Upvotes: 5

Dima Dorogonov
Dima Dorogonov

Reputation: 2563

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

Upvotes: 1

Related Questions