I'm trying to load the 3rd party library PapaParse into my Aurelia application, but can't seem to make it work as a dependency. I've tried every form listed in the Aurelia docs. Instead, I need to add it to my aurelia.json's bundles.<vendor-bundle>.prepend section.
I first npm install papaparse --save then
aurelia.json
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/papaparse/papaparse.js", // Has to go before require.js
"node_modules/requirejs/require.js"
],
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
//"papaparse" here does not work,
...
],
...
}
But this way creates a global Papa variable. I would much rather it be a dependency that I can import.
Any ideas on why it's not working as a standard dependency and what I can do to make it work?
Put this in your aurelia.json
{
"name": "papaparse",
"path": "../node_modules/papaparse/",
"main": "papaparse"
}
and import in your class:
import PapaParse from 'papaparse';
constructor() {
//papaparse is ready
console.log(PapaParse);
}
Related
I git cloned the following package into my existing project and have followed the instructions for setup: https://github.com/ensdomains/reverse-records
Now how do I access this package in my react native js files, so I can use the ReverseRecords function?
You mean, that you want to use a local directory that contains the reverse-records package ?
If so in the package.json just add the relative path, from npm docs :
{
"name": "baz",
"dependencies": {
"#ensdomains/reverse-records": "file:../foo/reverse-records"
}
}
Or shorter but it's not in npm docs you can get rid of 'file:' :
{
"name": "baz",
"dependencies": {
"#ensdomains/reverse-records": "../foo/reverse-records"
}
}
I have created a new aurelia project via au new and have no issues referencing typescript files in the src folder. For example in main.ts this works:
main.ts
import { Util } from './util'; //in aurelia-app\src
new Util();
util.ts
export class Util{ }
When I move util.ts up one level, this breaks the au CLI:
import { Util } from '../util'; //in aurelia-app\
Error:
Tracing main... ------- File not found or not accessible ------
| Location: D:/temp/aurelia-test1/aurelia-app/util.js
| Requested by:> D:/temp/aurelia-test1/aurelia-app/src/main.js
| Is this a package?
Make sure that it is configured in aurelia.json and that it is not a
Node.js package
Can someone tell me why the CLI doesn't like this and possibly how to fix it ?
There is a clue insofar as the log states its looking for util.js however this doesnt explain why it does work when util.ts is in the src folder because i do not see util.js in this folder either.
update
As per #Jesse answer below you can modify aurelia.json to fix the problem as stated above - however this fails if you want to go another directory higher. For example
import { Util } from '../../util';
That is because your aurelia.json is configured to transpile all .ts files in the src-folder:
"transpiler": {
"id": "typescript",
"displayName": "TypeScript",
"fileExtension": ".ts",
"dtsSource": [
"./custom_typings/**/*.d.ts"
],
"source": "src/**/*.ts" <--- right here
},
Therefore it won't transpile your typescript file in the root. You can change the transpiler settings in the aurelia.json to overcome this, but I'd recommend keeping your typescript in the src-folder.
I'd like to know how to correctly bundle handsontable community edition library into Aurelia application. Handsontable is distributed as single JS file packed as webpack module, thus a hint may be useful for webpack modules generally.
Having Aurelia version 0.24.0 configured with default loader: RequireJS and default transpiler: Babel, NPM version 3.10.0. I did following steps in order to bundle handsontable into my application:
npm install handsontable
then edited aurelia-project/aurelia.json to add the following
dependencies:{ ...
{
"name": "handsontable",
"path": "../node_modules/handsontable",
"main": "dist/handsontable.full",
"resources": [
"dist/handsontable.full.css"
]
},
Then the component looks like: (view - htable.html):
<template>
<div ref="filetable"></div>
</template>
(viewmodel - htable.js in ES6):
import {Handsontable} from "handsontable";
export class htable {
...
attached() {
this.ht = new Handsontable (this.filetable, {
data: this.data,
rowHeaders: true,
colHeaders: true
});
}
}
However, any attempt to add such component fails with
Unhandled rejection TypeError: _handsontable is undefined
Another attemp I use in different library produce similar error:
import * as Handsontable from "handsontable";
...
this.ht = new Handsontable.Handsontable (this.filetable, {
Btw. A workaround is not to bundle and add handsontable into index.html which makes "Handsontable" global.
I am using ExtJS 6.2
I have the following line in my app.json:
"requires": [
"font-awesome",
"ux"
],
I am trying to create a simple text view using LiveSearchGrid.js, so I have the following in my app_name=md_registry folder md_registry/app/view/main/ListTest.js:
Ext.define('md_registry.view.main.ListTest', {
extend: 'Ext.ux.LiveSearchGridPanel',
//xtype: 'row-expander-grid',
//store: 'Patients',
xtype: 'mainlisttest',
requires: [
'md_registry.store.Patients',
'Ext.ux.LiveSearchGridPanel'
],
When I try doing a sencha app build, I get the following compiler error:
Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file md_registry.view.main.ListTest
I have verified that this file exists in the path:
md_registry/ext/packages/ux/classic/src
From everything I've read, specifying the above requires in my app.json should be sufficient, but it's obviously not.
You are right now creating a universal app, but not using the correct folders for your code. You should definitely look into either creating a classic-only app, or a universal app with correct folder structure. If you want to make a universal app, but not now, you can compile only classic.
The solution was completely unobvious:
Had to comment this out from the "builds" profile in app.json:
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
"generated": {
"var": "modern/sass/save.scss",
"src": "modern/sass/save"
}
}
}
I hope this helps someone!
I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).