We Keep Coding

How to allow both import ES5 and ES6 to my npm package?

I am new to npmjs package publishing and recently published my 1st package successfully. But since it's written in ES5 style. It is accessed only via "require"
const smiley = require('smiley-id');
What should be done to make it accessible via import statement also? like this
import smiley from 'smiley-id';
or/and
import { smileyId } from 'smiley-id';

require is part of the CommonJS module system (also known as cjs modules) whereas import and export are used in es2015 module system (also known as JavaScript modules, es6 modules or esm modules).
You can use import for both cjs and esm modules, but you cannot use require for esm modules. This means that in an esm module (or source file which you will compile with Typescript tsc or Babel or bundle with Webpack) you can already import your package, as it is, with import. However, you cannot use named imports. Instead you have to destructure the imported item afterwards.
If you want to distribute it as an esm package, this is also possible and it comes with some advantages, out of which the most important is related to tree-shaking. To distribute it as an esm module, you tell your build tool to output esm modules. This is different for different tools. Fortsc for example you specify --module es6 (there are multiple targets that output esm modules). For Webpack, Babel and Rollup, the procedure is different.

Uncaught ReferenceError: require is not defined?

I have downloaded node-js and I am using npm inside a folder. I have downloaded the lodash package as a dependency and it is in the node modules folder.
but when I try to use it using require() it is giving above mentioned error in the console and suggesting to use ES6 module by vs code and require is a module of common.js
I have a package.json file and lodash is listed as a dependency. I am able to run lodash in the command line using node server but not in the browser
Do we need any other package installed in order for require() function to run other than node-js?
what am I doing wrong?
I am on windows and using the latest version of node and npm
let a = require('lodash');

If VSCode is suggesting you use ES6 modules, then you may have turned on ES6 Module support in your project which overrides Node's default support for CommonJS modules.
Use
import lodash from 'lodash';
instead of require.
Re edit:
I am able to run lodash in the command line using node server but not in the browser
Well yes. If you run a program designed to work in Node.js in Node.js then it work. If you run the same program in a browser, then it won't work. Just having Node.js installed somewhere doesn't turn the browser into Node.js.
If you want to use an ES6 module in a browser then:
It must be compatible with browsers (lodash might be)
You need to use import lodash from "./url/to/lodash.js"; because browsers don't have support for resolving npm paths.
If the module isn't designed to run in browsers, then you might be able to use a tool like Webpack to bundle it up in a way that will work (but that won't work in the module depends on APIs provided by Node.js, like fs).

You can use express framework to work on NODE js
let express = require('express') ;

How come i can use es6 import for libraries which produce commonJS and UMD bundles only?

I was wondering
I am used to work with Webpack and bundle my own libraries to UMD and ESM.
But now I see that some of the libraries I am using, do not even create ESM bundles.
Even though, I am able to import them using es6 syntax!.
If it is the case, does it mean that modern bundlers like webpack and rollup knows how to import the modules without them having to be defined in ESM format?
Is it really necessary that I produce ESM format for my own builds?

How can I use System.Web.Optimization (.net js bundler) with amd modules?

Now I am working with the project using System.Web.Optimization as js bundler.
How can I use amd modules with this bundler?
define('myModule', function(myModule){})
Now I am obviously getting define is not defined error.
Webpack and r.js can handle dependencies, but I dont want to change bundler yet.

AFAIK System.Web.Optimization is deprecated and there is no method to support it "from the box". Now I am using webpack with es6 modules. I am using this extension to run webpack.

Node module using requirejs and typescript

I use requirejs and typescript for a node_module.
https://github.com/Ayolan/validator-extended/blob/master/app.js
It works but I cannot load it once installed from npm.
It looks like the requirejs config on the node_module change the config of my project (baseUrl and nodeRequire config actually).
There is a way to use TS and requirejs on a node_module?

Node.js does not use the AMD specification for JavaScript modules but instead the CommonJS modules. You'll need to tell the TypeScript compiler to compile your modules to this specification. This can be easily achieved by passing in the --module "commonjs"flag to the compiler.
Please note, that although the CommonJS spec uses the require keyword, this is something completely different than RequireJS. Node.js does not rely on RequireJS for it's module loading, it has its own module loader that is based on the CommonJS spec.
In short: try to avoid using RequireJS and node.js.

His question makes sense. Using requirejs in node has a number of advantages over the standard commonjs: http://requirejs.org/docs/node.html
How to build node modules with AMD / Requirejs:
http://requirejs.org/docs/node.html#nodeModules

If you don't need requirejs AND node at the same time
That was my case when I had 2 separated typescript builds, one for the front and one for the back but I had only one package.json to put all the "#types" in so tsc would pick both .d.ts in node_modules/#types
You can just manually tell tscto take certain types with the type option:
types: [ "requirejs" ] for the front and types: [ "node" ] for the back
Hope this helps.