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?

Trying to export function using export {} causing errors

I'm learning to code on my own so to practice webscraping I thought I'd make a program which displays a famous persons birth on a user inputted date on one side using cheerio, while on the other it uses an API to get the temp of a user inputted city. Here is the github: https://github.com/Yummy275/Date_Weather_Celebbirths
Im having trouble with famous_getter.js in ./src . When I try to add export { getName } to be able to use the function in other files similar to all my other files, I get an error when I try to webpack or run node famous_getter.js after I add import {getName} from "./famous_getter" to index.js to test the function. Any help is appreciated. Thanks for looking.
EDIT - adding errors
Webpack error(its this repeated a bunch for different things "cant resolve 'x" in":
ERROR in ./node_modules/request/lib/har.js Module not found: Error:
Can't resolve 'fs' in
'/home/yummy/Projects/DateWeatherCelebbday/node_modules/request/lib'
# ./node_modules/request/lib/har.js 3:9-22 #
./node_modules/request/request.js # ./node_modules/request/index.js
# ./src/famous_getter.js # ./src/index.js
node famous_getter.js error:
node famous_getter
(node:257160) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/yummy/Projects/DateWeatherCelebbday/src/famous_getter.js:25
export { getName };
^^^^^^
SyntaxError: Unexpected token 'export'
In my GitHub famous_getter.js works when I run node famous_getter.js . When I get rid of my test (getName(famousbirthsURL)) and try to add export {getName}, thats when errors happen.

Attempt #2:
Edit: I have taken all edits to the OP's question and info in comments in this response.
Looks like you are targeting node and not web.
The default target for webpack is web.
You need to add a target: 'node' in your webpack file.
const path = require("path");
module.exports = {
target: 'node',
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
};
After adding this, webpack ran successfully and built the assets.
Launched http-server ./ on the dist folder and browsed home page.
Screenshot:
Attempt #1:
I downloaded the project from Github and ran webpack.
The assets are building successfully.
I also added the export { getName } to famous_getter.js and ran webpack.
Build is successful. I am not encountering the errors.
Perhaps, something is wrong with your environment or node_modules cache.
Try a fresh install and webpack.
Screenshots below:

Lets read the error thoroughly: Error: Can't resolve './src/index.js' in '/home/yummy/Projects/DateWeatherCelebbday/src'.
What does it say? Its looking for a file index.js that's located at the relative position ./src/index.js. The . at the begining means that we are trying to resolve the path in a relative manner.
Relative to what? In this case its relative to the path
/home/yummy/Projects/DateWeatherCelebbday/src. In other words the
program is looking for a file at
/home/yummy/Projects/DateWeatherCelebbday/src/src/index.js, which
likely contain one too many src.
Try changing either the relative path to ./index.js, or navigate to /home/yummy/Projects/DateWeatherCelebbday and run the original command.

using gulp on cloud 9

I am currently going through a course on udemy with cloud 9 and so far things have been smooth. However gulp doesn't seem to work. Gulp watch doesn't work which I've been ignoring so far but now I'm at a point where I can't really continue without getting this to work and I can't really do anything because the gulp scripts command isn't working. This is the error I get:
ERROR in Entry module not found: Error: Can't resolve
'./wp-content/themes/fictional-university-theme/js/scripts.js' in
'/home/ubuntu/workspace'
From webpack --display-error-details:
ERROR in Entry module not found: Error: Can't resolve
'./wp-content/themes/fictional-university-theme/js/scripts.js' in
'/home/ubuntu/workspace' resolve
'./wp-content/themes/fictional-university-theme/js/scripts.js' in
'/home/ubuntu/workspace' using description file:
/home/ubuntu/workspace/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration after using description file: /home/ubuntu/workspace/package.json
(relative path: .)
using description file: /home/ubuntu/workspace/package.json (relative path:
./wp-content/themes/fictional-university-theme/js/scripts.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/ubuntu/workspace/wp-content/themes/fictional-university-theme/js/scripts.js
doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/ubuntu/workspace/wp-content/themes/fictional-university-theme/js/scripts.js.js
doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/ubuntu/workspace/wp-content/themes/fictional-university-theme/js/scripts.js.json
doesn't exist
as directory
/home/ubuntu/workspace/wp-content/themes/fictional-university-theme/js/scripts.js
doesn't exist
Unfortunately I don't know what any of this means so I can't fix it.

You need to open the folder where gulp is found and run these two lines
npm uninstall ws
npm install #ionic/app-scripts#latest
This will update it to the latest. I have done the same course and this solves the problem.
Also have a look in webpack.config.js
Change the line
App: settings.themeLocation + "js/scripts.js"
to
App: __dirname + '/'+settings.themeLocation + "js/scripts.js"

npm dependency tangled web - my library requires a different version of a package than one of my dependencies uses

This has to be a common scenario but I'm not finding a clear answer. This has been dogging me for a few days now.
Scenario:
I built a private library/dependency and reference it in package.json in my main project:
"my-shared-lib": "git+https://myuser:mypass#github.com/mygh/my-shared-lib.git#dev"
However, one of the packages in my main project relies upon the same package (which is "uuid"), but a different version. Not sure which, maybe it's React or something else. Due to a difference in that 3rd party dependency's file & folder structure, Webpack throws an error on build:
ERROR in ./node_modules/my-github-lib/data/guid_id.js Module not
found: Error: Can't resolve 'uuid/v1' in
'C:\MyProject\node_modules\my-github-lib\data' resolve 'uuid/v1' in
'C:\MyProject\node_modules\my-github-lib\data' Parsed request is a
module using description file:
C:\MyProject\node_modules\my-github-lib\package.json (relative path:
./data)
Field 'browser' doesn't contain a valid alias configuration after using description file:
C:\MyProject\node_modules\my-github-lib\package.json (relative path:
./data)
resolve as module
looking for modules in C:\MyProject
using description file: C:\MyProject\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\MyProject\package.json (relative path: .)
using description file: C:\MyProject\package.json (relative path: ./uuid/v1)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\MyProject\uuid\v1 doesn't exist
*
Field 'browser' doesn't contain a valid alias configuration
C:\MyProject\uuid\v1* doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\MyProject\uuid\v1.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
C:\MyProject\uuid\v1.jsx doesn't exist
as directory
C:\MyProject\uuid\v1 doesn't exist
C:\MyProject\node_modules\my-github-lib\data\node_modules doesn't exist or is not a directory
C:\MyProject\node_modules\my-github-lib\node_modules doesn't exist or is not a directory
C:\MyProject\node_modules\node_modules doesn't exist or is not a directory
C:\MyProject\projects\node_modules doesn't exist or is not a directory
C:\MyProject\node_modules doesn't exist or is not a directory
C:\Users\myuser\Documents\Projects\MyProject\node_modules doesn't exist or is not a directory
C:\Users\myuser\Documents\Projects\node_modules doesn't exist or is not a directory
C:\Users\myuser\Documents\node_modules doesn't exist or is not a directory
C:\Users\myuser\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\MyProject\node_modules
using description file: C:\MyProject\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\MyProject\package.json (relative path: ./node_modules)
using description file: C:\MyProject\node_modules\uuid\package.json (relative path: ./v1)
no extension
C:\MyProject\node_modules\uuid\v1 doesn't exist
*
C:\MyProject\node_modules\uuid\v1* doesn't exist
.js
C:\MyProject\node_modules\uuid\v1.js doesn't exist
.jsx
C:\MyProject\node_modules\uuid\v1.jsx doesn't exist
as directory
C:\MyProject\node_modules\uuid\v1 doesn't exist [C:\MyProject\uuid\v1] [C:\MyProject\uuid\v1*]
[C:\MyProject\uuid\v1.js] [C:\MyProject\uuid\v1.jsx]
[C:\MyProject\uuid\v1]
[C:\MyProject\node_modules\my-github-lib\data\node_modules]
[C:\MyProject\node_modules\my-github-lib\node_modules]
[C:\MyProject\node_modules\node_modules]
[C:\MyProject\projects\node_modules] [C:\MyProject\node_modules]
[C:\Users\myuser\Documents\Projects\MyProject\node_modules]
[C:\Users\myuser\Documents\Projects\node_modules]
[C:\Users\myuser\Documents\node_modules]
[C:\Users\myuser\node_modules] [C:\Users\node_modules]
[C:\node_modules] [C:\MyProject\node_modules\uuid\v1]
[C:\MyProject\node_modules\uuid\v1*]
[C:\MyProject\node_modules\uuid\v1.js]
[C:\MyProject\node_modules\uuid\v1.jsx]
[C:\MyProject\node_modules\uuid\v1]
This is just one example - it's happening to 6 other libraries and has the same error message.
I can confirm this conflict by looking at my library's copy:
...and what is installed in my main project:
Clearly I need both versions of this dependency to satisfy my build, but forcing either version breaks something.
What is the elegant solution to this?

It's a Webpack bug that's was acknowledged in March, but has yet to be fixed.
https://github.com/webpack-contrib/css-loader/issues/447
The proposed workaround worked for me, which is adding a line like so, for each package listed in the build errors:
node: {
fs: "empty",
net: "empty",
tls: "empty"
}
Not sure I like this workaround. If it happens to more dependencies, I'd lose the option of using these packages on the client-side, no?

importing jquery through webpack error - module not found: can't resolve jquery

I'm new to typescript and trying to learn it through online example and getting started tutorials, I'm following tutorial from
https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/
everything worked fine for me except when I tried to import jquery and tried to use it in my typescript file, it started giving error for module not found.
Following is my code chunks which I'm running:
my main.ts file is
import * as $ from 'jquery'
import {MustHaveCoffee} from './getcoffee'
class SweetSweetClass{
constructor(){
console.log("Even sweeter");
$('body').css('background-color', 'red');//here error occures
}
}
let basil = new SweetSweetClass();
let coffee = new MustHaveCoffee();
webpack.config.js file is
var path = require('path');
module.exports = {
entry: './main.ts',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js']
},
module:{
loaders: [
{ test:/\.ts$/, loader: 'ts-loader' }
]
},
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
my tsconfig.json file is
{
"compilerOptions":{
"module":"commonjs",
"outDir":"dist/",
"noImplicitAny":true,
"removeComments":true,
"preserveConstEnums":true
},
"include":[
"./typings/*"
],
"exclude":[
"node_modules",
"**/*.spec.ts"
]
}
Following is error which I'm getting while running 'webapack' command
E:\learning-typescript-by-examples>webpack
ts-loader: Using typescript#2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: 3a411aca489fbed8710d
Version: webpack 3.0.0
Time: 1659ms
Asset Size Chunks Chunk Names
bundle.js 3.34 kB 0 [emitted] main
[0] ./main.ts 402 bytes {0} [built]
[1] ./getcoffee.ts 235 bytes {0} [built]
ERROR in ./main.ts
Module not found: Error: Can't resolve 'jquery' in 'E:\learning-typescript-by-examples'
# ./main.ts 3:8-25
Also, I've added jquery as global module through typings by running
typings install dt~jquery --global --save
and it worked correctly.
I followed every step mentioned it tutorial but started getting the stated error. May be I'm missing something but unable to figure it out. I've searched the problem and found some solution (like one here webpack Module not found: Error: Can't resolve 'jquery') but the solutions doesn't seems to be fit in my situation as I'm not using bower for dependency management etc. Any help would be highly appreciated.Thanks
UPDATE
I've added now jquery through using 'npm install --save-dev #types/jquery' and detailed error is following
ts-loader: Using typescript#2.4.1 and E:\learning-typescript-by-examples\tsconfig.json
Hash: d72ca1c2dd5c6319254c
Version: webpack 3.0.0
Time: 2233ms
Asset Size Chunks Chunk Names
bundle.js 3.35 kB 0 [emitted] main
[0] ./main.ts 410 bytes {0} [built] [2 errors]
[1] ./getcoffee.ts 235 bytes {0} [built]
ERROR in ./main.ts
(1,20): error TS2306: File 'E:/learning-typescript-by-examples/node_modules/#types/jquery/index.d.ts' is not a module.
ERROR in ./main.ts
(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '#types/jquery'.
ERROR in ./main.ts
Module not found: Error: Can't resolve '#types/jquery' in 'E:\learning-typescript-by-examples'
resolve '#types/jquery' in 'E:\learning-typescript-by-examples'
Parsed request is a module
using description file: E:\learning-typescript-by-examples\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\learning-typescript-by-examples\package.json (relative path: .)
resolve as module
E:\node_modules doesn't exist or is not a directory
looking for modules in E:\learning-typescript-by-examples\node_modules
using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: E:\learning-typescript-by-examples\package.json (relative path: ./node_modules)
using description file: E:\learning-typescript-by-examples\node_modules\#types\jquery\package.json (relative path: .)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery is not a file
.webpack.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery.webpack.js doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery.web.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery.js doesn't exist
as directory
existing directory
using path: E:\learning-typescript-by-examples\node_modules\#types\jquery\index
using description file: E:\learning-typescript-by-examples\node_modules\#types\jquery\package.json (relative path: ./index)
no extension
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery\index doesn't exist
.webpack.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery\index.webpack.js doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery\index.web.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery\index.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
E:\learning-typescript-by-examples\node_modules\#types\jquery\index.js doesn't exist
[E:\node_modules]
[E:\learning-typescript-by-examples\node_modules\#types\jquery]
[E:\learning-typescript-by-examples\node_modules\#types\jquery.webpack.js]
[E:\learning-typescript-by-examples\node_modules\#types\jquery.web.js]
[E:\learning-typescript-by-examples\node_modules\#types\jquery.ts]
[E:\learning-typescript-by-examples\node_modules\#types\jquery.js]
[E:\learning-typescript-by-examples\node_modules\#types\jquery\index]
[E:\learning-typescript-by-examples\node_modules\#types\jquery\index.webpack.js]
[E:\learning-typescript-by-examples\node_modules\#types\jquery\index.web.js]
[E:\learning-typescript-by-examples\node_modules\#types\jquery\index.ts]
[E:\learning-typescript-by-examples\node_modules\#types\jquery\index.js]
# ./main.ts 3:8-32

You're trying to import type definitions instead of the module itself. The error reflects that and suggests that you import jquery instead.
(1,20): error TS6137: Cannot import type declaration files. Consider importing 'jquery' instead of '#types/jquery'.
The actual module is jquery, that means you need to import it as such.
import * as $ from 'jquery';
Of course you need to have it installed first, which might have been your initial problem. You can install it with:
npm install --save jquery
You might be wondering why you need two different packages to use jQuery. The reason is that jquery is a JavaScript module and TypeScript is generally not happy when it doesn't have any type information for a module and jquery doesn't provide them. You don't need the types to use the module, but you need to somehow satisfy the TypeScript compiler. Because it would be tedious to create your own type definitions, there are many type definitions for popular libraries that are made by the community. They can be found in the DefinitelyTyped repository and each of them is published to npm as #types/<package-name>.
The tutorial you're using suggests to use typings, but that is not used anymore since TypeScript 2.0 (see Deprecation Notice: Regarding TypeScript#2.0). The tutorial seems to be outdated, even at the time of the writing, and it doesn't really cover more (or in more detail) than the official webpack docs Webpack - TypeScript.