We Keep Coding

Error when importing library in Typescript for static website

I'm new to the Typescript world and I'm facing an issue.
I'm trying to create a script to access firebase database functions, but when compiling the script I'm running into :
Uncaught ReferenceError: exports is not defined if I use "module": "commonjs" in my tsconfig.json
or
Uncaught SyntaxError: Cannot use import statement outside a module if I use "module": "es6"
In the second case, I can remove those three lines from the generated index.js file and everything is working properly :
import firebase from 'firebase/app';
import "firebase/database";
import "firebase/auth";
My question is, how can I use those external libraries in my typescript code, link them in my html without having those import in the compiled js file ?
Edit : Here's my ts file :
import firebase from 'firebase/app';
import "firebase/database"
import "firebase/auth"
class FbManager {
private static instance: FbManager;
firebaseConfig: object;
private constructor() {
this.firebaseConfig = {
...
};
firebase.initializeApp(this.firebaseConfig);
firebase.auth().onAuthStateChanged(function(user) {
console.log("AUTH STATE CHANGED");
if (user) {
console.log("LOGGED IN USER " + user.uid);
console.log(user);
} else {
console.log("SIGN OUT");
}
});
}
public static getInstance(): FbManager {
if (!FbManager.instance) {
FbManager.instance = new FbManager();
}
return FbManager.instance;
}
}
Thank you in advance !

Once you are in your repo type tsc --init after that TS config file will be generated.
Go to this file and uncomment outDir and after semicolon write e.g. "./build". Whole line will look like this "outDir": "./build"
Next thing you can do is to go to your package.json and in scripts write build: tsc. You'll be able to run npm command which will build your .ts files in build directory.

Cannot use exported classes in webpack configuration

I need to have multiple configurations of webpack#5.
I wanted to create WebpackBuilder class that will be responsible for creating that webpack configuration.
So I created that file:
export default class WebpackBuilder {
test() {
console.log('Test');
}
}
When I import that file using const WebpackBuilder = require('./webpack.builder'); I got errors:
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.builder.js:3
export default class WebpackBuilder {
^^^^^^
SyntaxError: Unexpected token 'export'
When using import WebpackBuilder from './webpack.builder';
[webpack-cli] C:\strony\www\polskieszlaki_new\strony\webpack.blog.config.js:2
import WebpackBuilder from './webpack.builder';
^^^^^^
SyntaxError: Cannot use import statement outside a module
My webpack command is webpack --mode=production --config webpack.blog.config.js

Looks like you imported an esm module into your configuration file which is written in cjs style.
You have to turn your esm module to cjs:
class WebpackBuilder {
test() {
console.log('Test');
}
}
module.exports = WebpackBuilder;
NOTE: You can also find out more languages to write the configuration file here: https://webpack.js.org/configuration/configuration-languages/

Typescript does not load file with same name as parent folder

I have such files:
app.ts and config/config.ts
When from app.ts I try to import or require config:
import './config/config';
config file completely ignored(code inside config/config.ts is not executed) and no error occur (such as no module found), but If I rename config.ts for example to config-loader.ts and try to import config/config-loader - this works perfectly.
Can someone explain why I can't use file same name as parent folder to load this file later?
UPD:
here is content of app.ts file
import {foo} from './config/config';
console.log('from app');
console.log(foo);
./config/config.ts:
console.log('test from config');
export const foo = 'bar';
app is run with
ts-node -r tsconfig-paths/register app.ts
in console after run I see:
from app
undefined

Try to import an exported module from that file.
import {Config} from './config/config';
where Config is your exported module.
You can also use the JS way like
const config = require("./config/config")
but you will lose the typings.
In your case, the below means run a script.
import './config/config';
runs the script 'config'.

Error with Jest when trying to use `import`

I am using Jest to run tests on my JS code.
But currently, I am having an error:
Cannot use import statement outside a module
How can i fix this ?
I looked here but it does not what i am looking for: How to resolve "Cannot use import statement outside a module" in jest
This is my module:
class Path {
// code in here
}
export default Path;
This is the test file that exported from it:
import Path from "./Path";
// test() ...
This is my folder structure:

Unexpected token import in app.bundle.js angular2

I'm trying to build an Angular 2 app from scratch with Webpack. After adding all the files and finishing all the configurations, i build the project. while building it didn't give any error. but when i open the index.html the text loads while giving an error in the console as "Uncaught SyntaxError: Unexpected token import in app.bundle.js:47"
this is the place where it results the import error
/***/ function(module, exports) {
import 'core-js'; **//this is line 47**
import 'reflect-metadata';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/***/ }
/******/ ]);
the repo of my project enter link description here
Any reason why im getting this error?.I've tried almost everyting

You have a typo in your webpack.config.js which caused webpack to not use any loaders and simply concatenate the raw typescript source files into the bundle.
The property is module.loaders not module.loader.
You will need something like
resolve: {
extensions: ['', '.ts', '.js'],
root: path.resolve('src')
}
where path is imported with const path = require('path');
I don't know why it doesn't infer paths from the working directory...