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
Related
I'm new to TypeScript and I'm trying to import the fs package from node.js, however this syntax is wrong and I'm not sure what am I supposed to do.
import * as "fs" from "fs";
What import does is it puts imported expressions into identifiers - or JavaScript variables. You need the syntax for an identifier to put the fs namespace into:
import * as fs from "fs";
Doing as "fs" doesn't work because what follows the as must be the variable name to put the namespace into, not a string.
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
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.
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).
I have a module like this:
module Model where
import FlowType
.
.
.
I am using FlowType in Model's body, but I want also to export along with Model's functions FlowType's too. I found a module with the following syntax:
module Import
( module Import
) where
import Foundation as Import
.
.
.
What is this module Import ( module Import) where???
How can I do the same in my Model module (and also exporting its own functions)?
Suppose the module Foundation exports the names foo and bar.
First, import Foundation as Import makes those names available as Import.foo and Import.bar inside the module currently being defined.
The module statement then exports those names as well. Instead of having to write
module Import (foo, bar) where
you can export everything accessible via the name Import with the syntax in the question. The example is a little confusing since it uses Import both as the internal name for Foundation and as the name of the current module. It would be more obvious written as
module Import (module Foundation) where
import Foundation
.
.
.
In your case, you would write
module Model (module FlowType) where
import FlowType
to export everything imported from FlowType from your module.