The below is my folder struture
--package.json
--node_modules
--dist
--server.js
----app
------driver
------utils
Inside 'driver' folder I have driver.model.ts file which references BaseValidator
import { BaseValidator } from '../utils/BaseValidator';
export class LoginDriverModel extends BaseValidator {
...
}
Inside the 'utils' folder I have a file called BaseValidator.ts like
export class BaseValidator {
}
Now when I run below commands in windows and linux after setting environment variable NODE_ENV=dev
node server.js [works fine in windows]
nodejs server.js [uncaughtException: Cannot find module '../utils/BaseValidator' in Linux]
The issue seems to happen in Linux if we have the same file name and class name, in the same case. The issue got resolved after changing the file name from 'BaseValidator.ts' to 'baseValidator.ts'.
Referencing the class is like below,
import { BaseValidator } from '../utils/baseValidator';
export class LoginDriverModel extends BaseValidator {
...
}
Related
I have the following code...
class BasePage{
constructor(driver){
...
}
}
class Section extends BasePage{
constructor(driver, parent){
super(driver);
...
}
...
}
export {BasePage, Section}
This seems to work, however, when I try to move section into its own folder and file like this...
import {BasePage} from "../BasePage";
export class Section extends BasePage{
constructor(driver, parent){
super(driver);
}
}
I get an error...
(node:12480) UnhandledPromiseRejectionWarning: ReferenceError: BasePage is not defined
at file ... Section.mjs
This doesn't make any sense to me and if I take the extends off and try to instantiate it works fine...
export class Section{
constructor(driver, parent){
new BasePage(driver); // works fine
}
}
What is going on here? Why am I getting a BasePage not defined?
Update
Here is the whole code
You have a circular dependency.
index.mjs loads BasePage.mjs
BasePage.mjs loads Other.mjs before running export class BasePage {}
Other.mjs loads Section.mjs
Section.mjs skips BasePage.mjs because it already in-progress from step 2.
Section.mjs tries to run export class Section extends BasePage { /* ... */ }, which throws because export class BasePage {} from step 2 hasn't run yet.
You haven't shown why you need to import Other inside BasePage so it is hard to recommend changes, but essentially you'll want to not do that.
I have been using a pattern of collecting component files for export with index.js files placed in directories, for example:
// index.js file in /components directory
export { Splash } from './Splash'
export { Portfolio } from './Porfolio'
export { Contact } from './Contact'
In Layout.js (located in root directory) I can neatly import with one call:
import { Splash, Portfolio, Contact } from '.'
I use this pattern a lot as I structure components across directories and sub-directories.
My specific question is to ask if there is any way to extend this pattern to image assets collected in src/assets/img? Can I place an index.js file in my images directory and to be able to call groups of images to a component?
//index.js in /src/assets/img directory
export { Img01 } from './img-01.png'
export { Img02 } from './img-02.jpg'
export { Img03 } from './img-03.svg'
//Call in Component.js
import { Img01, Img02, Img03 } from '../assets/img'
I think this should be achievable, but I can't figure out the correct syntax or modifications required to this pattern. Any code samples or recommendations for better practices are appreciated. Thanks in advance!
To export default components do it like this:
export { default as Splash } from './Splash'
export { default as Portfolio } from './Porfolio'
export { default as Contact } from './Contact'
// you dont need to include the 'index' on the route, just do './' if you
// are in the same directory, but your export file must be named index.js
import { Splash, Portfolio, Contact } from './';
To export files: images, css, .svg etc, just include the file extension:
export { default as Img01 } from './img-01.png'
export { default as Img02 } from './img-02.jpg'
export { default as Img03 } from './img-03.svg'
//Call in Component.js
import { Img01, Img02, Img03 } from '../assets/img'
if you are using webpack take a look at this require. You can use require to import a file like the example below:
tree directory
-images
|_index.js
|_notification.png
|_logo.png
-pages
|-home.js
images/index.js
export const notification = require('./notification.png')
export const logo = require('./logo.png')
pages/home.js
import { notification } from '../images/'
<img src={notification} />
i hope i helped you
I just created a published npm package for the first time, called "Foo". I am trying to consume it in a typescript project, but none of the tutorials about how to declare modules with custom typings, are clear to me. Here are the key parts of the npm package:
news.ts
import { tdsRequest } from "../common/request";
function articles(uri) {
return tdsRequest({ method: "GET" }, uri).then(returnData => console.log(returnData, "return data"));
}
export {
articles,
};
main.ts (main export)
import * as news from "./services/news";
export default {
news
};
in the typescript project that's consuming the npm package:
import { news } from "Foo";
and in the typings file ( Foo.d.ts ) I did:
declare module "Foo" {
export {
news: Object,
};
}
I get the following errors: cannot find module news and Cannot export 'Object'. Only local declarations can be exported from a module.
You are mixing default and named exports.
You can do default export style -
main.ts:
import * as news from "./services/news";
export default {
news
};
ts project import:
import foo from "Foo";
const {news} = foo;
foo.d.ts:
declare module "Foo" {
export default {
news: Object,
};
}
Or you can do named exports:
main.ts:
import * as news from "./services/news";
export {
news
};
ts project import:
import {news} from "Foo";
foo.d.ts:
declare module "Foo" {
export const news: Object;
}
But more importantly, you should add declaration: true to your compilerOptions in tsconfig.json in your npm library.
This will generate the d.ts file for you and will save you lots of work. Then, you need to add in package.json a filed called types that will point to the main.d.ts file that will be generated for you. This will allow any project using your library + typescript to use the generated types automatically.
This code works fine:
import modal = require('./modal');//modal path
class index{
constructor(){
var_modal = new modal();
}
}
export = index
If I change the require path to "../../widgets/personInfo/viewmodel", after I rebuild the solution Visual Studio gives the error:
Unable to resolve external module "../../widgets/personInfo/viewmodel", Build: Module cannot be aliased to a non-module type, Invalid 'new' expression
The problem was found. Folder name was starting with uppercase, while require path was all-lowercase.
Valid code:
import modal = require('../../Widgets/PersonInfo/viewmodel')
I'm getting crazy with inheritance using typescript. I don't know why but it cannot resolve the class I want to inherit.
lib/classes/Message.class.ts
///<reference path='./def/lib.d.ts'/>
///<reference path='./def/node.d.ts'/>
export module SharedCommunication {
export class Message{
// Stuff
}
}
lib/classes/ValidatorMessage.class.ts
///<reference path='./def/lib.d.ts'/>
///<reference path='./def/node.d.ts'/>
///<reference path='Message.class.ts'/>
export module SharedCommunication {
export class ValidatorMessage extends Message{
private _errors;
}
}
Message cannot be resolved. I tried SharedCommunication.Message too but it's the same. I reference the class so I don't understand at all what's going on. Do you have any idea?
I tried without the module (two class without be in any module) but it's the same. I need to export the class (and the module if I use it) to get them from another node_module: typescript.api, which I use to load the class and use it in node.
lib/message.js
var Message = require('./classes/Message.class.ts');
module.exports = Message.SharedCommunication.Message;
What's the trick here? Because I have source code on the same project in a different folder working with inheritance, without module or export. Thanks.
ValidatorMessage.class.ts should look like this:
///<reference path='./def/lib.d.ts'/>
///<reference path='./def/node.d.ts'/>
import message = require('./Message.class');
export module SharedCommunication {
export class ValidatorMessage extends message.SharedCommunication.Message {
private _errors;
}
}
It's usually redundant to have a single export module at the top level of a file since the file itself constitutes a namespace anyway.
Bill mentioned this in your other question, but I'd again caution on using RequireTS if you're just starting out with TypeScript - it sounds pretty unmature and is likely to introduce a lot of confusion.
Take out the export from the mododule declaration:
module SharedCommunication
{
export class ValidatorMessage extends message.SharedCommunication.Message
{
private _errors;
}
}