Develop Reference

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

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

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

"Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

Today I decided to try to learn React, but whenever I try to import the two modules below:
import React from "react"
import ReactDOM from "react-dom"
I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module
Here's the steps I've taken to try to create my React program:
Install NodeJS
Add NodeJS to environmental variables
Create new folder for my program
Create HTML, CSS, and JS files in my folder
Why am I getting this error, and how can I fix it?

I assume this is your first time working with React? I see that you have installed NodeJs, which is great!
I recommend that you get started with a complete React app such as Create React App.
https://create-react-app.dev/

I am also new to react and using visual studio2022 to write the react code in MVC project. I created login page exactly same as https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js
and was getting same error as
Uncaught SyntaxError: Cannot use import statement outside a module
fixed it by removing the import as well as export line at the end. I replaced the export line with
ReactDOM.render(<LoginComponent />, document.getElementById('content'));
where LoginComponent is my class and content is id of my Index.cshtml page
This fixed my issue.

You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.
"type": "module",

Unexpected token { when importing a module

Here's a codepen
with this import I get the error(10 line index.vue):
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
so what's going on here? The other ES6 imports are fine.

I commented above about having the same problem. Meanwhile I came across this project and wondered why it works. Long story short, it's configured as a SPA. I tried the same with my project and it works.
So in nuxt.config.js
export default {
mode: "spa",
..
So I guess the problem has to do with server-side rendering.
------ Some notes on Universal Mode ------
Since I wanted to use my app in universal mode I also tried to do conditional import of plugins.
Note that the approach below doesn't work. I do include it though, SPA might not be an option and it could point you in the right direction.
Move
import Vue from 'vue'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
Vue.use(OrbitControls)
into a threeimports.js file in the plugins folder and add
plugins: [
{ src :"~/plugins/threeimports.js", ssr: false},
..
to the nuxt.config.js
I thought OrbitControls should be available from anywhere in the project, but it's not. It has to do with the curly bracket syntax, since the same mechanism works well with other modules that don't use the bracket syntax.

I don't know the structure of the file where you want to import from, but are you trying to import a default or just a module?
Because the default syntax does not have {}. Much like your first import. If what you're trying to import is set as a default export, you need to remove those brackets.
Read about import in the MDN

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.

Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

importing js file in Vue project throws error

I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr
I did a npm install mobius1-selectr
and imported it in my main.js
import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';
but as soon I import I get this exception:
You must supply either a HTMLSelectElement or a CSS3 selector string.
which comes from the source of selectr.
Is the import not to be done this way in webpack / main.js?
What am I doing wrong? Any help is appreciated.

Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:
import Selectr from 'mobius1-selectr'