This question already has answers here:
ESM importing all files from folder with index.js not working
(2 answers)
Closed 2 years ago.
I'm using node.js v14.8.0 and ES6 style module imports.
My code looks like this:
import myModule from "./my-module";
Expected behaviour:
The file ./my-module/index.js is imported.
Actual behaviour:
Node.js throws the ERR_UNSUPPORTED_DIR_IMPORT error.
Question:
How can I configure node.js to allow directory imports and resolve them using the index.js file?
In short: "vanilla" node.js doesn't support this.
We decided to use babel, which allows for this notation.
Related
This question already has answers here:
How to resolve Node.js ES6 (ESM) Modules with the TypeScript Compiler (TSC). TSC doesn't emit the correct file-ext
(2 answers)
Appending .js extension on relative import statements during Typescript compilation (ES6 modules)
(11 answers)
How to make TypeScript output valid ES6 module import statements?
(3 answers)
Closed 1 year ago.
If I import a file import * as test from './dir/file', the .js extension is missing in the build
I want the output file like this import * as test from './dir/file.js'
The problem is: YES I can add the .js manually BUT many libraries doesn't have the .js extension manually added, and I don't want to go through all files of a library and add the extension manually.
And I know there are some regex replacer out there which add the .js extension. But is this the only way?? Is there no way to tell TypeScript to add the .js (maybe via tsconfig.json)???
There is a github issue opened about this, check it out here for workarounds, as I don't think it is possible with current ts compiler.
This question already has answers here:
Define global variable with webpack
(7 answers)
How expose a exported function into global scope with babel and webpack
(2 answers)
Closed 3 years ago.
So I'm writing an ES6 application that uses multiple files and dependencies. I bundle this up using webpack in to a single bundle.js. From here I want to run it through Babel to get ES5 JS inside of a VM (Duktape.) From here I can run the JS successfully, but then I want to actually instantiate the class I originally created by appending additional JS on to the end of this generated ES5 code.
Normally, my final output file built.js could be required like this:
const MyLib = require('built.js');
And then I would just use it like so:
let instance = MyLib();
instance.doSomething();
However, I need to access MyLib from the same JS string, instead of using require or import. The Babelfied output doesn't have meaningful names or any way to simply instantiate a "class" in vanilla JS. How would I use my module from ES5 appended to the end of this file?
This question already has answers here:
Pass options to ES6 module imports
(9 answers)
Closed 5 years ago.
In CommonJS one can run:
const module = require('module')(API_KEY)
In the various ways TC39 / 'ES6' modules (inverted commas as there are are more modules writted in ES6 using CommonJS than this syntax), how can I do the same?
It looks like this isn't possible, ie my only option is:
import moduleSetup from "module";
const module = moduleSetup(API_KEY);
ie my only option is
Correct, at least for now.
It may be that the dynamic import proposal will let you do something like the require call, but it's at Stage 3 right now. (Of course, if you use them for this, the import won't be statically-analyzable anymore...)
This question already has answers here:
Importing an external module in TS causes "ReferenceError: require is not defined"
(2 answers)
Closed 6 years ago.
I read official doc for TypeScript, and I copy code from there.
I install commonjs and requerejs.
"devDependencies": {
...
"commonjs": "latest",
"requirejs": "latest"
}
But I get a error in the browser:
ReferenceError: require is not defined
It is index.html:
<!DOCTYPE html>
<body>
<script src="main.js"></script>
</body>
It is main.js after compiling:
"use strict";
var core_1 = require("./some_dir/some_file");
window.onload = function () {
var some = new some_file_1.SomeClass();
};
Browsers don't have a understanding of modules (yet). That means while require() works if you execute it in node only, browsers don't know what to do with it.
There are 2 main methods of fixing this:
Remove the exports/require statements and include every single js file (in correct dependency order) into your html file (as script tags). They will all have the same scope and will work as if there was just one large concatenated file. This solution is pretty bad tho as it destroys scoping, doesn't really work with modules you got with npm and has bad loading times, as it has to fetch multiple js files from the server.
Use a resource bundler like webpack. Webpack will look at all dependant files starting from your main.js file and bundle and compress them down into a single small .js file. This also works for external dependencies (npm). All you have to do then is to include that single bundle.js file into the html.
This question already has answers here:
Using Node.js require vs. ES6 import/export
(11 answers)
Closed 6 years ago.
Right now I'm importing modules into node project as
import * as name from "moduleName";
Im not doing it as
var name = require("moduleName");
as we used to be in the node project, earlier
my question is there difference in the writing a module when we import using require or import, are modules written internally are same just we are importing in different way or its something internal that forces us to use require or import when importing
and what is the difference between require and import(es6)
Thanks!
import runs at the beginning of the file and it would be already
loaded before the code itself runs.
require on the other hand is run
inline and can be inserted within the code conditionally.