Importing tcomb lib in Angular 2 / webpack app gives undefined - javascript

Importing tcomb gives undefined:
import t from 'tcomb';
console.log(t); // undefined
// So this won't work
t.assert(t.Number.is(colorString), 'colorString is invalid argument');
However I got it working like this, which actually I like more:
import {assert, Number} from 'tcomb';
assert(Number.is(colorString), 'colorString is invalid argument');
Importing all as t returns just the assert() method not the full object
import * as t from 'tcomb';
I'm using a pretty standard setup with webpack-dev-server, angular 2, typescript and HMR. All libs so far load ok. The project is already a few months old.
Any idea on what is happening here? Why t is undefined?
Note: I'm using runtime check even if I have TS types all over the place because some services methods could still receive the wrong arguments at runtime. As a sidenote, tcomb seems fine to me, but just to learn, is there a better option than tcomb?

Have you tried var t = require('tcomb')?
Perhaps something to do with the es6 import statement which is not working?

Related

Migration from lodash 3 to lodash 4: what replaces the 'lodash/string/template'?

We try to migrate one Backbone.js project from lodash "3.10.1" to latest lodash "4.17.21" and seems like 'lodash/string/template' was removed in version 4.
In our code we have something like:
import template from 'lodash/string/template';
export default _.extend(window.app, {
...
template: (path, options) => template(someCustomMethod(path), options),
...
And with lodash 4 installed the bundler crashes with:
Error: Can't walk dependency graph: Cannot find module 'lodash/string/template'...
In case I import it this way:
import { template } from 'lodash';
Then compilation passes but when you try to load the app then an error occurs:
...Uncaught TypeError: Cannot set properties of undefined (setting '_url_prefix')
It comes from inside "Backbone.View" and seems related to lodash template.
Have someone stumbled upon such an issue? The Backbone.js version is 1.1.2, but I think it's not related - if I return back to lodash "3.10.1" then all works perfectly. Maybe the new lodash template version returns differently structured results?
It sounds like you want
import template from 'lodash/template';
and for the _url_prefix error it's impossible to say more without the full stack trace.

Property 'mask' does not exist on type 'JQuery<HTMLElement>

I recently was trying to use the jquery mask in my angular project, so i installed in my project with: npm i jquery-mask-plugin, so in my TS file i wrote:
ngOnInit() {
$('.date').mask('11/11/1111');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
}
Just as it is on the main site, but instead of $(document).ready(function(e)) i preferred to use the ngOnInit() , but when i save, the console hit me with the error:
"Property 'mask' does not exist on type 'Jquery'"
What am i doing wrong? I have to import on the appModule? I have to declare it in the angular.json? I have to import in the component file that i'm going to use? What should i do??
Obs: If there's any other mask for angular that you think it's better, please tell me :)
Well, the 'official' mask library for Angular 2+ is https://www.npmjs.com/package/ngx-mask. I have used it on several occasions and it works quite well. You should import it in appModule and if you have lazy loaded modules that are also using the mask in them as well.

How to make Webpack recognize dynamic exports

I'm seeing the following warning when building with Webpack v4 (using babel-loader for the JS files):
Warning in ./src/components/Foo
"export 'ADDENDUM' was not found in '../../types'
...
The import in ./src/components/Foo is:
import { ADDENDUM } from '../../types';
../../types:
import { each } from 'lodash';
export const typesDict = {
ADDENDUM: 'addendum',
};
each(typesDict, (type, typeConstant) => {
exports[typeConstant] = type;
});
This isn't causing a build error, just a warning. The warning is wrong though, since I am exporting ADDENDUM (though dynamically), and everything works as it should.
Is there a way for Webpack to handle these dynamic imports, or to at least turn off the warning? I'm upgrading from Webpack v1 right now, and v1 does not have this problem (or if it does, it's being hidden somehow).
Also please note: I do NOT want to silence all Webpack warnings, such as via the devServer config. I just want to silence this one type of warning.
Based on your ../../types file i assume your approach was to skip writing again the components in the exports object.
Instead of silencing the warning, try something simpler to fix the issue. Since you don't want to write twice the same names, take a look at my example.
No lodash is required, no loops are used and exported constants are written once.
../../types:
export const ADDENDUM = 'addendum';
export const ADDENDUM2 = 'addendum2';
export const ADDENDUM3 = 'addendum3';
That is all, no more dynamic imports, no more warnings.
UPDATE:
Your code is indeed valid, but when you use dynamic exports/imports, compilers/bundlers loose trace of your exports(in your case) since they don't check the contents of your exports object, thus the warning you receive, because the compiler(babel) didn't find exports.ADDENDUM in your code, only you know that it's there, therefore the compiler thinks you're using an unexisting component.
As of imports, it's the same story, the same type of warning was emitted by webpack when something like require('/path/to/' + someVar + '/some.file.js'), because webpack wanted to make a chunk out of it, but that wasn't a full path for webpack and it couldn't find the file because it was a concatenated string (dynamic import). (i don't know if this changed over the years, but i'm sure you understand/knew this perfectly well too)

react-localize-redux cannot read property 'map' of undefined

I'm trying to load translations from a JSON file with react-localize-redux and I keep getting this error. This is all fairly new to me so I apologise if it is something obvious. As fair as I can tell from reading documentation this "should" work?
The error message I am receiving:
translate.js
import { combineReducers, createStore } from 'redux'
import { localizeReducer, initialize, addTranslationForLanguage, getTranslate } from 'react-localize-redux'
import translationsEn from '../../../nls/en.json'
const localeStore = createStore(combineReducers({
locale: localizeReducer
}))
const languages = ['en']
localeStore.dispatch(initialize(languages))
localeStore.dispatch(addTranslationForLanguage(translationsEn, 'en'))
export default getTranslate(localeStore.getState().locale)
and in my component:
import translate from '../state/translate/translate'
...
<span className='node-output-schema__title'>{translate('outputSchema.title')}</span>
Any ideas to what might be going wrong?
it seems like you mixed some different frameworks inside here.
The localisation package is called - react-localize-redux.
But inside your error logs I can see that you are using some angular.
Also I just checked the documentation from the react-localize-redux package and it seems like you are working with an outdated version.
For me it should be enough to just provide a Provider to your app and afterwards use the higher order component (import { withLocalize } from "react-localize-redux";
)
Also I would recommend to use this package, which is a lot easier to handle (and indeed I used it for a project myselft)
react-18next (https://github.com/i18next/react-i18next)
this error rases because your property is undefined, so check your error and get the exact line(you can find the error on the console tab of your browser) and check which property used there and check where you filled that property if you didn't fill your property then set it

TypeScript Compiler: #types/d3-tip - Cannot invoke an expression whose type lacks a call signature

I am trying to understand this error, read all the questions with similar error message but couldn't find anything helping.
I am quite new to TypeScript, but getting there. I am trying to include the d3-tip module working with d3. I installed #types/d3 and #types/d3-tip. Now my code looks like this
import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';
console.log(d3Tip) // => print the function signature from d3-tip module
console.log(d3Tip())
// => results in error 'Cannot invoke an expression whose type lacks a call signature'
d3.tip = d3Tip
// => results in error 'Property 'tip' does not exist on type 'typeof "<my-project-path>/node_modules/#types/d3/index"''
I think I have two problems: first, I cannot call the d3-tip method, I don't really understand why if someone can explain that to me that'll be great.
Second, I cannot attach the d3Tip function as a new property of the d3 object (this is what I used to do with ES6, it worked great), then creating a tip with d3.tip().
I know I can find other solutions, like designing the tip myself (it may have taken less time ^^), but I'd rather understand how to solve this.
Any ideas?
Good question. Initially I install with npm install #types/d3-tip. Then I need to copy ./node_modules/#types/d3-tip/index.d.ts to ./d3-tip.d.ts. Now the following code works:
import * as d3 from "d3";
import "./d3-tip";
d3.tip().hide();
let arc = d3.arc();
So the declarations in d3-tip.d.ts are merged into the d3 namespace as desired. Why it does not work without copying I have no clue. Any help?

Categories