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

How to use React-Table without Node.js?

I'm new to React and I'm looking to use react-table in my Django app without Node.js. I've embedded the react-table library in my app with a standard unpkg link but when I go to use its functions in .js files I get errors like app.js:39 Uncaught ReferenceError: useTable is not defined. All of the tutorials import useTable through import { useTable } from 'react-table' but this is not possible when you are just trying to implement this cleint-side in the browser. How would I use react-table without Node.js and its import functions?

You could you npm packages as script tags using unpkg.
<script src="https://unpkg.com/browse/react-table#latest/react-table.min.js" />
Source react table docs https://react-table.tanstack.com/docs/installation

Embed a custom Monaco Editor in a Docusaurus website MDX

I have a website built using Docusaurus 2.
Now, I want to embed a Monaco Editor to one page, and I will register a language to that Monaco Editor. I can achieve this with react-monaco-editor, monaco-languageclient and vscode-languageserver in a new React website, but I don't know how to add this to Docusaurus.
First, I added those packages to package.json of my Docusaurus website, then I tried to make a component App, so that I can add <App /> to a Docusaurus page.
In one file for the component, I have:
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
In another file for the component, I have:
import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";
Then I got
./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
And
./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'
Does anyone know what to do make it work?

Seems like the issue here is regarding the CSS being unable to loaded by webpack. You will need to add in CSS loaders for webpack via plugins.
You can try referring to this Pull Request on the Hermes website which adds the Monaco editor to the website and you can try the editor by clicking on "Playground".
Using monaco-editor-webpack-plugin might be better here because it helps you add the necessary loaders, such as the CSS loader you are missing in your current setup.

How to import a function from a .js file when using Typescript and Vue

I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

I have a website hosted on Firebase hosting. I would like to add material theming to it(Buttons, Textfields, etc...). So, I ran the command npm install --save #material/textfield. I then extracted the folder called #material to my styles directory so that the structure looked like this:
Root
|
+---index.html
+---scripts/
+---app.js
+---styles/
+---main.css
+---#material/
+---……
I can reference css files from my main.css by adding #import "#material/textfield/dist/mdc.textfield.css"; to the start of my stylesheet. This correctly changes the styling of the button. However, when I go to do the same thing for js, it doesn't work.
According to Material Design's Github Repo, I should just be able to add
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
to the top of my script. However, when I deploy the code, and look at the console, the following error is returned: Uncaught SyntaxError: Unexpected token {. I have tried to require() the files, and change the path to import {MDCRipple} from '../styles/#material/ripple/dist/mdc.ripple.js';. This throws the same error. If I do: import * as MDCRipple from '../styles/#material/ripple/dist/mdc.ripple.js';, the same error is also thrown(except instead of the "{" character, it does not expect the "*" character).
This was supposed to be an easy conversion for my site, but it has given my tons of headaches. What am I doing wrong?
BTW: I know that the files the import statement is using exist. Also, isn't Node.js server-side?

Download latest version of node: https://nodejs.org/en/
Version 8.11.2 LTS will work.
The --experimental-modules flag can be used to enable features for ES2015 import. More information:
https://github.com/nodejs/node/blob/master/doc/api/esm.md