Not able to import mgt elements from Node js application - node.js

I am trying to import from the #microsoft/mgt library in my Node js application and facing issues - can someone help. I am already using Babel for using the ES6 modules.
Am I missing something - I am new to Node :(
export * from '#microsoft/mgt-element';
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1053:16)
at Module._compile (internal/modules/cjs/loader.js:1101:27)
at Module._compile (C:\Users\dip\Python Projects\Classified_2021\Node_2021\Internet_Projects_2021\node-starter-kit-es6-master\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Object.newLoader [as .js] (\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (\src/index.js:2:1)
[nodemon] app crashed - waiting for file changes before starting...

You are importing from microsoft/mgt-element library so change the export to import
import * from '#microsoft/mgt-element';
besides why you are importing the whole library when you only need some parts of it?
if you only need Providers do this:
import {Providers,ProviderState} from '#microsoft/mgt-element';

Related

Mocha testing Typescript source file: unable to import node modules

I have setup mocha to test typescript source files. I have successfully run a test on one file that only imported source files, but I'm seeing a failure running a test that imports a node module.
I am running this on the command line to run the tests:
mocha -r ts-node/register -r jsdom-global/register spec/**/**.spec.ts
In the test that is failing, the source file that it is testing has this import
import * as angular from "angular";
And when the test is run, I see this error:
ReferenceError: angular is not defined
at Object.<anonymous> (/Users/bsacamano/testRepos/myApp/node_modules/angular/index.js:2:18)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/bsacamano/testRepos/myApp/web/common/default/unsecured/shared-modules/services/flexlabel/flex.service.ts:1:1)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Module.m._compile (/Users/bsacamano/testRepos/myApp/node_modules/ts-node/src/index.ts:1455:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Object.require.extensions.<computed> [as .ts] (/Users/bsacamano/testRepos/myApp/node_modules/ts-node/src/index.ts:1458:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/bsacamano/testRepos/myApp/spec/shared-modules/services/flexlabel/flex.service.spec.ts:1:1)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Module.m._compile (/Users/bsacamano/testRepos/myApp/node_modules/ts-node/src/index.ts:1455:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Object.require.extensions.<computed> [as .ts] (/Users/bsacamano/testRepos/myApp/node_modules/ts-node/src/index.ts:1458:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.exports.requireOrImport (/Users/bsacamano/testRepos/myApp/node_modules/mocha/lib/nodejs/esm-utils.js:49:16)
at async Object.exports.loadFilesAsync (/Users/bsacamano/testRepos/myApp/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
at async singleRun (/Users/bsacamano/testRepos/myApp/node_modules/mocha/lib/cli/run-helpers.js:125:3)
at async Object.exports.handler (/Users/bsacamano/testRepos/myApp/node_modules/mocha/lib/cli/run.js:370:5)
I have a different test for a source file that has these imports
import {IHttpService, IPromise, IRequestConfig} from 'angular';
and that test completes without error.
Also, the code works in production; I'm seeing that angular is defined and working.
Any ideas on what I can do to get the test to pass?
Update:
I think it has to do with the clown show that is bare imports. My web app is built with webpack, and webpack takes care of converting those imports when bundling.
Out of desperation, I tried building a bundle for my tests (which I really didn't want to do since I'm not distributing the file, but you know). I then ran mocha on the bundle, but I'm still getting the same error, angular is not defined, just with a different stack trace.
Update 2:
Even if I were to remove the "bare" import and replace with an import of the script relative to the file, it doesn't work. I don't get the ReferenceError, but the import just doesn't happen; if I console.log(angular); after importing it, I see that it is an empty object.

Electron: TypeError: Cannot create property 'default' on symbol 'Symbol(nodejs.util.inspect.custom)'

I've developed an electron app with following tech stack:
NodeJS (10.15) with Babel to allow ES6 import/export syntax.
Sequelize on SQLite and GraphQL to handle an internal database.
ReactJS (bundled) for views.
I've configured everything to work with Electron and running "electron" command in project root folder works without errors.
Now i'm trying to distribute it using this tutorial: https://electronjs.org/docs/tutorial/application-distribution
So i've simply downloaded the 4.1.4 binaries for windows and moved the project folder under resources/app/
But running the electron.exe i've the following error:
App threw an error during load
TypeError: Cannot create property 'default' on symbol 'Symbol(nodejs.util.inspect.custom)'
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\nodejsCustomInspectSymbol.js:18:84)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\nodejsCustomInspectSymbol.js:20:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Module._compile (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Object.newLoader [as .js] (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
at Function.Module._load (internal/modules/cjs/loader.js:551:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\defineToJSON.js:8:57)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\defineToJSON.js:36:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Module._compile (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Object.newLoader [as .js] (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
at Function.Module._load (internal/modules/cjs/loader.js:551:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (internal/modules/cjs/helpers.js:20:18)
i've also tried to run npx electron resources/app/ from binaries folder and i've got the same error.
So i think the issue is something about the paths.
i've also tried electron-packager and the error is the same because this tool does the same process of guide above.
What can i do to fix it?
UPDATE1: after some investigations i've found that babel causes the issues. I guess when you run a project from a parent folder. I'm trying to find a solution
i've solved using this kind of configuration for babel/register:
const rootPath=path.resolve(path.join(__dirname, "../../"));
require("#babel/register")({
root: rootPath,
extends: path.join(rootPath, '.babelrc'),
ignore: [/node_modules/],
only: [rootPath],
})

Error importing redux:

ERROR:
Error: Cannot find module 'redux'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object. (C:\dev\Django
code\portfolio_web\stats_frontend\node_modules\react-
redux\lib\connect\mapDispatchToProps.js:8:14)
at Module._compile (module.js:660:30)
at Module._extensions..js (module.js:671:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\dev\Django
code\portfolio_web\stats_frontend\node_modules\babel-
register\lib\node.js:152:7) at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
The file where I import react-redux is reduxStore.js:
import {createStore} from 'react-redux;
//There is nothing else. The function being imported doesn't change anything`
I'm running the file with babel-node, or with webpack-cli (which is using babel to transpile ES2015. In both cases I get the same error.
Tracing the error I can open the source (
...\stats_frontend\node_modules\react-redux\lib\connect\mapDispatchToProps.js of the error (its from official react-redux dist).
Line 8 (which causes the error) I can see a commonJS import:
var _redux = require('redux');
Upon further inspection I can see that the node search algorithm will not find 'redux' because no such file exists in ./node_modules/react-redux/ or in ./node_modules/
I have installed and updated my react-redux installation with node install --save-dev react-redux with no errors.
I was hoping someone can provide insight on why the error occurs and how to fix it
You are importing createStore from wrong library. import it from redux
import { createStore } from 'redux';

Universal Angular 4: getting SyntaxError while using ng2 nouislider

I am working on Universal Angular 4 project.
while adding "nouislider" in html file,i am getting the following error
import * as i0 from '#angular/core';
SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .ts] (/home/user/Desktop//node_modules/ts-node/src/index.ts:384:14)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
slider is working fine when i am working on angular 4 only i.e without server side rendering(SSR) but getting above error when doing SSR.
Please help me to get out of this.Thanks in Advance.

Import keyword is not recognized by gulp throwing SyntaxError: Unexpected reserved word

Failed to load external module babel-core/register
Failed to load external module babel/register
somelocation\gulpfile.babel.js:27
import fs from 'fs';
^^^^^^
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Liftoff.handleArguments (\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3)
at Liftoff.<anonymous> (\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:192:16)
at module.exports (\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\node_modules\flagged-respawn\index.js:17:3)
I am getting this error while trying to run gulp after npm as described here: deploy-appengine.md. How to fix it?
EDIT: as Luke Bennet points out correctly in a comment to this answer, it was indeed JavaScript - the ES6 "import" syntax. The issue is that this won't work out of the box in Node as yet.
You seem to be using the python module import syntax in NodeJS. You should use the NodeJS module require syntax.

Resources