I would like to import My JavaScript Model from another file but I don't want to hard code part of that model. (I am using WebPack)
For example:
Module Location is src/module/something.js
In another javascript file, I want to import that using lazy load:
module = () => import('#/src/module/something');
The way I want to import it is:
let path_of_module = '#/src/module/something';
let module = () => import(path_of_module);
I am getting stuck in webpack building process.
How can I import a module using javascript variable which show that path of the module?
Seems like it is not allowed to have dependencies provided as expressions:
Critical dependency: the request of a dependency is an expression
As I don't know your use case, I just guessing what might help you:
You could lazy load your modules to access them only when they are needed.
const MyModule = () => Promise.resolve(import('../module/MyModule.js'));
In this case you would need to write some kind of switch to determine which module needs to load.
Related
I'm trying to do some code splitting and moment.js is one of the targeted packages I want to isolate in a separate chunk. I'm doing it like this:
const myFn = async (currentNb) => {
const moment = (await import('moment')).default()
const dateUnix: number = moment(currentNb).valueOf()
[...]
}
But I get the following error: this expression is not callable. Type Moment has no call signatures . So I guess I should be doing something like moment.valueOf(currentNb) but I'm not really sure. Can someone put some light to this? Thanks in advance
So apparently my syntax was incorrect. I finally found how to solve this problem. I need to import it as follows:
const {default: moment} = await import('moment')
I found the answer in the webpack documentation:
The reason we need default is that since webpack 4, when importing a
CommonJS module, the import will no longer resolve to the value of
module.exports, it will instead create an artificial namespace object
for the CommonJS module.
We are trying a POC of adding Typescript and Webpack to our Angularjs project.
I am able to get my webpack bundle to generate, however at runtime the program cannot find the various functions in my validator.js. Can you please offer some advice?
login-view.components.ts
declare var findFormNode: any; //function in validator.js
//LogInUser
self.login = function ($event, command) {
if (findFormNode($event.target.id)) {
...
}
}
main.ts is importing the file
import "./../../../CommonStaticFiles/include/js/Validators.js";
bundle.js
eval("/* WEBPACK VAR INJECTION */(function($) {/*\r\n\r\n VALIDATORS\r\n\r\n ... n\n\nfunction findFormNode(
error
ReferenceError: findFormNode is not defined
at LoginController.self.login (login-view.component.ts:28)
at fn (eval at compile (angular.js:NaN), <anonymous>:4:267)
at callback (angular.js:29019)
In order for your functions to be properly imported, there are few things that you have to make sure of.
First, make sure you are exporting your functions correctly. Here's an example of how to export a function from Validator.js:
export const validateFunc1 = ():void => {};
Next, you have to make sure you are using proper import syntax. In order to import the function above, you would do the following:
import {validateFunc1} from "./../../../CommonStaticFiles/include/js/Validators.js";
Alternatively, if you want to import all exported functions at once, then you can use this syntax:
import * as validatorFuncs from "./../../../CommonStaticFiles/include/js/Validators.js";
Lastly, check that the location of Validators.js is correct. It's a common mistake to be looking in the wrong directory. Your code editor can usually help you find the right path to use.
Prior to ES6 modules, it was (I'm told by other Stack answers) easy to force a JS script to be reloaded, by deleting its require cache:
delete require.cache[require.resolve('./mymodule.js')]
However, I can't find an equivalent for ES6 modules loaded via import.
That might be enough to make this question clear, but just in case, here's a simplified version of the code. What I have is a node server running something like:
-- look.mjs --
var look = function(user) { console.log(user + " looks arond.") }
export { look };
-- parser.mjs --
import { look } from './look.mjs';
function parse(user, str) {
if (str == "look") return look(user);
}
What I want is to be able to manually change the look.mjs file (e.g. to fix a misspelled word), trigger a function that causes look.mjs to be reimported during runtime, such that parse() returns the new value without having to restart the node server.
I tried changing to dynamic import, like this:
-- parser.mjs --
function parse(user, str) {
if (str == "look") {
import('./look.mjs').then(m => m.look(user))
}
}
This doesn't work either. (I mean, it does, but it doesn't reload look.mjs each time it's called, just on the first time) And I'd prefer to keep using static imports if possible.
Also, in case this is not clear, this is all server side. I'm not trying to pass a new module to the client, just get one node module to reload another node module.
I don't know what the reason behind doing this,
I think this is not safe to change the context of modules at runtime and cause unexpected behaviors and this is one of the reasons that Deno came to.
If you want to run some code evaluation at runtime you can use something like this using vm:
https://nodejs.org/dist/latest-v16.x/docs/api/vm.html
You could try using nodemon to dynamically refresh when you make code changes
https://www.npmjs.com/package/nodemon
I agree with #tarek-salem that it's better to use vm library. But there is another way to solve your problem.
There is no way to clear the dynamic import cache which you use in question (btw there is a way to clear the common import cache because require and common import has the same cache and the dynamic import has its own cache). But you can use require instead of dynamic import. To do it first create require in parser.mjs
import Module from "module";
const require = Module.createRequire(import.meta.url);
Then you have 2 options:
Easier: convert look.mjs into commonjs format (rename it look.cjs and use module.exports).
If want to make it possible to either import AND require look.mjs you should create the npm package with package.json
{
"main": "./look.cjs",
"type": "commonjs"
}
In this case in parser.mjs you will be able to use require('look') and in other files import('look') or import * as look from 'look'.
About the framework (while I think the problem itself does not heavily rely on that): Angular 2 with Webpack
There is the library Leaflet.heat which relies on simpleheat. I got the missing type definitions under control.
I'm importing the libraries in my vendor.ts
[...]
import 'simpleheat';
import 'leaflet.heat/src/HeatLayer';
[...]
Inside of the HeatLayer class, the function simpleheat:
[simpleheat.js]
if (typeof module !== 'undefined') module.exports = simpleheat;
function simpleheat(canvas) {
...
is called. However, the HeatLayer module file does not require simpleheat inside it's file.
Thus, creating an instance of L.HeatLayer works, but the execution of the respective code in it's function fails with
ReferenceError: simpleheat is not defined
Now, adding (for testing purposes) simpleheat = require('simpleheat'); into the HeatLayer file (a vendor), it works.
Understandably, I don't want to modify a vendor file.
Question:
What options do I have, to make the function simpleheat accessible from inside the HeatLayer module?
One Solution I just found:
Change the vendor.ts to the following:
(<any>window).simpleheat = require('simpleheat');
import 'leaflet.heat/src/HeatLayer';
Are there others/better?
I am using the following pattern for of angular module definition:
define(function(require) {
var moduleId = require('module').id;
var angular = require('angular');
var ngModule = angular.module(moduleId,
[require('angular-xx1'), require('angular-xx2')]);
ngModule.directive('myDirective', {/*...*/ });
return moduleId;
});
This way, by exporting module name I can easily manage loading of the scripts during development and building for production is automatically handled by require.js. Furthermore I don't have to worry about module naming as moduleId is guaranteed to be unique.
Yesterday I have stumbled upon BabelJS (https://babeljs.io/) and its AMD loader plugin. It works very nicely but I have trouble using only ES6 syntax to manage my loading. The best I can come up with is having a mixed AMD/ES6, depending on the transpiler wrapping my code in the right AMD definition.
import angular from 'angular';
import {id} from 'module';
export default id;
let ngModule = angular.module(id,
[require('angular-xx1'), require('angular-xx2')]);
ngModule.directive('myDirective');
I would love not to depend on any assumptions of a module loader here so I would love to get rid of having to write require and some way to get unique module id with importing id.