Ember-cli how to add FileSaverjs and Blobjs - javascript

I looked at this and that link. I bower installed file-saver and Blob. I am having a similar problem with both components so I will just talk about one.
When I do import FileSaver from 'file-saver';
I get the following error.
Error while processing route: some.route Could not find module `file-saver` imported from `client/pods/some/folder/controller` Error: Could not find module `file-saver` imported from `client/pods/some/folder/controller`
I know the I have file-save because it is in my bower_components folder.
And right about the line that is giving me trouble is the following line.
import Ember from 'ember';
that package is about the file-saver package in my bower_components folder. And the app seems to find that package.

Bower assets have to be imported in Brocfile.js, see http://www.ember-cli.com/#managing-dependencies
In my project, filesaver is located at bower_components/FileSaver.js/FileSaver.js, so I have the following line in my Brocfile.js:
app.import('bower_components/FileSaver.js/FileSaver.js');
This makes it available as a global on window.saveAs, no need to use an import statement in the file you use it in.

Related

React: Trying to import a javascript file from node_modules from a package I have installed but cannot be recognised

I am trying to import a file from react-validation but I am met with the following warning which isn't allowing the import:
Could not find a declaration file for module
'react-validation/build/form'
This file does exist in my node_modules folder since I installed the package via npm i react-validation and I clearly see the folder is there.
I tried import in different ways, for example: import Form from 'react-validation/build/form but still not working.

How to integrate javascript libraries into react?

I have two javascript libraries that I need to integrate into my React app. First I tried this:
import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"
That produced error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I went to http://teckanjs.org/techan.min.js, copied the code, ran it through a beautifier, and saved it to techan.js, located in the same folder as CandlestickChart.jsx. I changed import to
import techan from "./techan.js"
Then I got similar error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I did the same thing as with the other one and changed the import to:
import d3 from "./d3.v4.js"
Then I got error:
./src/components/CandlestickChart/d3.v4.js Module not found: Can't
resolve './requirejs' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I found requirejs online and did the same thing as the others and added an import to d3.v4.js like this:
import requirejs from "./requirejs";
But still getting the same error. What's the trick to this?
Install it as a local package. Run the following:
npm install d3
Then you'll be able to import it in your JavaScript:
import * as d3 from "d3";
Note the "d3", not the "./d3" - the lack of the ./ indicates that you want to install from a module package, not from a file in the same directory.

Error: Could not find declaration file for module VueJS application

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks
The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.

NodeJS require/import module from higher level directory

I am using node v9.2.0. Want to load module located in higher level directory.
Here is minimal example: https://github.com/skkap/es6importtest
Suppose I have following dir structure:
/common/
index.mjs
/app/
app.mjs
/node_modules/
package.json
index.mjs contains some logic and also imports some npm module, like graphql.
import graphql from 'graphql'
...
export default graphql
I want to import common/index.mjs module from app.js.
import common from '../common/'
And get the following error:
Error: Cannot find module graphql
Any ideas where the problem is?
I checked, it also works the same wat with require(): https://github.com/skkap/es6importtest/tree/master/requireTest
P.S. Please do not recommend using npm packages or webpack for that, this question is about the particular problem described above.

Getting npm packages to work with babel (babel-loader)

I'm really new to webpack, babel, React and all this stuff. So I'm probably missing something really obvious. To get a jumpstart on my React project I'm using react-redux-bootstrap-webpack-starter. It all works well, but now my lack of understanding really shows with my latest problem.
The problem:
I'm trying to import jwtDecode from 'jwt-decode' and it throws the following error:
./src/app/redux/modules/login.js
Module not found: Error: Can't resolve 'jwt-decode/build/jwt-decode' in
'/usr/src/app/src/app/redux/modules'
# ./src/app/redux/modules/login.js 12:17-55
# ./src/app/redux/modules/reducers.js
# ./src/app/redux/store/configureStore.dev.js
# ./src/app/redux/store/configureStore.js
# ./src/app/Root.js
# ./src/app/index.js
# multi react-hot-loader/patch webpack-hot-middleware/client
./src/app/index.js
What have I done:
I've Docker-ized the frontend app, so I just added the jwt-decode package to package.json and rebuilt the image. The Docker build executes npm install.
I've tried to import jwtDecode from 'jwt-decode' then I tried import jwtDecode from 'jwt-decode/build/jwt-decode
I made sure I can reference other npm packages similarly installed. On a new docker instance I installed lodash, imported it in the same file and there was no problem.
My hypotheses:
There's something about the particular jwt-decode package that makes it not work well with babel.
To make it work I need either to modify the jwt-decode package or to configure webpack and the babel-loader differently. How?
Babel doesnt transpile anything for JWT-decode and I dont think webpack has any extra configuration for it either.
It looks like the places that you are trying to use jwt-decode, like: './src/app/redux/modules/login.js ', in your app cannot find the directory and so are failing. Make sure that whatever module loader you're using is referencing the correct path to the jwt-decode directory.
Try loading it like this ( if you are using ES2015 via Babel transpilation):
import jwt_decode from "jwt_decode";

Categories