I am trying to get the Amazon Cognito Identity SDK working in Aurelia. I do not have a lot of Javascript experience and am very unfamiliar with the various dependency systems.
I installed the Cognito SDK using: npm install --save amazon-cognito-identity-js
I then edited my aurelia_project/aurelia.json file as suggested in the Aurelia documentation to include a new client library dependency in build.bundles vendor-bundle dependencies:
"sjcl",
"jsbn",
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk/",
"main": "dist/aws-sdk"
},
{
"name": "amazon-cognito-identity-js",
"path": "../node_modules/amazon-cognito-identity-js/dist",
"main": "amazon-cognito-identity.min"
}
However, when I try to run the code using au run I get the error: Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/xmlbuilder.js'
I have tried to include xmlbuilder in my aurelia.json to no avail. When it is included I end up getting this error about lodash: Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/lodash/object/assign.js'
I haven't found any way to get past the lodash error.
Is there anyone out there familiar with the Aurelia dependency system that could help?
Thanks,
Nathan
EDIT #2: While I got past the xmlbuilder/lodash errors, I have run into further errors trying to bundle the aws-sdk. Here is my current aurelia.json:
"dependencies": [
{
"name": "xmlbuilder",
"path": "../node_modules/xmlbuilder/lib",
"main": "index"
},
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk",
"main": "index",
"resources": ["lib/region_config.json"]
},
And the error I am currently getting:
Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/src/crypto.js'
If I remove the resources (lib/region_config.json) then I get this error instead:
Error: ENOENT: no such file or directory, open '/Users/nathanskone/Projects/scc/aurelia-app/node_modules/aws-sdk/lib/region_config.json.js'
I think crypto is actually an object defined in aws-sdk/lib/util.js, which is required by aws-sdk/lib/region_config.js.
Try the compiled library instead, using the compiled lib bundled just fine.
Also the library seems to define window.AWS, so injecting it or not will work
{
"name": "aws-sdk",
"path": "../node_modules/aws-sdk/dist",
"main": "aws-sdk.min",
"exports": "AWS"
}
UPDATE:
It seems the only way to import those libraries is by using the prepend section, the libraries write to the window variable so it can still be accesible to your app scripts, only by not importing them like ES6 modules.
"prepend": [
"node_modules/aws-sdk/dist/aws-sdk.min.js",
"node_modules/amazon-cognito-identity-js/dist/aws-cognito-sdk.min.js",
"node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js",
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/require.js"
],
Related
I´m trying to use my angular library for an external project.
I would like this project can use directly fonts from my library.
I noticed the folder projects/my-library/src/lib/styles/fonts is not included when I build my library.
I tried to follow answers of this similar question without success.
I tried this :
ng-package.json
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/my-library",
"assets": [
"./src/lib/styles/fonts/**"
],
"lib": {
"entryFile": "src/public-api.ts",
"styleIncludePaths": ["node_modules", "src/lib/styles"]
}
}
In this case, I have a directory src/... created in dist/my-library and I got this error:
An unhandled exception occurred: EEXIST: file already exists, mkdir 'path/to/dist/my-library/src/lib/styles/fonts'
or
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/my-library",
"lib": {
"entryFile": "src/public-api.ts",
"styleIncludePaths": ["node_modules", "src/lib/styles"],
"cssUrl": "inline"
}
}
I got this error :
WARNING: postcss-url: ... Can't read file 'path/to/font.eot'
Someone knows the way to properly include fonts or others assets for library build like inside dist/my-library/lib/styles/fonts ?
I am trying to create a custom cra-template file for my team to use, but keep hitting an issue where I receive the following error when running npx create-react-app test-app --template my-custom-template.
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module 'cra-template-my-custom-template'
Require stack:
- C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js
- C:\Users\user\Desktop\cra-test-app\test-app\[eval]
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.resolve (internal/modules/cjs/helpers.js:80:19)
at module.exports (C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js:110:13)
at [eval]:3:14
at Script.runInThisContext (vm.js:116:20)
at Object.runInThisContext (vm.js:306:38)
at Object.<anonymous> ([eval]-wrapper:9:26)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at evalScript (internal/process/execution.js:80:25)
at internal/main/eval_string.js:23:3 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\node_modules\\react-scripts\\scripts\\init.js',
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\[eval]'
]
}
The template itself is fairly simple at the moment and I think the issue here may be that our team uses a private feed for some internal packages (which are dependencies in the template). This private feed is set to use npm as an upstream feed.
I have tried testing the template locally with the --template file:../path/to/template method and publishing the template to our internal feed. I can install the package using npm install, so the package is definitely being found in the registry.
I have also tried refreshing the npm cache and uninstalling create-react-app per some other recommendations.
Do I have to publish the template to the public npm registry for this to work? Or am I missing something else?
My template's package.json file is as follows:
{
"name": "cra-template-my-custom-template",
"version": "1.0.5",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
and the template.json is as follows:
{
"package": {
"dependencies": {
"#<custom-feed-scope>/<custom-feed-library>": "^5.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.34",
"#types/react": "^16.9.32",
"#types/react-dom": "^16.9.6",
"<custom-feed-library>": "^3.2.1",
"<custom-feed-library>": "^0.2.4",
"typescript": "^3.7.5"
}
}
}
I am currently using npm instead of yarn, but I was able to create an app using the typescript template just fine.
After some research into other cra-template packages, it seems the missing piece here was not having the main value defined in my template's package.json file.
After changing the package.json to what is below, it started working.
{
"name": "cra-template-my-custom-template",
"version": "1.0.8",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"main": "template.json",
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
hi i am building video streaming app through telerik platform. My app structure looks like :
my-project
app
- package.json
- app.js
node_modules
package.json
server.js
I have added firebase and bitmovin player plugin to my node_modules. Now the Telerik platform documentation says : to add require references to package.json file.
I do not get which package.json file needs to be opened . There are two files. The first one in the Project root which looks like:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The other package.json file is in the app folder looks like :
{
"name": "tns-template-blank",
"main": "app.js",
"version": "2.5.0",
"author": "Telerik <support#telerik.com>",
"description": "Nativescript blank project template",
"license": "Apache-2.0",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"url": "https://github.com/NativeScript/NativeScript/commit/30aca890749e9e3fb9bd0f5ddc9de5b6995859bc"
}
}
and the app.js file looks like :
var application = require('application'),
mainModule = 'navigation/navigation';
application.start({
moduleName: mainModule
});
I do not get in which package.json file needs to be configured and where to enter the require reference for the module (like bitmovin player & firebase ) as mentioned in the telerik platform documentation which is shown in the picture above step no. 8.
please guide.
The first package.json (i.e. root package.json) is where any plugins go. If using the CLI, you can do tns plugin add nativescript-dom and it would then modify the package for you to be:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2",
"nativescript-dom": "2.0.0"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The dependencies section is what needs to be changed; it needs the plugin name and the version you will be using. It that your package.json file is already correct for what you installed. You can also use http://plugins.nativescript.rocks for a list of plugins and their current versions.
A couple notes; based on you saying you needed bitmovin-player and firebase but using NativeScript; this won't work. The firebase and bitmovin-player you have referenced are not NativeScript plugins, so they won't work. To my knowledge bitmovin does not have NativeScript version (but my NativeScript-ExoPlayer plugin might be a good replacement) and then the NativeScript-Firebase I believe is the plugin you want for Firebase support in NativeScript.
I also see that you are using tns-core-modules 2.5.x; this means you want to get plugins that are 2.x compatible; the 3.x plugins will NOT work with TNS 2.x (and a large number of 2.x plugins won't work in 3.x).
When using a plugin (for example using my nativescript-dom) you do a var dom = require('nativescript-dom'); (or you can use const dom = ... as NativeScript can use ES6 grammer). You do not have to point to the actual js file inside the plugin. If the plugin is built correctly; it will automatically use the correct js file inside the plugin.
Finally in NativeScript the DevDependancies are for anything that is not being put into the application. In this case the android-snapshot plugin runs some build code during the build phase of the application.
I'm trying to include aurelia-tabbed in my aurelia project (of which I think I have the latest version, but I can't find a version number anywhere). I have a problem however, because I'm using a bundle of my app and vendor js, and I don't know how to include the package.
I've tried adding this in my aurelia.json in build > bundles > (vendor) > dependencies:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": ["assets/tabs.css"]
},
However, while this compiles, I cannot run the webpage. It gives me errors in the console (even before I add any of the tabbed tags):
DEBUG [aurelia] Configured plugin aurelia-tabbed.
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-headers.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tabs-wrapper.js
vendor-bundle.js:5700 GET http://localhost:9001/analysis/test-page/node_modules/aurelia-tabbed/dist/amd/tab-content.js
vendor-bundle.js:1395 Unhandled rejection Error: Script error for "aurelia-tabbed/tab-headers"
http://requirejs.org/docs/errors.html#scripterror
at makeError (http://localhost:9001/scripts/vendor-bundle.js:3907:17)
at HTMLScriptElement.onScriptError (http://localhost:9001/scripts/vendor-bundle.js:5477:36)
The three calls all result in 404's (which is normal, because the node_modules path is located at the root).
However: why are the three calls even made? Aren't the files supposed to be bundled?
In your aurelia.json file, you need to list all resources of the plugin. Try the following:
{
"name": "aurelia-tabbed",
"path": "../node_modules/aurelia-tabbed/dist/amd",
"main": "index",
"resources": [
"tab-content.html",
"tab-headers.html",
"tabs-wrapper.html",
"assets/tabs.css"
]
},
The FileAPI library (https://github.com/mailru/FileAPI/issues/202) does not officially support CommonJS modules. I've tried using browserify-shim but I'm not able to make it work. After requireing fileapi I just get an empty object back. I've created a repo for reproduction here https://github.com/Prinzhorn/browserify-fileapi
Relevant package.json part
{
"dependencies": {
"fileapi": "2.0.15"
},
"devDependencies": {
"browserify": "11.1.0",
"browserify-shim": "3.8.10"
},
"browser": {
"fileapi": "./node_modules/fileapi/dist/FileAPI.html5.js"
},
"browserify-shim": {
"fileapi": "FileAPI"
}
}
If you want to try it locally:
git clone git#github.com:Prinzhorn/browserify-fileapi.git
npm install
npm run build
chromium-browser index.html
Check out the console in Chromium, you'll see an empty array from running console.log(Object.keys(require('fileapi'))). Note that there is a global window.FileAPI with the correct API.
Does anyone know if browserify-shim is able to shim FileAPI? Because I believe it does some exotic things to manage it's dependencies (the concatenated files expect certain globals).
You'll need to tell browserify to use browserify-shim as a transform in the package.json as outlined in this example
Mainly you're missing:
"browserify": {
"transform": [ "browserify-shim" ]
}