Create own class - node.js

created a new project in expressjs. I want to create my own class. So I created a file MyClass.js in /routes/.
class MyClass {
constructor() {
}
}
export default MyClass;
And in /routes/index.js i added:
import MyClass from './MyClass';
And I have an error:
import MyClass from './MyClass;
^^^^^^
SyntaxError: Cannot use import statement outside a module
[...]
What I'm doing wrong?

Your project is not set up properly to interpret the file that has the error as an ESM module file. It is, instead, being interpreted as a CommonJS module (where you use require(), not import) which is the nodejs default.
There are a number of ways to tell nodejs that your file is supposed to be an ESM module.
You can give it a file extension of .mjs.
You can add "type": "module" to your package.json file.
You can use the --input-type=module command line argument when starting node.js if this file is your top level file you're executing.
See nodejs doc here on this subject.
FYI, you could just switch to the CommonJS syntax of using require() and module.exports instead of import and export, but I assume what you really want to do is to tell nodejs that you want to use ESM modules so you can use the more modern import and export syntax.

Well first of all to export your class you suppose to use exports or module.export
and to import it you suppose to use require('') not import.
Those features are only available with .mjs or if you will setup babel though soome es6 features are yet to land in

Related

How can I import a component directly instead of from the root index file?

I wrote myself a small package which I use to share different React components between my projects.
The "exports" field in my package.json looks like this:
Since this is a TypeScript project, the transpiled .js in the output directory are specified below.
"exports": {
".": "./lib/index.js"
}
My index.ts file looks like this:
export * from "./Grids";
Then inside my Grids folder i have another index.ts file with the following content:
export * from "./UniversalGrid";
And finally inside the UniversalGrid folder, there is another index.ts file, in which the actual components is getting exported:
export * from "./UniversalGrid";
Now when I want to use the component in my app, I am shown two import suggestions, namely:
import {UniversalGrid} from "#privateComponents/react-components"
and
import {UniversalGrid} from "#privateComponents/react-components/lib/Grids/UniversalGrid"
The first approach (import from /react-components), works without problems.
However, with the second possible import statement (import from /react-components/lib/Grids/UniversalGrid) the following occurs:
Module not found: Error: Package path ./lib/Grids/UniversalGrid is not exported from package C:\Users\<user>\WebstormProjects\PKD\node_modules\#privateComponents\react-components
However, this way the component can be imported without any problems, and also when I select "Jump to definition" I am led to the correct file.
Now I have two questions, first, why is this happening?
And second, how can I import/export my components separately.
Say: Grid1 should be imported from /Grids/Grid1.
Grid 2 should be imported from /Grids/Grid2.
But none of the modules should be imported directly from the /Grids folder.
Thank you very much in advance!
Just dont export Grid in Grids/index.ts, change your transpiled to this
"exports": {
".": "./lib/index.js",
"./Grids/Grid1": "./lib/Grids/Grid1/index.js",
"./Grids/Grid2": "./lib/Grids/Grid2/index.js"
...
},
Now you can import Grid1 from /Grids/Grid1 not from /Grids

Why use import and require() in Node.js code?

I am reading the source code at "Type definitions for Express 4.16" and found this funny line (#18):
import serveStatic = require("serve-static");
Since import is the new way to work with modules in ES6, why above code is used or needed at all?
Type definitions for Express 4.16 is written(index.d.ts) in typescript, Where import = require() is a TypeScript Syntax
TypeScript - Modules (export = and import = require())
The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.
When exporting a module using export =, TypeScript-specific import module = require("module") must be used to import the module.
Reference : Modules

How to obtain ES6 module of React and ReactDOM?

I am not intending to use WebPack bundled js file, instead, to import React ES6 modules natively in ES6 way.
Here's the typical code in JSX, or TSX, or just ES6.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
So, I investigated ./node_modules/react and react-dom.
There are 2 directories named cjs and umd, and each contain react.development.js and react.production.min.js.
Fair enough, so investigating files,
cjs is for CommonJS module.exports /require module.
umd is Universal Module Definition, and looks like to be used via Babel plugin transform-es2015-modules-umd.
In either files, they are not ES6 modules, and to me it's very awkward situation not to be able to find module files for:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
How to obtain ES6 module of React and ReactDOM??
Is there any method to generate ES6 modules using a tool in the eco of Babel or even TypeScript?
Thanks.
2021-04-11 update:
https://github.com/facebook/react/issues/11503#issuecomment-662647468 is an update from 2020-07-22 from Dan Abramov that mentions the new https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html. With the new transform, there is a lot less reason to import the default export of React.
Actual first party React ESM being distributed might happen after React 17 drops.
In addition to cleaning up unused imports, this will also help you prepare for a future major version of React (not React 17) which will support ES Modules and not have a default export.
Older answer
On November 9th, 2017 Dan Abramov said:
Currently we only ship CommonJS versions of all packages. However we might want to ship them as ESM in the future (#10021).
We can't quite easily do this because we haven't really decided on what top-level ES exports would look like from each package. For example, does react have a bunch of named exports, but also a default export called React? Should we encourage people to import * for better tree shaking? What about react-test-renderer/shallow that currently exports a class (and thus would start failing in Node were it converted to be a default export)?
The issue referenced above is a request for what you're asking for from June 21, 2017.
Here is a fairly simple, but hacky, solution while we wait for an official React ESM. Use the umd modules which ship with the npm package of React and ReactDOM. Wrap the umd modules in the following way:
React
let g = {}
let w = (function(){
// Standard umd module code goes here
}).bind(g)
w()
export default g.React
ReactDOM
import React from './react'
let g = {React: React}
let w = (function(){
// Standard umd module code goes here
}).bind(g)
w()
export default g.ReactDOM
You may need to modify the the ./react import path to work with what your server expects.

How to create node.js module proper to VS Code intellisense

I coded all js classes according to ES6 and added all JSDoc comments using with eslint.
I created index.js file for the module which exports necessary classes of node module.
After linking(npm link) the module and import the classes from other node application I can't see the class files.
Would you write if there is a proper way to create, export modules and import them in order to see every types, properties etc in VS Code intellisense?
Should I generate .d.ts file and import it somehow in VS Code to see them in intellisense?

Importing Typescript modules in renderer

I'm attempting to import Typescript classes in the renderer process of Electron.
The issue I have is that I cannot use the "import" keyword in the Renderer process. This is because I can't use commonJS as the module importer on the client side, only the server side.
I am at a loss for how I can import these classes that I've exported.
I made a gist trying to explain https://gist.github.com/kvikende/0fb762e38fc0d1bfe1aebf786fd2ca59
Tldr: import keyword fails with "Uncaught ReferenceError: exports is not defined". Using const dataset = require("./dataset"); doesnt actually import my exported classes.
What am I missing?
When I'm writing a module that will be used both on the client and the server, I use the module flag to compile the module in UMD format:
tsc --module umd app.ts
You can then use standard imports:
import * as MyModule from './MyModule';
And they will work with both commonjs and AMD module loaders (for example, you could use require.js in your browser).

Resources