Develop Reference

Webpack is unable to resolve import for ESM module

I'm trying to use ESM with typescript and webpack in an nx monorepo. After some configuration, I'm able to transpile to ESM with tsc. For this, I had to add a ".js" to the relative imports.
import { AppModule } from './app/app.module.js';
Now that I'm trying to use webpack, it doesn't seem to detect that it's a ESM. Here's the error that I'm getting:
ERROR in ./apps/nxnest/src/main.ts 9:0-48
Module not found: Error: Can't resolve './app/app.module.js' in '/home/gabriel/tmp/nxnest/apps/nxnest/src'
resolve './app/app.module.js' in '/home/.../tmp/nxnest/apps/nxnest/src'
using description file: /home/.../tmp/nxnest/package.json (relative path: ./apps/nxnest/src)
using description file: /home/.../tmp/nxnest/package.json (relative path: ./apps/nxnest/src/app/app.module.js)
no extension
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js doesn't exist
.ts
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js.ts doesn't exist
.tsx
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js.tsx doesn't exist
.mjs
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js.mjs doesn't exist
.js
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js.js doesn't exist
.jsx
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js.jsx doesn't exist
as directory
/home/.../tmp/nxnest/apps/nxnest/src/app/app.module.js doesn't exist
webpack 5.75.0 compiled with 1 error in 1968 ms
Because I've to specify ".js" in the import, webpack try to look for it, but I'm using typescript so the file doesn't exists.
Any idea how to fix it?

Node.js cannot import from a file in the same directory

My project directory's structure is as follows:
ghostbot (main project directory)
- package.json
- package-lock.json
- src/
-- (*.ts files)
- build/
-- (compiled *.js files)
- node_modules/
- tsconfig.json
My npm start script is a simple TS compilation and starting the compiled index.js:
"scripts": {
"start": "npx tsc --rootDir src --outDir build && node build/index.js"
},
After I run npm start from the main directory, the typescript is compiled properly (I can see files appearing in build/), then node starts and throws this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[...]\ghostbot\build\setup' imported from [...]\ghostbot\build\index.js
Interestingly, when I look at the problematic import in the compiled index.js in WebStorm, I see this:
WebStorm seems to resolve the problematic ./setup import path correctly, but Node can't.
I tried running the compilation followed by node manually, including from the build directory rather than node build/something from the main dir. I tried various formats for the import path (including the complete verbose path starting at my C: drive), always with the same error as described in the post.

I am not a TypeScript expert but I guess you should import from "setup.js" not from "setup".
I think when you try to import from "setup" then node.js tries to find a module "setup" in "node_modules" directory.

Cannot import Node, JS, or Electron library in Angular Typescript module no matter what I try

I'm fairly new to stack overflow, so if I don't ask the question correctly feel free to help me out.
I've scoured every stack overflow and google article I can find and nothing works to import Electron, any other Node modules, or any native JS modules--I can only import and use Angular/typescript modules. I'm trying to import electron and use it in an angular app. I am also trying to use __dirname. For electron I've tried:
const { remote } = require('electron');
const { remote } = (<any>window)require('electron');
import { ipcRenderer, BrowserWindow, electron } from 'electron';
import * as remote from '#electron/remote'
For __dirname I've tried:
import * as fs from 'fs';
import { readFileSync } from 'fs';
import readFileSync from 'fs';
and for the implementation:
import.meta.url
process.cwd()
__dirname //worth a shot I guess
I've combined these options, and nothing works. I've run npm install --save-dev #types/node, and when that didn't work tried deleting the node_modules folder and ran npm install. "types": ["node"] has already been added to tsconfig.json's compilerOptions.
Here is one of my errors:
Error: src/app/electron/electron.service.ts:3:20 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev #types/node` and then add `node` to the types field in your tsconfig.
3 const { remote } = require('electron');
~~~~~~~
I've already installed #types/node. It also almost always posts the following error. I have no clue what it's for, as it shows even when I'm not importing 'fs'.
Error: ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/user/Programming/Git/project/node_modules/electron'
resolve 'fs' in '/Users/user/Programming/Git/project/node_modules/electron'
Parsed request is a module
using description file: /Users/user/Programming/Git/project/node_modules/electron/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in /Users/user/Programming/Git/project
using description file: /Users/user/Programming/Git/project/package.json (relative path: .)

Your browser cannot run modules written in C++ like fs and electron. Node.js can do it because node developers specifically created node to be able to load binary modules (written in C++). Browsers can only run javascript modules.
As such builders such as Webpack ignore these modules simply because it does not make sense to include them.
You cannot use fs and electron in your Angular app. You can however use Angular in your electron app (because electron was created to run javascript code and Angular compiles to pure javascript code).
Trying to use fs or electron in Angular is a little bit like trying to import Internet Explorer or Adobe Photoshop in Angular.

How to publish SCSS package properly for Javascript projects

I have a color.scss and main.scss file as below
//color.scss
$special-blue: #0000ff;
:export {
testBlue: $special-blue;
}
//main.scss
#import 'src/colors';
And by having the above setup, using webpack to create CSS via couple of webpack-loaders such as css-modules-typescript-loader, css-loader, postcss-loader, sass-loader. Once the webpack compilation done, I will get the bundled CSS together with main.scss.d.ts with the following content
interface CssExports {
'testBlue': string;
}
export const cssExports: CssExports;
export default cssExports;
Then what I've done was published NPM package, consist of main.scss, bundled.css & main.scss.d.ts. When I import the package into my React project, and running the project, I am hitting error
Failed to compile.
SassError: File to import not found or unreadable: src/color.scss on line 1 of xxxxxx/main.scss
From the look of it, it seems like I can't just copy only main.scss, but I need to copy the entire SCSS source code, just so that I can reference SCSS variables?
Wondering if there is any alternative solution?

Webpack 2 - import throws error on postcss.config.js and other js files

I have a project with Webpack 2, PostCSS, ES2015 (Babel) and Jest.
Right now, all ES2015 is working correctly on src/index.js and files directly connect to src/index.js.
But in some files it breaks the code. Example, on mixins/index.js, I have this:
const postcss = require('postcss');
And when I change it to this:
import postcss from 'postcss';
It throws this error:
Module build failed: SyntaxError: Unexpected reserved word
The same happen in postcss.config.js.
What am I missing on Webpack configuration to make it work?
You can check the repository here. These are the files I talked about: postcss.config.js and mixins/index.js

PostCSS requires your files to be in dedicated CSS files instead of *.js files like they are in your project.
If you want to use PostCSS with JavaScript (like with ReactJS inline-styles) you need the postcss-js parser which requires an additional loader and a naming style like *.style.js so that webpack doesn't confuse the JavaScript styles with regular JavaScript files which are processed via Babel.