Im bundling together the following files contents:
a.js:
class BaseC {
doIt(){
console.log(this);
}
}
class A extends BaseC{
}
b.js:
class B extends BaseC{
}
var b = new B()
b.doIt();
These are bundled in a final app.bundle.js. When running it i get : "Uncaught ReferenceError: BaseC is not defined". This is very odd to me as i can see it as defined first and foremost in the app.bundle.js prior to the rest of the classes as follows:.
var BaseC = function () {
function BaseC() {
_classCallCheck(this, BaseC);
}
_createClass(BaseC, [{
key: "doIt",
value: function doIt() {
console.log(this);
}
}]);
return BaseC;
}();
Any clues?
P.S: Im not using the require/import system. I know this is how webpack is normally used but what im doing is providing an array with all the js files i want bundled to webpack using the glob module and expected that with such a simple example, it should work.
Try exporting the class from a.js:
export class BaseC { ...
and importing it into b.js:
import {BaseC} from './a.js'
...
Related
How to include functions in namespace / module when don't have module?
example: I have a namespace:
namespace Java {}
in typescript, usually when we need a function in namespace or module, we add 'export':
namespace Java {
export function version() {
return "java8";
}
}
namespace JavaScript {
function JavaVer() {
return Java.version();
}
}
But if I set module to none:
// tsconfig
"module": "none",
If module is none, I cannot use import / export:
website/sourcecode/main.ts:17:21 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'.
17 export function version() {}
so what can I do?
image:
You can use a plain object:
TS Playground
const Java = {
version () {
return "java8";
},
};
const JavaScript = {
JavaVer () {
return Java.version();
},
};
const vJ = Java.version(); // string
const vJS = JavaScript.JavaVer(); // string
console.log(vJ === vJS); // true
It was answered in here: It's actually "can't have any imports or exports at the top level". Imports and exports inside namespaces are fine because they don't export anything from .ts file at runtime, and as long as file remains 'not a module' module=None works fine. Long explanation here
I have this sample class sync.js as a module somewhere on my project.
'use strict';
export default class Sync{
constructor(dbConnection){
this.dbConnection = dbConnection;
}
test(){
return "This is a test " + this.dbConnection;
}
}
Then somewhere on my controller I am using this class as :
'use strict';
import Sync from '../../path/to/module'; // <-- works fine
const sync = new Sync('CONNECTION!'); // <-- meh
console.log(sync.test());
I was expecting something like this to be logged on the console This is a test CONNECTION!. But instead I am getting this error. TypeError: object is not a constructor
What did I do wrong?
By the way if I removed the line const sync = new Sync('CONNECTION!'); and changed console.log() to console.log(Sync.test()); the output This is a test undefined is printed which is kind of what I expected. But what's wrong with my instatiation?
WTF?
Edit
Guys I think I found the problem, based on #JLRishe and rem035 pointed out, it was returning the instance of the class not the class itself. In fact there is an index.js that imports the './sync' js file and exporting is as export default new Sync();. Here's the whole index.js.
'use strict';
import Sync from './sync';
export default new Sync(); // <-- potential prodigal code
The module tree looks like this.
module
|
|_ lib
| |_ index.js // this is the index.js I am talking about
| |_ sync.js
|
|_ index.js // the entry point, contains just `module.exports = require('./lib');`
Now. How do I export export default new Sync(); without doing new?
EDIT 2
How do I export export default new Sync(); without doing new?
Just remove the new keyword from module/lib/index.js:
import Sync from './sync';
export default Sync;
Or directly import from module/lib/sync.js
EDIT 1
Based on the what you are saying is logged,
Sync { dbConnection: undefined }
it seems like your import is returning an instance of the class (which is an object), rather than the class definition itself.
So console.log(new Sync()) would return what you are saying,
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
console.log(new Sync());
not console.log(Sync)
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
console.log(Sync);
Are you sure you aren't calling new Sync anywhere prior to exporting?
Initial answer
The code in question works fine:
'use strict';
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
const sync = new Sync('CONNECTION!');
console.log(sync.test());
Based on your error:
TypeError: object is not a constructor
Your import is not returning what you think it's returning and you are trying to new something that cannot be instantiated.
Most likely your import path is wrong.
Since this is the top result on google:
If you are using require() statements in Node to import classes and introduce a circular dependency, you will suddenly see this error popping up because require() is returning {} instead of the class.
I'm trying to import a package that I've written into another package that I've written.
Pre-Babel Loader
class TestClass {
constructor() {
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
log(message) {
console.log("TESTING LOG");
}
}
export default new TestClass();
Post Babel Loader
var TestClass = function () {
function TestClass() {
_classCallCheck(this, TestClass);
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
_createClass(TestClass, [{
key: "log",
value: function log(message) {
console.log("TESTING LOG");
}
}]);
return TestClass;
}();
exports.default = new TestClass();
The import itself is simply a import TestClass from 'testclass-js'. However, every single time I'm trying to load it I get a "Darklaunch is not defined" error, and can't call any of the methods of the class.
I'm wondering what I've done wrong here.
If you're trying to import the ES5/commonjs version, you'll need to import 'yourmodule'.default; This change came in around babel 6
Babel 6 changes how it exports default
Read more on the original issue: https://github.com/babel/babel/issues/2212
If your package contains both an es5 and es6+ version, you can point to the es6 version in the module key in package.json and webpack/rollup will pick that up and bundle it instead of the commonjs version
I know: "don't mix internal and external modules" but I must mix it :(
I change big project where all modles are internal.
I have two files
MyFirstModule.ts
module Modules.Components {
export class Best {
start() {
// ...
}
}
}
export = Modules.Components.Best;
and file app.ts
Internal module
module App.Utils {
export class Greeter {
var a: Modules.Components.Best
run(){
lazyLoadingModule1=>(){
a: new Modules.Components.Best
}
}
}
}
In app.ts i have a error "Cannot find namespace Modules".
I have this sample class sync.js as a module somewhere on my project.
'use strict';
export default class Sync{
constructor(dbConnection){
this.dbConnection = dbConnection;
}
test(){
return "This is a test " + this.dbConnection;
}
}
Then somewhere on my controller I am using this class as :
'use strict';
import Sync from '../../path/to/module'; // <-- works fine
const sync = new Sync('CONNECTION!'); // <-- meh
console.log(sync.test());
I was expecting something like this to be logged on the console This is a test CONNECTION!. But instead I am getting this error. TypeError: object is not a constructor
What did I do wrong?
By the way if I removed the line const sync = new Sync('CONNECTION!'); and changed console.log() to console.log(Sync.test()); the output This is a test undefined is printed which is kind of what I expected. But what's wrong with my instatiation?
WTF?
Edit
Guys I think I found the problem, based on #JLRishe and rem035 pointed out, it was returning the instance of the class not the class itself. In fact there is an index.js that imports the './sync' js file and exporting is as export default new Sync();. Here's the whole index.js.
'use strict';
import Sync from './sync';
export default new Sync(); // <-- potential prodigal code
The module tree looks like this.
module
|
|_ lib
| |_ index.js // this is the index.js I am talking about
| |_ sync.js
|
|_ index.js // the entry point, contains just `module.exports = require('./lib');`
Now. How do I export export default new Sync(); without doing new?
EDIT 2
How do I export export default new Sync(); without doing new?
Just remove the new keyword from module/lib/index.js:
import Sync from './sync';
export default Sync;
Or directly import from module/lib/sync.js
EDIT 1
Based on the what you are saying is logged,
Sync { dbConnection: undefined }
it seems like your import is returning an instance of the class (which is an object), rather than the class definition itself.
So console.log(new Sync()) would return what you are saying,
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
console.log(new Sync());
not console.log(Sync)
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
console.log(Sync);
Are you sure you aren't calling new Sync anywhere prior to exporting?
Initial answer
The code in question works fine:
'use strict';
class Sync {
constructor(dbConnection) {
this.dbConnection = dbConnection;
}
test() {
return "This is a test " + this.dbConnection;
}
}
const sync = new Sync('CONNECTION!');
console.log(sync.test());
Based on your error:
TypeError: object is not a constructor
Your import is not returning what you think it's returning and you are trying to new something that cannot be instantiated.
Most likely your import path is wrong.
Since this is the top result on google:
If you are using require() statements in Node to import classes and introduce a circular dependency, you will suddenly see this error popping up because require() is returning {} instead of the class.