We Keep Coding

import js file in js file for webdev

I have a js file called project specific js.js and in that file I want to import another js file for general js called logic.js in the js folder
import 'js/logic.js';
in devtools when I run the html that imports project specific js i get
Uncaught SyntaxError: Cannot use import statement outside a module

issue fixed it turns out because I wasn't running a localhost for some reason you cant import other js files except modules like react. now I am running localhost and in the script tag importing projectSpecificJs.js i have type set to module so :<script type="module" src="projectSpeceficJs.js></script>"

Just for further information:
import 'file.js'
Is only for nodejs / module html attribute
Also here's some quick info related to the topic:
The whole concept behind using the “import” statement instead of “require” in Node.js is to shift from the CommonJS module system to the ECMAScript Module System. Reference

Why I can not import directly from node_modules using SystemJS?

While there is a lot of questions and documentation on SystemJS, I still don't understand the import syntax.
Specifically, why can typescript not find ng-boostrap.js using this code:
import { createPlatform } from '../../node_modules/#ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap',
which is directly importing the file, but this code works:
import {createPlatform } from './node_modules/#angular/core/bundles/core.umd.js';
where my map in systemjs.config.js contains the line:
'#angular/core': 'npm:#angular/core/bundles/core.umd.js'.
Why I can not import directly from node_modules using systemJS?

Note: Though the solution below works, some of the information is incorrect. Please see discussion below in comments.
First of all, TypeScript doesn't know anything about JS files. It knows how to produce them, but doesn't know how to compile against them. So I am not sure how you actually got
import {createPlatform } from './node_modules/#angular/core/bundles/core.umd.js';
to compile in your TypeScript code.
We are able to do
import {createPlatform } from '#angular/core';
in TypeScript, because TypeScript is already looking in the node_modules. And #angular/core, if you look inside your node_module, has the directory #angular/core, with an index.d.ts file. This is the file that our TypeScript code compiles against, not the JS file. The JS file (the one in the above first code snippet) is only used at runtime. TypeScript should know nothing about that file.
Using the second snippet above, when the TypeScript is compiled to JS, it looks like
var createPlatform = require('#angular/core').createPlatform;
As runtime, SystemJS see's this, then looks at the map configuration, and maps the #angular/core to the absolute file location, and is able to load that file
'#angular/core': 'npm:#angular/core/bundles/core.umd.js'
This is the pattern that you should follow with the ng-bootstrap. Use the import that points to the TypeScript definition file, so that it can compile
import { ... } from '#ng-bootstrap/ng-bootstrap';
If you look in the node_modules/#ng-bootstrap/ng-bootstrap directory, you should see the index.d.ts file. This is what TypeScript will use to compile against. When it is compiled to JS, it is compiled the following
var something = require('#ng-bootstrap/ng-bootstrap').something;
And in the SystemJS config, we need to map #ng-bootstrap/ng-bootstrap to the absolute path of the module file, otherwise SystemJS won't know how to resolve it.
'#ng-bootstrap/ng-bootstrap': 'npm:#ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
One of the key take-aways from this, is to understand the difference between compile-time and runtime. Compile type is TypeScript, which doesn't know anything about JS files, as those are runtime files. SystemJS is the one that needs to know about the runtime (JS) files.

Understanding type definition files in Node JS and TypeScript

I'm trying to understand how TypeScript projects resolve the import of modules installed via npm and their type definition files.
As far as I know (and following the TypeScript documentation), there are two ways TypeScript uses for module resolution :
With a relative path : It will check then on the current directory if the module files exist (myModule.js, myModule.tsx and myModule.d.ts) or in a directory named myModule (containing index.js, index.tsx and index.d.ts)
With a non-relative path : It will check the import following NodeJS behavior by checking in the node_modules folder in the same way it did for the references with relative path, and jumping a directory if not found
So it seems pretty easy to understand. What I don't understand, is how it resolves the type definition files when imported using npm install #types/myModule. I need to understand this in order to structure correctly my project, and also understand why sometimes my modules / type definitions are not found.
I don't understand how it knows that "the folder in node_modules/#types/myModule contains the type definition for myModule : Where is stored the information that it must check in that folder ?
Bonus : What is the best way to import and manage type definition files ? Is it better to install the #types package for the related module, or to download the file.d.ts and place it in the module folder in node_modules?
Any help and / or references are greatly appreciated.

JSPM bundle with relative imports

I'm working on converting an existing app to using JSPM. I really appreciate using paths relative to the baseUrl so I don't have to do this ../../../../vendor/... nonsense but I did like being able to import from ./siblingModule to import from something in the same part of the hierarchy. When trying to use jspm bundle that does currently use relative imports I get
Error: ENOENT: no such file or directory, open '<project path + baseUrl>\siblingModule.js'
at Error (native)
Is there a way to configure JSPM to use relative paths for module resolution alongside baseUrl resolution?
Ideally -
module/submodule checks for any valid paths entries and then checks baseUrl/module/submodule
./module/submodule checks in currentPath/module/submodule
/module/submodule checks in baseUrl/module/submodule
As far as I can tell this isn't ambiguous, though please correct me if I'm wrong.
p.s. using jspm 0.16.45

The baseUrl is used to resolve paths.
You can configure mapping and paths in config.json, to import from these paths.
But nothing prevents you to use these kind of import:
import module from './otherModule/file.js';
If you have a problem using import, it is probably something wrong in your configuration.
See documentation: https://github.com/systemjs/systemjs/blob/master/docs/getting-started.md

Error: Cannot find module 'dbconstant'

I have created a custom module whose functionality i want to export in other js modules, but while requiring the module i am getting the following error:
Error: Cannot find module 'dbconstant'
In file login.js i am doing following:
var dbConst = require('dbconstant');
which leads to error described above.
But when import the module using following code, it works fine:
var dbConst = require('/home/gaurav/mygitRepo/officemgmt/api/dbconstant');
login.js reside # /home/gaurav/mygitRepo/officemgmt/api
I seriously doubt that giving absolute path is way to do this, if not, how can i import module.
Please put a comment if dbconstant code is also needed for analyzing the issue, i will add that too if required.

You can only import modules like that if they reside in node_modules, which is where scripts installed with npm sit, otherwise you have to use a relative or absolute path.
The following should work though, as long as either dbconstant is a folder with the main export residing inside an index.js file or the javascript file is called dbconstant or dbconstant.js.
var dbConst = require('./dbconstant');