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?

How to create a NPM package that simply houses a declaration file

I have been trying to create an NPM package with just a declaration file inside. For context, I have an external plugin system for an entirely separate codebase and I wish to have a package you can install to provide definitions and intellisense for all the bridging variables, classes and functions a user can use.
The package really only has the an empty index.js file and the declaration file index.d.ts. The declaration file contains 2 exported modules. They are in the format of:
declare module 'base-plugin-declaration' {
...
namespace BasePlugin {}
export = BasePlugin;
}
declare module 'base-component-declaration' {
...
namespace BaseComponent {}
export = BaseComponent;
}
My package.json also looks like this:
{
"name": "vatom-spaces-external-plugin-declarations",
"version": "1.0.6",
"description": "Provides declarations for classes, functions and variables that external vatom plugins have access to",
"main": "./index.js",
"types": "./index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/VatomInc/external-plugin-declaration.git"
},
"keywords": [
"declaration",
"intellisense"
],
"author": "Liron Toledo",
"license": "ISC",
"bugs": {
"url": "https://github.com/VatomInc/external-plugin-declaration/issues"
},
"homepage": "https://github.com/VatomInc/external-plugin-declaration#readme"
}
My problem is that after publishing and installing this package. When I try in to import these modules. I get the following error when trying to build my project:
ERROR in ./src/index.js 1:0-49
Module not found: Error: Can't resolve 'base-plugin-declaration' in '/Users/lirontoledo/Documents/test-plugin/src'
resolve 'base-plugin-declaration' in '/Users/lirontoledo/Documents/test-plugin/src'
Parsed request is a module
using description file: /Users/lirontoledo/Documents/test-plugin/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/lirontoledo/Documents/test-plugin/src/node_modules doesn't exist or is not a directory
looking for modules in /Users/lirontoledo/Documents/test-plugin/node_modules
single file module
using description file: /Users/lirontoledo/Documents/test-plugin/package.json (relative path: ./node_modules/base-plugin-declaration)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/lirontoledo/Documents/test-plugin/node_modules/base-plugin-declaration doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/lirontoledo/Documents/test-plugin/node_modules/base-plugin-declaration.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/lirontoledo/Documents/test-plugin/node_modules/base-plugin-declaration.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/lirontoledo/Documents/test-plugin/node_modules/base-plugin-declaration.wasm doesn't exist
/Users/lirontoledo/Documents/test-plugin/node_modules/base-plugin-declaration doesn't exist
/Users/lirontoledo/Documents/node_modules doesn't exist or is not a directory
/Users/lirontoledo/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
webpack 5.75.0 compiled with 1 error in 1125 ms
I suspect its because of my blank index.js file but I've never created a package before so I kind of don't know what I'm doing. Hopefully this is something easy to fix that I don't know about due to my inexperience.
I basically just want to be able to import the package without getting the aforementioned errors.
I tried fiddling with the main index.js file, adding exports to the d.ts file and even removing it entirely but I keep getting greeted with the same compiler error each time.

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.