Develop Reference

Why do I get illegal character U+FFFDerror when using import (in JS)?

When I use import and export in my program, I find the error illegal character U+FFFDerror, does anyone know why?
I have two js files named main.js and modal.js and I export the gamePoint variable from the modal.js file to the main.js file.
I export variable like this in modal.js
const usernames = document.querySelectorAll('.get-username-modal input[type="text"]');
const savePlayerUsernameBtn = document.querySelector('.save-username');
const modal = document.querySelector('.get-username-modal');
//exported variable
export const gamePoint = document.querySelector('#limitPoint');
and import the variable in main.js like this
import gamePoint from "./modal.js";
and i get Uncaught SyntaxError: illegal character U+FFFD in firefox

How to connect to use UpcastWriter

I downloaded ckeditor from
https://ckeditor.com/ckeditor-5/online-builder/
unpack files to folder next to my application
and used ckeditor.js in my app
Everything works well, but I needed it UpcastWriter .
Then in my component
import * as UpcastWriter from '#ckeditor/ckeditor5-engine/src/view/upcastwriter';
myFunction() {
let viewDocument = editor.editing.view.document
const writer = new UpcastWriter(viewDocument);
const fragment = writer.createDocumentFragment();
}
I got an error
Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
Who knows how to fix it ?
Thanks.

Uncaught SyntaxError: Unexpected token ':' with Webpack + TypeScript + React Redux

I configured my simple webapp to build and run a WDS with TypeScript + React. It builds and shows the page properly.
Then, I am trying to add Redux and when I do a simple thing like importing useDispatch and trying to call it from my functional component, it builds but shows the error in browser console:
Uncaught SyntaxError: Unexpected token ':'
The code is:
import { useDispatch } from 'react-redux'
const MyView = () =>{
const dispatch = useDispatch()
...
}
And the page shows nothing.
When I look into the source of the error, I see it's definitely not good because tries to access {...}.somValue which should be something like ({...}).somValue to not cause the error.
Is it something I can fix by changing webpack config? I only use ts-loader, without any babel stuff.

Seems like I had a wrong value in webpack config file, or at least removing it helped:
Was mode: "none"
I just removed the whole key and value and it worked.

How to export a class under a module in JavaScript?

I'm trying to export a class named Car in JavaScript and import it into another JavaScript file. Both JavaScript files are running live on a console under an html file. (So this may possibly be an html code problem).
I did the export keyword for the file being exported.
I did the import keyword for the file receiving the export.
After this is done, I check my live console running HTML (my Javascript files are linked with the HTML file). And I get a SyntaxError.
//script.js
import { Car } from "./models/car.js";
let car = new Car(123);
console.log( car.id );
//car.js
export class Car {
constructor(id) {
this.id = id;
}
}
And here's an imgur LINK to the html file: https://imgur.com/zK3L6yH
I expect the console in the live html webpage to log out "123".
Instead I got Uncaught SyntaxError: Unexpected token {
I've already tried taking out the curly braces, but then I just get another error.

Dynamic import with template string as path error

I'm trying to get dynamic importing working while supporting a dynamic path, but I've noticed the following behavior below:
// Using lazy and Suspense API from React
// FAILS
const path = "folder/file";
// use `${path}` template string because using variable inside import fails
const LazyModule = lazy(() => import(`${path}`));
return <Suspense fallback={this._getFallback()}><LazyModule></Suspense>;
// SUCCEEDS
// use actual string
const LazyModule = lazy(() => import("folder/file"));
return <Suspense fallback={this._getFallback()}><LazyModule></Suspense>;
I read that we cannot use variables inside import statements, but if we convert it using "" + <path> or `${path}`, I thought this was supposed to solve this issue. However, when I use this, I get the error:
Uncaught (in promise) Error: Cannot find module 'folder/file'.
Is there a known workaround for this behavior?
Using webpack "3.12.0".