Develop Reference

Why does vercel not import libraries?

I tried to create a site in Vercel for my project (link), but for some reason it returned the following error:
Error: Runtime exited with error: exit status 1 Runtime.ExitError
ERROR Cannot find module 'dotenv' Require stack: -/var/task/index.js
ERROR Did you forget to add it to "dependencies" in package.json?
I tried to delete the first line of code from index.js, which requires the dotenv library, since I don't really need it in vercel, but it gives an error when importing express, so I want to know how to solve this problem.
Below is the code of package.json and vercel.json (for some reason I believe the error is in one of these files)
Package.json:
{
"name": "url_saver",
"version": "1.0.0",
"description": "A FCC project",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "~4.18.1",
"mongoose": "~6.6.2",
"dotenv": "~16.0.3",
"dns": "~0.2.2",
"url": "~0.11.0",
"open": "~8.4.0"
},
"keywords": [
"node",
"express",
"freecodecamp",
"mongoose"
],
"license": "MIT",
"author": "Samuel Schlemper"
}
Vercel.json:
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Link to full repository on github: https://github.com/Samuel-Schlemper-Schlemuel/Save_URL

Data path "" should NOT have additional properties(scripts) when adding external js to a non-application project

Already updated my node and angular. When doing ng build I get error:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(scripts).
generated project via:
ng n my-proj **-create-application=false**
angular.json :
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-proj-lib": {
"projectType": "library",
"root": "projects/my-proj-lib",
"sourceRoot": "projects/my-proj-lib/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/my-proj-lib/tsconfig.lib.json",
"scripts": [
"other-libs/jqBootstrapValidation.js"
],
"project": "projects/my-proj-lib/ng-package.json"
}
},
"test": {
...
},
"lint": {
...
}
}
}},
"defaultProject": "my-proj-lib"
}

remove code from angular builds

I'm wondering how I could increase productivity in angular2+ development.
At the moment, I have for instance, a registration form.
This registration form model is populated with real data during development, and removed by hand just before building.
Isn't there a way to tell the 'compiler' hey if you compile in prod mode, just ignore this! some sort of preprocessor code like this pseudocode:
let rdata = {id:null, pass:null}
##ignoreprod_start
rdata.id = 2766;
rdata.pass = "#(F-§44$A_NG%%p";
##ignoreprod_end

I worked in Angular 4 and 5, there we have angular-cli.json and this file has apps.environments property, where you can specify to compiler accordingly. attaching my file just for reference, this is just a pointer not a complete answer, you need to see for yourself what you can do, however ask me for any clarification, this files environment.prod.ts and environment.ts are defined in environment folder, it will depend on which version of angular you are using
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "dncockpit"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss",
"../node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/datatables.net/js/jquery.dataTables.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}

How to call external Javascript function which is in separate file under assets folder in Angular component?

//Way 1 - Not working
import { LoadCarouselAndPopup } from '../../../assets/js/main.js';
LoadCarouselAndPopup();
//Way 2 - Not working
declare var System: any;
System.import('../../../assets/js/main.js')
.then(xJS => {
xJS.LoadCarouselAndPopup();
});
}
I have tried above two ways.
In first way, I cant compile the code because it throwing error like "error TS5055: Cannot write file 'main.js' because it would overwrite input file". In this case i have added "allowJs: true" also.
In way 2, I got error like "cannot read property 'call' of undefined"..
Help me to solve this. Thanks in advance.

As I have seen you folder structure in images I believe that you are using angular-cli for this, so you can include your external scripts by including the path of that scripts in .angular-cli.json file in scripts array
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "dummy-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": ['assets/filename.js],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}

As far as I see you are using angular cli. You have load your script in the cliconfig.
Here is the wiki how you can accomplish: https://github.com/angular/angular-cli/wiki/stories-global-scripts

Uncaught TypeError: Polymer.Base.create is not a function

I have created a web-component with different dependencies, among them is iron-icon component powered by Polymer.
However, when I deploy my component I see the next message in the console:
"Uncaught TypeError: Polymer.Base.create is not a function" in the iron-icon.html file, line 142.
To install the dependencies of the proyect I have used the next bower.json:
{
"name": "facebook-wall",
"version": "1.0.0",
"keywords": [
"polymer",
"web-components",
"facebook",
"wall",
"facebook-wall"
],
"main": "facebook-wall.html",
"dependencies": {
"iron-ajax": "PolymerElements/iron-ajax",
"paper-header-panel": "PolymerElements/paper-header-panel",
"paper-styles": "PolymerElements/paper-styles",
"iron-icon": "PolymerElements/iron-icon",
"iron-icons": "PolymerElements/iron-icons",
"paper-icon-button": "PolymerElements/paper-icon-button",
"paper-material": "PolymerElements/paper-material",
"paper-button": "PolymerElements/paper-button",
"web-component-tester": "Polymer/web-component-tester#~4.2.1",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#~1.0.12"
},
"devDependencies": {
"polymer-test-tools": "Polymer/polymer-test-tools#master",
"mocha": "~1.14.0",
"sinon": "http://sinonjs.org/releases/sinon-1.10.2.js"
},
"resolutions": {
"mocha": "^2.3.0"
},
"authors": [
"Miguel Ortega Moreno <miguel.ortega.moreno5#gmail.com>"
],
"description": "Polymer component which show a facebook wall",
"moduleType": [],
"license": "MIT",
"homepage": "https://github.com/Mortega5/facebook-wall",
"ignore": [
"node_modules",
"bower_components",
"test",
"tests",
"*.*~"
]
}
Do you know what is wrong with it?