Angular 7 project can't import node-vibrant - javascript

I'm trying to import node-vibrant into my Angular 7 project, and am running into some issues:
-I can import it using import * as Vibrant from 'node-vibrant';, but I get the following warning in VS Code:
Module '"/Users/xxxx/Documents/dev/x/node_modules/node-vibrant/lib/index"' resolves to a non-module entity and cannot be imported using this construct
The app live-reloads fine in development, but when I try to build it, the error above becomes fatal and it won't build.
-I can import it using import * as Vibrant from 'node-vibrant';, but I get the following warning (once again, it live-reloads fine in dev):
Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
This error also becomes fatal when building.
I'm left being unable to build because there isn't any way I can import this file. Is there a decent workaround for this?


Requiring vibrant within a method or function appears to work for me on Angular 7.
const vibrant = require('node-vibrant');
However, now this issue arises: https://github.com/akfish/node-vibrant/issues/85

Related

When using require is unable to get the definition however using import gets the linked definition

var exec = require('child_process') // exec type is any
import ch from 'child_process'; // ch type is child process
Why i am getting this difference in typescript project
Which one should prefer to use in the project

import is a TypeScript feature and TypeScript knows how it works and how to read types from modules that are loaded with it.
require is a CommonJS feature and none of the above applies.

import _ from 'lodash-es/lodash.js' used to work. Now it doesn't but I didn't change anything

I made a small test project to make sure I know how to use lodash in a browser environment:
/* File in directory: /ESModule/App.js */
// error message
import _ from 'lodash-es/lodash.js';
// relative path works
// import _ from '../node_modules/lodash-es/lodash.js';
const first = [1];
const second = [2];
const combined = _.union(first, second);
document.querySelector(`p`).textContent = combined;
It worked fine at the time, but now that I'm revisiting it a month later, I get this error: "Uncaught TypeError: Error resolving module specifier: lodash-es/union". I didn't touch the project at all since then, and the only change to my environment is that I updated NodeJS.
Not sure if this helps, but I have lodash-es in my package.json dependencies (installed locally), and I'm on Windows 10. I also have Webpack installed so I could test minifying the project in a separate directory, but it bothers me that I don't know why writing my import paths a certain way suddenly stopped working. I recently noticed that I'm having the same problem on other projects that are more complex, and I'd rather not have to use relative paths like this going forward:
import someModule from '../../../../node_modules/package-name/file.js';
When this should work fine
import someModule from 'package-name/file.js';
Any ideas on what could be causing this issue?
EDIT:
I just realized that I also tested Lodash with individual imports
import union from 'lodash-es/union';
const first = [1];
const second = [2];
const combined = union(first, second);
document.querySelector(`p`).textContent = combined;
Somehow even this worked in the past, even without ending the path with .js. These ways all give me the same type of error:
import _ from 'lodash-es';
import _ from 'lodash-es/lodash';
import _ from 'lodash-es/lodash.js';
import union from 'lodash-es/union';
import union from 'lodash-es/union.js';
import {union} from 'lodash-es';
Uncaught TypeError: Error resolving module specifier: [specified path here]
import _ from '/node_modules/lodash-es/lodash.js';
import union from '../node_modules/lodash-es/union.js';
import union from '/node_modules/lodash-es/union.js';
Only a relative path or specific absolute path works now, so at least I know I probably have it installed correctly. As I mentioned above, all of the code used to work, but without changing it or adding to or removing from node_modules, now it doesn't.
One thing I forgot to mention was that I'm using the Live Server extension, and usually it defaults to port 5500 when I start it up, but lately it's been having trouble finding available ports and uses numbers like 5522 and 5909. Lately I've also been having problems downloading various files types for example I tried downloading a new NodeJS install file and I got this error:
C:/Users/DANIEL~1/AppData/Local/Temp/D1JF2y30.msi.part could not be saved, because the source file could not be read.
Maybe there's a problem with my machine that's causing a problem with my browsers and LS?
EDIT: I tried using lodash with NodeJS instead of testing in a browser with Live Server, and it works fine using just the package path const union = require('lodash/union');
EDIT: I just noticed that if I try to minify with Webpack, I can use the package path without any problem, and I don't need to end with .js. Maybe I wasn't clear before, but I was having issues with package paths without using Webpack. Was it weird that using import _ from 'lodash-es/lodash.js'; without Webpack even worked in the first place?

Since you're importing the whole library you can just do:
import _ from 'lodash-es';
The slash notation is only needed when specifying a specific function to import. (This way is recommended since importing _ brings in hundreds of functions.)
import union 'lodash-es/union';
The best way is to only install one method and import that.
npm install --save lodash.union
import union from 'lodash-es.union';
See this thread for more details.

Import whole lodash as _:
TypeScript/Angular:
import * as _ from 'lodash-es';
...
const combined = _.union(first, second);
ES:
import _ from 'lodash-es';
Import method:
import {union} from 'lodash-es';
...
const combined = union(first, second);

How do I make a library "importable" in ES6?

I think this is a general question about how to make a library usable with ES6's import:
I want to use DimpleJS (a JS library for charts) in my React app.
I ran npm install --save dimple-js
I added import * from 'dimple-js' to my React component
At this point I get a Syntax Error: Unexpected token (2:9) which is the space after my import *.
Why do I get this error? How should I correctly import this into my project?

import poly fill in TypeScript

Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.

Why can't I import sprintf-js in TypeScript

I have a TypeScript file into which I'm importing third-party libraries.
import * as _ from 'lodash'; // Works great!
import * as moment from 'moment'; // Works great!
import {vsprintf} from 'sprintf-js'; // Compiler error
As my comments explain, the first two imports work great, but the sprintf-js import does not. I get the following compiler error:
Error TS2307: Cannot find module 'sprintf-js'.
Without a doubt, I have sprintf-js inside of my node_modules folder. I'm not very knowledgeable about node modules. I'm guessing that the sprintf-js libarary does something different than lodash or moment and that TypeScript doesn't like it. How can I make this work?

You will need to add a typing definition for sprintf-js. Depending on your setup - if you have TSD installed and setup with your project, it would be a case of running:
tsd query sprintf-js --action save
otherwise, you can have a read here:
http://definitelytyped.org/
or simply download the typing definition and include it in the project root folder:
https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/sprintf-js/sprintf-js.d.ts

Categories

Resources