Angular 7 : tributejs_1.default is not a constructor

[jujupec]

No description provided.

[jujupec]

i'm making an Angular 7 project and i use tributejs.

i put this in my TS file:

var tribute: Tribute<{ key: string; value: string }> = new Tribute({
				values: [
					{ key: "Phil", value: "pheartman" },
					{ key: "Gordon", value: "gramsey" },
					{ key: "Jacob", value: "jacob" },
					{ key: "Ethan", value: "ethan" },
					{ key: "Emma", value: "emma" },
					{ key: "Isabella", value: "isabella" }
				],
				selectTemplate: function(item: any) {
					return '<span class="fr-deletable fr-tribute">' + item.original.key + "</a></span>";
				}
			});

and i have this error

ERROR TypeError: tributejs_1.default is not a constructor

[DanielRuf]

Hi @jujupec,

how do you import it in your project (the require statement)?

[dessalines]

Typescript is currently broken not just for angular, but for all typescript.

[DanielRuf]

Hi @dessalines,

Typescript is currently broken not just for angular, but for all typescript.

I doubt that.
Can you explain that in detail?

[DanielRuf]

In general the code is not specific to Angular.

What you to do is to check how you import Tribute.

See https://github.com/zurb/tribute/blob/master/src/index.js#L6

[dessalines]

Just doing:

import Tribute from 'tributejs'; new Tribute({.... fails in typescript, with the above error.

Doing import * as tribute from 'tributejs' passes with typescript errors, but fails with uglyfying and such later on bc of a no constructor error.

[DanielRuf]

I think it makes no difference if it is normal ES6 or TypeScript.

Generally it should work. The typings file should be also correct.

Can you share some sort of codepen so we can reproduce it?

[gunak50]

Issue also reproducing in stackblitz sample. Please give the solution
https://stackblitz.com/edit/typescript-dn2v2z

[gunak50]

import * as tribute from 'tributejs' this also getting error

https://stackblitz.com/edit/typescript-zefjpw?file=index.ts

[DanielRuf]

Issue also reproducing in stackblitz sample. Please give the solution

Sorry but I see a different error there, Import error, can't find file:

This may be because of line 7 at https://unpkg.com/browse/tributejs@3.7.2/dist/index.js but there is no Tribute.js, only tribute.js.

[DanielRuf]

Try import Tribute from "tributejs/src/Tribute.js"; for the ES6 build. The dist build is the ES5 version with a bug (file naming).

https://stackblitz.com/edit/typescript-in1apr?file=index.ts

[DanielRuf]

You can see the problem here. There are build files with uppercase letters and build files which reference the ones with the uppercase characters.

https://github.com/zurb/tribute/tree/master/dist

The Tribute.js file is missing there but this is also a name conflict - some filesystems are case insensitive so they only allow one file (which is tribute.js).

This is a general problem with the build setup (and yarn run run makes not much sense).

[DanielRuf]

Also related: #312

[gunak50]

I couldn't not reproduce the above issue in any stackblitz or codepen samples TypeError: tributejs_1.default is not a constructor

When I am trying to run locally the error has been occured.I have shared the code snippets of this issue.

default.html
<div id="caaanDo">I'm Mr. Meeseeks, look at me!</div>

default.ts

  import Tribute from "tributejs";
  var tribute = new Tribute({
  values: [
    {key: 'Phil Heartman', value: 'pheartman'},
    {key: 'Gordon Ramsey', value: 'gramsey'}
  ]


})
tribute.attach(document.getElementById('caaanDo'));

When I compiling the above ts file the following javascript file has generated with .default extension

 (function(module, exports, __webpack_require__) {

        var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
        !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__( /*! tributejs */ "./node_modules/tributejs/dist/tribute.js")], __WEBPACK_AMD_DEFINE_RESULT__ = (function(require, exports, Tribute) {
                "use strict";
                Object.defineProperty(exports, "__esModule", { value: true });
                var tribute = new Tribute.default({
                    values: [
                        { key: 'Phil Heartman', value: 'pheartman' },
                        { key: 'Gordon Ramsey', value: 'gramsey' }
                    ]
                });
                tribute.attach(document.getElementById('AtRTE'));
            }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
            __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

Finally throws a console error

[DanielRuf]

Please try the recommended solution using the src folder and the other examples.

[dessalines]

@DanielRuf thanks! That does seem to work for ES6, even though I still get "could not find declaration file" warnings for the typings.

[mrsweaters]

@DanielRuf Did your PR help with this issue? I just released 3.7.3 if you have some time to test it.

[DanielRuf]

Generally the dist files are the transpiled modules - which is ES5.

For ES6 you need the src files. Default is dist.

The initial issue was not reproduced by the reporter. At least StackBlitz shows another issue. In your case might have referenced old files from there.

[DanielRuf]

I think we should add the cases from this issue as additional unit tests.

[gunak50]

@DanielRuf Still I couldn't resolve this issue
My tsconfig file is

{ "compilerOptions": { "target": "es5", "module": "amd", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "suppressImplicitAnyIndexErrors": true, "moduleResolution": "node", "lib": ["es5","es2015.promise","dom", "es6"], "types": ["crossroads","hasher","chai","jasmine","jasmine-ajax","requirejs"] }, "exclude": [ "node_modules" ], "compileOnSave": false }
When I use below lines

`import Tribute from "tributejs";

var tribute = new Tribute({
values: [
{key: 'Phil Heartman', value: 'pheartman'},
{key: 'Gordon Ramsey', value: 'gramsey'}
]
})
tribute.attach(document.getElementById('AtRTE'));`

tribute.default is not a constructor error is throwed(Above mentioned issue)

When I use src the below mentioned issue occured.

My nodeModule tribute folder structure like below

Can you clarify how to solve this error ?

[DanielRuf]

`import Tribute from "tributejs";

Don't use this. Use import Tribute from "tributejs/src/Tribute.js";

You may have the 3.7.3. Try 3.7.2:
https://unpkg.com/browse/tributejs@3.7.2/

[DanielRuf]

@gunak50 can you check what the right import statement for 3.7.3 is? It should work by default.

[DanielRuf]

Here it says it can not find utils.js:
https://stackblitz.com/edit/typescript-kkbmxk?file=index.ts

[DanielRuf]

@mrsweaters isn't the src folder needed for the ES6 version? Because browserify is for the browser, not NodeJS.

browserify/browserify#1186

[DanielRuf]

For the browser it works with the browserify bundle: