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.
Related
I am trying to use tabulator in svelte. But it seems tabulator does not expose package type as module in package.json file. Because of that, we cannot import tabulator_esm as module.
When I try to import that as module, I get error from vite like Unexpected token export. Though there is other way to import like await import('tabulator-tables');.
Should not this option (`"type": "module") be in package.json?
You can import Tabulator using the standard esm import sytanx, because the Tabulator library exports its core functionality seperate from its modules, you need to make sure you import the bits of the library you need:
To get the basic Tabulator core functionality:
import {Tabulator} from 'tabulator-tables';
To get the basic Tabulator core functionality with specific modules:
import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';
Tabulator.registerModule([FormatModule, EditModule]);
To get full tabulator with all modules installed (this will be a much bigger source file):
import {TabulatorFull as Tabulator} from 'tabulator-tables';
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
Scenario
So, I have initialised a Node project with npm. I have setup my package.json accordingly. I am using typescript, so I have also setup tsconfig.json.
I have a few dependencies (npm packages) that I will need to use multiple times in multiple files of my project.
index.ts is the root of my project. I can import these libraries in index.js and other files also.
Problem
Is there any way to include or import these libraries in the project only once so that I can use them in any file of the project without having to import a single thing anywhere.
I tried searching for various ways to do this using -
CommonJS module syntax, NodeJS module syntax, global modules - but none of it can provide me the way I want it.
For Ex -
Most of the answers or solutions I got were like this
Export all the libraries through a single file
import abc from 'abc';
import xyz from 'xyz';
module.exports = {
abc, xyz
};
Use these libraries in other files like
import modules from 'src/modules.ts'
var wantSome = modules.abc.getSome();
But, this still has an overhead of importing modules file and accessing it like modules.abc.
Do we have any way to make these imports available globally through out the project.
P.S. - This scenario is somewhat similar to ngModules in Angular 2+, where we can import whatever we want inside ngModules and it is then available to all the components under that module.
Doing this is going to cause you all sorts of problems in the long run.
you'll end up with one monolithic file containing all your exports, which will become onerous to maintain
if you decide to modularise your code, it will be more difficult since you won't explicitly know which modules a file uses
if you were able to include to the point where you simply use the modules with no reference, code clarity will suffer
name clashes might occur
The best I believe you'll get in node is to declare all the includes in a single module, and then destructure within your own file.
import abc from 'abc';
import xyz from 'xyz';
module.exports = {
abc, xyz
};
Then
import modules from 'src/modules.ts'
{ abc: { getSome } } = modules
But I strongly suggest using the standard patterns for importing. It will make your code much cleaner and easier to maintain
N/B - Thats a bad way to design your app.
In node, you can set global variables via the "global" or "GLOBAL" object:
You could import all your dependencies in your app entry file, and store them in a Global variable
index.js
import abc from 'abc';
import xyz from 'xyz';
global.abc = abc
global.xyz = xyz
someotherfile.js
//access abc import
global.abc
Export all the libraries through a single file
import abc from 'abc';
import xyz from 'xyz';
module.exports = {
abc, xyz
};
Use these libraries in other files like
import {abc, xyz} from 'src/modules.ts'
var wantSome = abc.getSome();
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?
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).