Angular 2 "require is not defined" - javascript

I am working on an app, which previously worked. I am now trying to add some routing, so have created an app.component file and changed a few parameters, but now I just get a blank screen and this error in the console...
Error: ReferenceError: require is not defined
at eval (http://localhost:3000/client/dev/main.js:2:17)
at eval (http://localhost:3000/client/dev/main.js:6:3)
at $ (http://localhost:3000/node_modules/systemjs/dist/system-polyfills.js:4:8740)
Evaluating http://localhost:3000/client/dev/main.js
Error loading http://localhost:3000/client/dev/main.js
My Main.JS file is:
"use strict";
var browser_1 = require('angular2/platform/browser');
var app_component_1 = require('./app.component');
browser_1.bootstrap(app_component_1.AppComponent);
This is Generated from main.ts:
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
Whats's wrong with this?
Update:
Thanks Eric for your suggestion about using the system module in tsconfig.json, but if I do it, I get the following error:
C:\Users\George\Source\Repos\Gen-App\server\server.js:2
System.register(['express', 'os', 'http', './config/routes.conf', './config/db.conf', './config/passport', './routes/index'], function(exports_1, context_1) {
^
ReferenceError: System is not defined
at Object.<anonymous> (C:\Users\George\Source\Repos\Gen-App\server\server.js:2:1)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (C:\Users\George\Source\Repos\Gen-App\index.js:1:63)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
NB: my server.js code is here

You say you added some routing and now it's not working. Your index.html file needs to include the router.dev.js file:
<script src="node_modules/angular2/bundles/router.dev.js"></script>

Related

Typescript module-alias import errors

I'm currently learning how to create API with typescript using module-alias. When it comes to import some of them works fine, but some causes errors depite of fact that they are written in the same way.
Example: (this works fine)
import PostModel from './post.model';
import Post from '#/resources/post/post.interface';
Example (this causes error)
import PostModel from '#/resources/post/post.model';
import Post from '#/resources/post/post.interface';
Error:
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module '#/resources/post/post.model'
Require stack:
- C:\code\js\actual\expess-type\dist\resources\post\post.service.js
- C:\code\js\actual\expess-type\dist\resources\post\post.controller.js
- C:\code\js\actual\expess-type\dist\index.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._resolveFilename (C:\code\js\actual\expess-type\node_modules\module-alias\index.js:49:29)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\code\js\actual\expess-type\dist\resources\post\post.service.js:15:38)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\code\\js\\actual\\expess-type\\dist\\resources\\post\\post.service.js',
'C:\\code\\js\\actual\\expess-type\\dist\\resources\\post\\post.controller.js',
'C:\\code\\js\\actual\\expess-type\\dist\\index.js'
]
}
My file structure
package.json
"_moduleAliases": {
"#/resources:": "dist/resources",
"#/utils": "dist/utils",
"#/middleware": "dist/middleware"
}
tsconfig.json
"paths": {
"#/resources/*": ["resources/*"],
"#/utils/*": ["utils/*"],
"#/middleware/*": ["middleware/*"]
}

Error Deploying VueJs App (Laravel) - ReferenceError: window is not defined

I have this problem at the time of deploying Vue with Laravel.
I have node js 12 and laravel 6 installed, everything is correct but when I start the application I get that error:
/var/www/vhosts/domain.com/cl.domain.com/resources/js/app.js:3
global.window = window;ยด
ReferenceError: window is not defined
at Object.<anonymous> (/var/www/vhosts/domain.com/cl.domain.com/resources/js/app.js:3:17)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
at Module.require (/usr/share/passenger/helper-scripts/node-loader.js:80:25)
at require (internal/modules/cjs/helpers.js:16:16)
at loadApplication (/usr/share/passenger/helper-scripts/node-loader.js:243:2)
at setupEnvironment (/usr/share/passenger/helper-scripts/node-loader.js:214:2)
My code:
require('./bootstrap');
window.Vue = require('vue');
require('vue-flash-message');
require('vue-flash-message/dist/vue-flash-message.min.css');
Vue.use(VueFlashMessage);

'Blob is not defined' error in async-array-buffer. How to fix it?

I'm getting error when trying start SSR and import { AudioContext } from standardized-audio-context
/workspace/node_modules/async-array-buffer/build/es5/bundle.js:10
var blob = new Blob([worker], {
^
ReferenceError: Blob is not defined
at /workspace/node_modules/async-array-buffer/build/es5/bundle.js:10:13
at /workspace/node_modules/async-array-buffer/build/es5/bundle.js:2:65
at Object.<anonymous> (/workspace/node_modules/async-array-buffer/build/es5/bundle.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Module._compile (/workspace/node_modules/pirates/lib/index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Object.newLoader [as .js] (/workspace/node_modules/pirates/lib/index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
error Command failed with exit code 1.
How to possible to fix and where i need start to dig?
First of all, install the below package
-> npm install blob-polyfill
After that go to server.ts file, make an import and add blob to global.
-> import { Blob } from 'blob-polyfill'
-> global['Blob'] = Blob
I guess now you are all set to go.

Syntax error: Unexpected token { on executing a TS app

I have the following code in TypeScript:
import { Document, Schema, Model, model } from "mongoose";
import { IUser } from "../interfaces/IUser";
export interface IUserModel extends IUser, Document {
}
var UserSchema: Schema = new Schema({
name: String,
username: String,
password: String,
email: String
});
export const User: Model<IUserModel> = model<IUserModel>("User", UserSchema);
Then I use it in a controller. When I compile my TS app (tsc app.ts) it compiles fine. Then when I type "node app.js" in the terminal I get this error:
..\BlocG\models\user.ts:1
(function (exports, require, module, __filename, __dirname) { import { Document, Schema, Model, model } from "mongoose";
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (E:\Business\Cevian\CevianPrep\BlocG\data\db.ts:26:1)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
What makes it even stranger is that I have such imports in the controller:
import { Router, Request, Response } from 'express';
import { IUserModel } from '../models';
...and it compiles with no problem. I used to execute the logic without any problems.
Please note that the error is not pointed at the import keyword but rather the curly bracket.
Please help me with this issue! Thanks in advance!
Then when I type "node app.js" in the terminal I get this error:
Change your tsconfig module option to be something that will work both in node (natively) and browser (using e.g. webpack):
"module": "commonjs"
As it turns out, the basic problem was that I was compiling like this:
tsc app
Instead of just writing
tsc
This caused my compilation types to mix with the js ones in the same folder.
Also, I had imports directly from [name].ts files, where I should've used file names only.

Node and Require import error in Mocha?

I have a working Node application and I'm trying to add Mocha tests, but getting some odd import errors.
This is my file structure:
package.json
index.js
src/
chart.js
highcharts-options.js
test/
test_chart.js
This is what my chart.js file looks like:
var chartOptions = require('./highcharts-options');
var analyseChart = {
doSomething: function() { ... }
};
module.exports = analyseChart;
And this is what highcharts-options.js looks like:
var HighCharts = require('highcharts-browserify');
Highcharts.theme = { ... };
Currently I import everything from /src into a single index.js file, then bundle it with browserify, which works just fine, no errors in the application.
Now I want to start writing Mocha tests for the functions in /src.
This is my first stub in test_chart.js:
var chart = require('../src/chart');
chart.doSomething();
But when I run mocha, I get the following error:
Users/.../js/src/highcharts-options.js:11
Highcharts.theme = {
^
ReferenceError: Highcharts is not defined
at Object.<anonymous> (/Users/.../js/src/highcharts-options.js:11:1)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/.../js/src/chart.js:7:20)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/.../js/test/test_chart.js:1:75)
How can I fix this import error for Mocha?
var HighCharts = require('highcharts-browserify');
Highcharts.theme = { ... };
You have a spelling error.
High[cC]harts
How did you not notice this yourself even when you were told exactly what was wrong?
Some errors are so common that we ultimately stop trusting them, and start looking for other faults in our code without even investigating it.
This is especially true for the "someVar is undefined" error in javascript.
Takeaway:
Sometimes you just got to trust your error messages.

Categories