I downloaded the ChartJS package on Symfony, and I would like to be able to use it with webpack-encore
In my Twig template, I can use Chart with :
new Chart(document.getElementById("myChart"), { ..... }
It works with CDN, but now I would like to use it with webpack-encore.
So in my app.js I tried :
//1er essai
import Chart from "chart.js";
global.Chart = Chart
//2eme essai
const Chart = require("chart.js");
global.Chart = Chart;
But neither works. Each time in the browser I get the following error :
Uncaught ReferenceError: Chart is not defined
Can someone help me please ?
When using webpack encore I find it easier to install different modules via npm.
In the documentation it says that bower and npm are recommended.
So you basically write this
npm install chart.js --save
And for usage you simply import it.
If you use Yarn (recommended by Webpack Encore), just type :
yarn add chart.js
Then in your js file :
import Chart from 'chart.js';
new Chart($("#myElement"), {
...
});
Related
Now I am making an app in react native.
A Few days ago, I needed to use Modal in my app so I have installed "react-native-modalbox".(https://github.com/maxs15/react-native-modalbox)
But after that, I got Warning like the image below.
I couldn't get this mean and a way to solve this.
I see this warning as simply a warning that does not affect the code.
This would be simply a Metro warning.
But if you want to get rid of this,
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings(["Require cycle:", "Remote debugger"]);
I hope you to refer to this.
OR
I Referenced this link
Add a scripts folder in your project
Create a stfu.js file with the following content
const fs = require('fs');
const codeToObscure = /console.warn\([\s\S].*"Require cycle: "/;
const problemFilePath = './node_modules/metro/src/lib/polyfills/require.js';
const problemFileContent = fs.readFileSync(problemFilePath,'utf8');
fs.writeFileSync(problemFilePath,problemFileContent.replace(codeToObscure,'const noConsoleWarn = (""'),'utf8');
Add the following line to your package.json in your scripts : "postinstall": "node ./scripts/stfu.js",
When it's done, just rm -rf node_modules && yarn to reinstall everything, and make sure these damn warnings are now gone.
I hope these methods work for you.
I tried following Meteor's guide on how to install npm packages for createjs, however I end up with the following error message:
Error: Cannot find module 'createjs'
Here's what I ran in a fresh project:
meteor npm install --save createjs
meteor npm install
The package shows up as dependency in my local package.json:
"dependencies": {
"#babel/runtime": "^7.1.5",
"createjs": "^1.0.1",
"meteor-node-stubs": "^0.4.1"
},
I try using the package in my body.js as follows:
import createjs from 'createjs';
// tried with standard node require, too:
const createjs = require('createjs');
What am I missing?
Note: This is a workaround, may not be the solution to your problem.
Import the createjs library using the CDN by including it in your app's <head> tag as below:
<head>
.....
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
Then, you can use createjs in your js as below:
var stage = new createjs.Stage('myCanvas');
console.log(stage);
Since I could not get the package to work I ended up including all relevant files to client/lib, importing them using import './lib/easeljs.js'; inside my client's main.js.
I downloaded the harrison:papa-parse package : meteor add harrison:papa-parse.
But now i need to load it in my Meteor application so i can use it.
I imported the package in my Component :
import { Papa } from 'meteor/harrison:papa-parse';
and then i need to declare the module in typing.d.ts file
declare module 'meteor/harrison:papa-parse' {
// something here like export const Papa; ?
}
, but after that i'm lost ! and i have an error: cannot read property 'parse' of undefined
In My component :
Papa.parse("http://mywebsite/test.csv", {
download: true,
complete: function(results) {
console.log(results);
}
});
Maybe there's an easy way to import the package easly and i'm trying to complicate it ?
The meteor package exports the "Papa" variable on the server, which means you have to call it from a server process.
Delete this line from your code, because it won't do anything:
import { Papa } from 'meteor/harrison:papa-parse';
Meteor packages don't need to be imported, part of the package spec is an automatic import of whatever variables are needed.
According to the documentation this package should be available in the browser, but for some reason the meteor package author made the decision to only expose it in the server.
There is also an npm package available, which might be a better path for you to follow.
You don't need the harrison:papa-parse meteor package. You can install and use the papaparse NPM package directly. In the root of your meteor project run meteor npm install --save papaparse. Then, in your client script you can import with import Papa from 'papaparse';.
For a new project, I have run those in terminal
npm init
meteor add angular2-compilers
meteor remove blaze-html-templates
meteor npm install --save angular2-meteor
meteor npm install --save meteor-node-stubs
meteor npm install --save bootstrap4-webpack-package
meteor npm install --save ng2-bootstrap
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'bootstrap4-webpack-package';
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'app',
template: `<alert type="info">ng2-bootstrap hello world!</alert>`,
directives: [Alert]
})
class App { }
bootstrap(App);
Right now bootstrap4-webpack-package makes Bootstrap 4 works, but ng2-bootstrap still not works.
Since I am using Bootstrap 4, so I also tried to add
import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap/ng2-bootstrap';
Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;
But still not works.
It shows the error:
EXCEPTION: No Directive annotation found on Alert
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on Alert
I am not sure whether this is related with this issue.
How can I use ng2-bootstrap? Thanks
At last I found it is because of my NPM problem. Because the code can run well on other people's machine.
I uninstall my NPM, and install the new v5.10.1, the problem fixes!
Check here for details.
Hope this can help people who met similar weird problem.
I'm trying to install the Spooky module in meteor (this one is in my public folder: app/public/node_modules).
I've read answers in this post and added the following code in server/server.js
Meteor.startup ->
path = Npm.require 'path'
fs = Npm.require 'fs'
base = path.resolve '.'
isBundle = fs.existsSync base + '/bundle'
modulePath = base + (if isBundle then '/bundle/static' else '/public') + '/node_modules'
spooky = Npm.require modulePath + '/spooky'
But when I'm running meteor I get:
Error: Cannot find module '/Users/mac/Documents/websites/app/.meteor/local/build/programs/server/public/node_modules/spooky'
You need to create a smart package to use Npm modules in your app. Alternatively you can use meteor-npm.
You can't use Npm.require on its own for non standard npm modules like spooky.
If you use meteor-npm you can install it with meteorite: mrt add npm
Then use Meteor.require("spooky") instead, after you have added the module to your packages.json. You can have a look here for more details: http://meteorhacks.com/complete-npm-integration-for-meteor.html.
The official way to do it is to make your own smart package to wrap the npm module in. There is an example of such a package: https://github.com/avital/meteor-xml2js-npm-demo
The example uses xml2js as the npm module, but you could swap the names around so its spooky instead.
Then you can add this package into your /packages folder (say with the name spooky), and add it to your meteor project with meteor add spooky.
The packages on atmosphere.meteor.com have more examples of this, they pretty much do the same thing (e.g stripe (https://atmosphere.meteor.com/package/stripe)).
The article Akshat linked to has been updated:
cd project
meteor add meteorhacks:npm
Edit project/packages.json:
{
"redis": "0.8.2",
"github": "0.1.8"
}
Use those npm modules:
var Github = Meteor.npmRequire('github');
var github = new Github();
github.gists.getFromUser({user: 'arunoda'}, function(err, gists) {
console.log(gists);
});