How to use messageformat from npm - angularjs

I installed messageformat from npm for use in my angular-boostrap project in conjunction with angular-translate.
If I simply add messageformat v0.3.1 via CDN, everything works as expected. But I would like to use messageformat installed from npm. The trouble is, I have no idea how. None of the scripts in the messageformat npm package looks anything like the one on CDN. I am wondering if I need to build it or something? But then again, the documentation on npm for messageformat does not mention anything apart from "npm install...".
What am I missing?
[Edit]
There is both a bin and a lib folder in the project. Both contain messageformat.js, but none of them are working, and they look nothing like the one from CDN. If I include node_modules/messageformat/lib/messageformat.js I get a "module is not defined" error. If I include node_modules/messageformat/bin/messageformat.js I get "invalid or unexpected token" ... Therefore I suspect there is a step missing to get a script like the one from CDN

you need to add the files instead of cdn :
<script src="path/to/node_module/messageformat/messageformat.js"></script>

It turns out that version 0.3.1 of the npm package did not include a UMD version of the script, but since then version 1.0.0 is out, and a script ready for use in browsers now ships with the npm package.
https://github.com/messageformat/messageformat.js/issues/157

Related

React app is failing to compile, it appears typescript not being transpiled to JS?

I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save

react-scripts build won't transpile template literals, app doesn't work in IE

We need to support IE11 with our app.
When building it with react-scripts build the backticks in template literals won't be transpiled, which of course doesn't work for IE.
The error appears in the chunks/vendor js file - not sure if that changes anything.
Is there any way to add some config with webpack plugins in react-scripts? We're on 2.1.5.
Ejecting from npm isn't an option.
So we just found out that it indeed was an error in a npm module.
Now we made a PR for it.

setting up Backbone with yarn

I recently added various libraries with yarn like so:
yarn add jquery backbone underscore bootstrap
With bower there was a way to list out the paths that each of these libraries was in, how do I do this with yarn?
yarn list --paths only gives me the names of the libraries and the version number.
The problem is you are trying to utilize yarn the way bower used to work, but yarn list --paths will only give you the dependencies and version number as you noted.
I think what you need to understand is that you are not using bower_components, you are using node_modules. With that said, your paths are probably something like /node_modules/bootstrap/dist/css/bootstrap.css. Open your node_modules folder and you will see what I am talking about.

How to add and use npm package cryptocoins-icons in my AngularJS app

I am building a custom website built on top of template - https://github.com/akveo/blur-admin
I am new to npm. I wanted to use a npm package named cryptocoins-icons.
I went to my project folder root and ran the command npm i cryptocoins-icons.
The package is added in my project.json.
Now in one my html when I write - <td><i class="cc BTC"></i>{{item.name}}</td>
<i class="cc BTC"> part should have displayed bitcoin icon there.
I know I am definitely missing something, but I don't know what. Please help
I don't like my current solution but is working at least until I find something better.
After installing the dependency:
npm install cryptocurrency-icons
Then you can copy inside your assets folder:
cp node_modules/cryptocurrency-icons/svg/color/* src/assets/cryptoicons/
With this trick you can create an img like this:
<img src="/assets/cryptoicons/{{symbol}}.svg"/>
Where symbol is the crypto symbol (for example waves or xlm).
Not a very clean solution but... it works (ideally I would like to use the typical css icon-waves style).
Hope it helps!

Installing npm package from fork with yarn + webpack - Can't resolve './dist/

I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just work™.
Don't forget the package.json#files section. See the linked answer for more details.

Resources