Importing TypeScript Module located in path lower than current path throws Scope Error - module

In an attempt to put together an AMD-friendly TypeScript application skeleton, I've run into a snag: I can't seem to drop down from my current path to import a module in another directory. I can import modules that are above, but below throws an error:
TypeScript Error: The name ''../core/View'' does not exist in the current scope
Here the is the structure of my (very basic) app:
app/
- core/
- View.ts
- views/
- HomeView.ts
- Application.ts
In my Application.ts file, I can successfully import a module like so:
import HomeView = module( 'views/HomeView' );
export class Application {
constructor() {
console.log( 'initializing Application' );
}
}
Which, when using the --module AMD flag, correctly outputs
define(["require", "exports", 'views/HomeView'], function(require, exports, __HomeView__) {
var HomeView = __HomeView__;
var Application = (function () {
function Application() {
console.log('initializing Application', HomeView);
}
return Application;
})();
exports.Application = Application;
})
Now, the problem is when I jump into views/HomeView.js and attempt to import my core/View BaseClass to extend from:
import View = module('../core/View');
export class HomeView {
constructor() {
console.log('Hello HomeView!');
}
}
Which throws this complete error:
TypeScript Error: The name ''../core/View'' does not exist in the current scope
File: test/src/app/views/HomeView.ts
Start: 21, Length: 14
Line: import View = module('../core/View');
---------------------------^^^^^^^^^^^^^^--
Is this a bug in the compiler, or is my understanding of module imports faulty? Why would i be able to import views/HomeView, but not ../core/View?
Any help would be greatly appreciated.

I managed to get this to work using a root path - although I can't tell you why your relative path doesn't work.
import view = module("./app/core/View");

Related

How to import node-java and use it correctly?

Now I am trying to call our APIs in our own Jar.
In VS Code extension example project, I tried to npm install java to install it in modules dir.
In my extension.ts it looks like below:
import * as vscode from "vscode";
import * as java from "java";
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log(
'Congratulations, your extension "test-ext" is now active!'
);
context.subscriptions.push(
vscode.commands.registerCommand("test-ext.callLocalJar", async () => {
console.log('test caller start.');
java.classpath.push("testapis.jar");
console.log('test caller start.');
}
)
);
}
// this method is called when your extension is deactivated
export function deactivate() {}
But now I got a failure in the very beginning when activating it...
error:
Activating extension 'boyka.test-ext' failed:
Cannot find module 'c:\Users\boyka\Workspaces\test-ext\build\Release\nodejavabridge_bindings.node'.
My package.json is like
"dependencies": {
"java": "^0.12.2"
}
I am not sure of the root cause, tried to research and add Java home to PATH but luck.
Anyone has this node-java usage experience that could help? Will appreciate that!
https://github.com/joeferner/node-java
Thanks
b.

register dynamic components for vue app in seperate module file

I would like to make a js module file that imports vue component and register there.
and then inherit this component and use it for the app's main component.
I've found similar cases but the thing is, I don't use vue cli.
custom.js
import customMain from '/custom/components/main/main.js';
window.Vue.defineComponent('custom-main', customMain);
and in the app.js
import Main from '/global/components/main/main.js';
var App = createApp({
...
components: {
'global-main': Main,
},
template: `<component :is='mainComponent'></component>`,
computed: {
mainComponent() {
if(this.settings.customComponent){
return 'custom-main';
}else{
return 'global-main';
}
}
is this doable? what should I do to make this work?
is there other alternative way to load components dynamically?
The best approach for this case is defining a plugin named registerComponents in the plugins folder : plugins/registerComponents.js
import customMain from '/custom/components/main/main.js';
export default {
install: (app, options) => {
app.component('custom-main', customMain);
}
}
in App.js use the plugin:
import registerComponents from './plugins/registerComponents'
var App = createApp({....})
App.use(registerComponents)

I integrate an adminLTE template in Angular 8. the first time when I launch the server the program works correctly after it gives this error

ERROR in src/assets/plugins/filterizr/FilterContainer.d.ts:1:10 - error TS2305: Module '"D:/angular_workspace/templateAngular/src/assets/plugins/filterizr/FilterizrOptions/defaultOptions
"' has no exported member 'RawOptionsCallbacks'.
1 import { RawOptionsCallbacks } from './FilterizrOptions/defaultOptions';
~~~~~~~~~~~~~~~~~~~
src/assets/plugins/filterizr/FilterItems.d.ts:1:10 - error TS2305: Module '"D:/angular_workspace/templateAngular/src/assets/plugins/filterizr/ActiveFilter"' has no exported member 'Filte
r'.
1 import { Filter } from './ActiveFilter';
~~~~~~
src/assets/plugins/filterizr/Filterizr.d.ts:4:10 - error TS2305: Module '"D:/angular_workspace/templateAngular/src/assets/plugins/filterizr/ActiveFilter"' has no exported member 'Filter'
.
4 import { Filter } from './ActiveFilter';
~~~~~~
src/assets/plugins/filterizr/Filterizr.d.ts:5:10 - error TS2305: Module '"D:/angular_workspace/templateAngular/src/assets/plugins/filterizr/FilterizrOptions/defaultOptions"' has no expor
ted member 'RawOptions'.
5 import { RawOptions } from './FilterizrOptions/defaultOptions';
~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.
I got the same error when i tried to launch the server.
Replace imports in these classes:
"Filterizr.d.ts" in plugins/filterizr
Replace these imports:
import { Filter } from './ActiveFilter';
import { RawOptions } from './FilterizrOptions/defaultOptions';
For these:
import { Filter } from './types/index';
import { RawOptions } from './types/interfaces';
"FilterContainer.d.ts" in plugins/filterizr:
Replace this import:
import { RawOptionsCallbacks } from './FilterizrOptions/defaultOptions';
for:
import { RawOptionsCallbacks } from './types/interfaces';
"FilterItems.d.ts" in plugins/filterizr:
Replace this import:
import { Filter } from './ActiveFilter';
for
import { Filter } from './types';
Just remove the Filterizr folder from your plugins folder in assets
its useless for me and works
Filterizr plugin folder also contains the source code. Just keep the .js files and remove everything else inside /plugins/Filterizr folder. Remove .d.ts files. Problem solved.

Circular dependency issue while exporting from single file using babel-module-resolver

I was working on a react native project and while perfoming hot reloading app goes into cyclic recursion resulting in maximum call stack exceeded. More details of this issue can be found here
From here I realised that there is something wrong and circular dependencies are getting created.
I decided to give madge a try and see whats going on in the project. After running the command I saw quite a number of circular dependencies.
Now since my project is quite huge debugging that was quite a task so I created a small version of my project containing a single folder.
I created a utils folder in which I have 4 files: -
utils/index.js
utils/device-helper.js
utils/init.js
index.js
For imports I am using babel-module-resolver
utils/init.js
import {deviceInfo} from "utils";
export const init = () => {
// initialising app and calling backend API with device info
};
utils/device-helper.js
import DeviceInfo from "react-native-device-info";
const API_LEVEL = "v0";
export const deviceInfo = () => {
try {
return Object.assign({}, {
apiLevel: API_LEVEL,
deviceId: DeviceInfo.getUniqueID(),
device: DeviceInfo.getDeviceName(),
model: DeviceInfo.getModel(),
osVersion: DeviceInfo.getSystemVersion(),
product: DeviceInfo.getBrand(),
country: DeviceInfo.getDeviceCountry(),
appVersion: DeviceInfo.getVersion(),
manufacturer: DeviceInfo.getManufacturer(),
userAgent: DeviceInfo.getUserAgent(),
buildNumber: DeviceInfo.getBuildNumber(),
bundleId: DeviceInfo.getBundleId()
});
} catch (e) {
// TODO: Report to Bugsnag
return {};
}
};
utils/index.js
export * from "./init";
export * from "./device-info-helper";
index.js
export * from "./utils";
After running madge command I get following :-
tests-MBP:madge-test harkirat$ madge --circular index.js
Processed 4 files (684ms)
✖ Found 1 circular dependency!
1) utils/index.js > utils/init.js
However, if i change utils/init.js to following it works:-
utils/init.js
import {deviceInfo} from "./device-helpers";
export const init = () => {
// initialising app and calling backend API with device info
};
I am not able to understand the cause of this circular dependency. Can someone please help?
Here is link to the repository.
I don't see a .babelrc in the repo, but here is what I think:
In utils/init.js you import using:
import {deviceInfo} from "utils";
That is same as:
import {deviceInfo} from "./utils/index";
In utils/index.js you do a export * from "./init". This export from basically first imports all the contents of ./utils/init and the reexports it.
So:
utils/init.js imports from ./utils/index
./utils/index.js imports from ./utils/init
There is your circular dependency.

How can I import a global-scope file into my react native project

I need to use a 3rd party file in my react-native application that assumes it has a global context. It has no es6 or node-style exports at all. Is there any way to inject this 3rd party file into my react-native project?
Sample of the content of the 3rd party file:
var Module;
(function (Module) {
var SubModule;
(function (SubModule) {
"use strict";
})(SubModule = Module.SubModule || (Module.SubModule = {}));
})(Module || (Module = {}));
...
As we can see, things seem to be organized into a module system to prevent too much global scope pollution. There is no export or module.exports to work with though.
------- edit ----------
Per suggestion, I tried the import 'file'; syntax with a file, and it "compiles" but doesn't put the vars in global scope.
in a test.js file:
/* eslint-disable */
var mytest = {
test: () => console.log("test run success");
};
console.log("test file evaluated");
then in my main App.js file
import './test';
...
/* global mytest */
mytest.test();
The "test file evaluated" message is logged out, but the application throws a "ReferenceError: mytest is not defined" on the mytest.test(); line.