Develop Reference

What's the difference between node:process and process?

When I import node:process it works fine. However, when I try to require the same, it gives an error.
This works fine:
import process from 'node:process';
But when I try to require the same, it throws an error:
const process = require('node:process');
Error: Cannot find module 'node:process'
I am curious as to what is the difference between process, which works in both, commonjs and module, vs node:process.
Also, a follow-up, I am using webpack to bundle my js, and I discovered this error when I tried to run my bundled code and realised, that chalk imports node:process, node:os and node:tty. How do I solve that now?

import process from 'node:process'; and import process from 'process'; are equivalent.
The node: exists since version 12 for import.
node: URLs are supported as an alternative means to load Node.js builtin modules. This URL scheme allows for builtin modules to be referenced by valid absolute URL strings.
The idea behind node: is to make clear that it is actually a buildin module and not one installed and to avoid name conflicts, with 3rd party modules.
The node: protocol was first added only for import so a particular node version might support node: with import but not with require.
In v16.13.0 (not sure since which v16 version) you can also use it with require. And was also backported to v14 since v14.18: module: add support for node:‑prefixed require(…) calls

"node:" is an URL scheme for loading ECMAScript modules. As such it started for "import", not "require".
"node:process" is just an alternative name to load the built-in "process" module.
See also Node.js documentation - you can find the lowest supporting Node.js version inside the "History" tag (12.20.0, 14.13.1)
With newer Node.js it should be available for "require" as well (14.18.0, 16.0.0).
Some more details can be found here: node:process always prefers the built-in core module, while process could be loaded from a file.

Weird error after updating package.json of old project

Updated the packages.json of a old project to work on it and get this weird error. I don't even know what the issue is here. Any help is appreciated!
Compiled with problems:
ERROR in ./node_modules/#babel/runtime/helpers/esm/inherits.js 1:0-46
Module not found: Error: Can't resolve './setPrototypeOf' in 'C:\Users--\Desktop\Lowkey Meal - React\client\node_modules#babel\runtime\helpers\esm'
Did you mean 'setPrototypeOf.js'?
BREAKING CHANGE: The request './setPrototypeOf' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/#babel/runtime/helpers/esm/objectSpread2.js 1:0-46
Module not found: Error: Can't resolve './defineProperty' in 'C:\Users--\Desktop\Lowkey Meal - React\client\node_modules#babel\runtime\helpers\esm'
Did you mean 'defineProperty.js'?
BREAKING CHANGE: The request './defineProperty' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/#babel/runtime/helpers/esm/objectWithoutProperties.js 1:0-74
Module not found: Error: Can't resolve './objectWithoutPropertiesLoose' in 'C:\Users--\Desktop\Lowkey Meal - React\client\node_modules#babel\runtime\helpers\esm'
Did you mean 'objectWithoutPropertiesLoose.js'?
BREAKING CHANGE: The request './objectWithoutPropertiesLoose' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Had similar problem when upgrading my package.json with create-react-app 5.0.0.
I'd already tried deleting node-modules and re-doing the npm install but it didn't work.
The trick was to delete node_modules AND package-lock.json before doing the npm install. After that the build worked fine.

Just type in terminal --> npm i --> press Enter
Required module is not installed and after running this command all the required module will be installed automatically.

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

I have a website hosted on Firebase hosting. I would like to add material theming to it(Buttons, Textfields, etc...). So, I ran the command npm install --save #material/textfield. I then extracted the folder called #material to my styles directory so that the structure looked like this:
Root
|
+---index.html
+---scripts/
+---app.js
+---styles/
+---main.css
+---#material/
+---……
I can reference css files from my main.css by adding #import "#material/textfield/dist/mdc.textfield.css"; to the start of my stylesheet. This correctly changes the styling of the button. However, when I go to do the same thing for js, it doesn't work.
According to Material Design's Github Repo, I should just be able to add
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
to the top of my script. However, when I deploy the code, and look at the console, the following error is returned: Uncaught SyntaxError: Unexpected token {. I have tried to require() the files, and change the path to import {MDCRipple} from '../styles/#material/ripple/dist/mdc.ripple.js';. This throws the same error. If I do: import * as MDCRipple from '../styles/#material/ripple/dist/mdc.ripple.js';, the same error is also thrown(except instead of the "{" character, it does not expect the "*" character).
This was supposed to be an easy conversion for my site, but it has given my tons of headaches. What am I doing wrong?
BTW: I know that the files the import statement is using exist. Also, isn't Node.js server-side?

Download latest version of node: https://nodejs.org/en/
Version 8.11.2 LTS will work.
The --experimental-modules flag can be used to enable features for ES2015 import. More information:
https://github.com/nodejs/node/blob/master/doc/api/esm.md

Webpack 2: fixing build error on fetch polyfill

I've a JavaScript ES6 development environment with webpack 2.2.1 where I'm developing an application package-a.
I'm also using this environment for managing a development dependency on package-b which is defined by using npm link.
The environment works well.
Now I need to polyfill the fetch API that is used by package-b.
So whatwg-fetch has ben installed.
The polyfilling way I'm using is the one suggested in this discussion: https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602
So I'm not calling import 'whatwg-fetch' on my code but I've this in my webpack configuration:
plugins: [
new webpack.ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
'Headers': 'imports-loader?this=>global!exports-loader?global.Headers!whatwg-fetch'
}),
...
This always worked well for me, and also works if I use fetch from my main (package-a) module but as I use fetch in the dependency I get this traceback:
ERROR in ../package-b/~/imports-loader?this=>global!../package-b/~/exports-loader?global.fetch!../ecmwf-prwa-editor/~/whatwg-fetch/fetch.js
Module build failed: Error: "...package-b/node_modules/whatwg-fetch/fetch.js" is not in the SourceMap.
Note that the traceback contains ref to the package-b node_modules directory (where whatwg-fetch is installed as a development dependency only as I want to keep in "pure" and without automatically polifyll host env).
Removing the development dependency and removing it from node_modules change the traceback:
ERROR in ../package-b/src/something/something.js
Module not found: Error: Can't resolve 'whatwg-fetch' in '/Users/keul/.../package-b/src/something'
...
If I drop this way of polyfilling and simply I put import 'whatwg-fetch' on package-a all works normally.
Question is: what's happening here? I'm developing a package where the dependency is present, why the polyfill through webpack is failing in this case? There' a way to fix it?

Reflect.getOwnMetadata is not a function in karma with latest Aurelia

After updating to the latest version of Aurelia (March update beta.1.1.4), I'm getting the following error every time I run karma tests:
Error: Reflect.getOwnMetadata is not a function
Error loading C:/Software/myproject/test/unit/myclass.spec.ts
How do I fix it?

This has to do with the change of Aurelia from core-js to home-grown polyfills. The Reflect polyfill is missing and tests fail to run.
This problem is addressed in Aurelia navigation skeleton app by the following import statement in each unit test file:
import 'aurelia-polyfills';
I solved it by creating a setup.ts (or setup.js resp. to your language) file with just this statement, and then just listing it in karma.config.js at the first place.
for JS e.g.:
jspm : {
loadFiles: ['test/unit/setup.js', 'test/unit/**/*.js'],
...
}
for Typescript e.g.:
files: ['test/unit/setup.ts', 'test/unit/**/*.ts'],
...