We Keep Coding

My .ts file is not compiling to a .js file

I have a very simple app. Here is the file structure:
-myapp
-node_modules
-src
-app.ts
-package-lock.json
-package.json
-tsconfig.json
my tsconfig.json file:
{
"compilerOptions": {
"target": "ES6"
},
"include": ["src/**/*"]
}
my package.json file (note, the typescript compiler is installed as a dev dependency, not globally):
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.9.4"
}
}
my app.ts file:
let x:string
FYI- I'm using Sublime text as my text editor. And I'm doing the following in the bash shell on a MAC:
I'm trying to compile all of the .ts files in the src directory into .js files. However, in my bash shell when I cd to the root directory of myapp and run tsc I get: -bash: tsc: command not found

To run locally installed modules, you have to use npm scripts
Add this to scripts in package.json:
// any name you want
"compile": "tsc"
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"compile": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^4.9.4"
}
}
You can also use npx tsc, but it will not use the version installed

npm publish only publish index.js and excluding everything else

Problems
I'm trying to publish my own SDK in npm. When I'm trying to install my packages, my dist folder only shows index.js
Code:
Here is my package.json file. It already includes main and files, https://docs.npmjs.com/cli/v8/using-npm/scripts.
{
"version": "0.1.4",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"prepublish": "tsdx build",
"size": "size-limit",
"analyze": "size-limit --why"
},
"peerDependencies": {
"react": ">=16"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"name": "#grammable/sdk",
"author": "peanut butter jelly",
"homepage": "https://github.com/grammable/grammable-sdk",
"repository": "https://github.com/grammable/grammable-sdk",
"publishConfig": {
"access": "public"
},
"module": "dist/grammable.esm.js",
"size-limit": [
{
"path": "dist/grammable.cjs.production.min.js",
"limit": "10 KB"
},
{
"path": "dist/grammable.esm.js",
"limit": "10 KB"
}
],
}
I removed my devDependencies and dependencies to remove unnecessary lines. Can someone help me?
This is my folder structure.
folder
Update: I have tried using npx npm-packlist. It has everything I need, but when I npm publish it, it only builds index.js
Edit 2:
npm notice 📦 #grammable/sdk#0.1.4
npm notice === Tarball Contents ===
npm notice 35.1kB LICENSE
npm notice 237B README.md
npm notice 184B dist/index.js
npm notice 1.6kB package.json
npm notice === Tarball Details ===

tl;dr: When a .npmignore file is not specified, npm will use your .gitignore file setting, where dist and the files in it are likely to get ignored.
Your dist/index.js isn't ignored by this rule because you specified it in the main field of your package.json.
And there is this particular part in npm doc about the files field in package.json also explains more clearly why this behavior happens.
Some special files and directories are also included or excluded regardless of whether they exist in the files array.
According to this answer the issue can be solved when you specify your own .npmignore file.

Error [ERR_REQUIRE_ESM]: Must use import to load ES module

I am super new to javascript, and a file app.js I am trying to run with npm looks like this:
import {placeOnWallComponent, wallFromFloorComponent} from './wall-from-floor'
AFRAME.registerComponent('place-on-wall', placeOnWallComponent)
AFRAME.registerComponent('wall-from-floor', wallFromFloorComponent)
And when I change the file type to app.mjs instead of app.js, I get another error:
"Must use import to load ES Module."
I also have this as my package.json
{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "app.js",
"#std/esm": "cjs",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.mjs"
},
"author": "",
"license": "ISC"
}
How do I fix this error?
UPDATE: It's still happening even after I changed the files to .mjs. If I try having start be just 'app.mjs' instead of 'node app.js', I get:
'this file does not have an app associated with it'

Add
"type": "module"
in your package.json
change file extensions ".js" to ".mjs" and try again the command
node --experimental-modules app.mjs

This is wrong "#std/esm": "cjs",
#std/esm is depecated. Remove this and run npm install esm on the commandline to install the esm package instead.
Adjust your load script to "start": "node -r esm app.mjs" to load esm when your app runs.

mocha tests with ES6 style imports

I'm trying to run a Mocha test with some ES6 style imports in the file but I keep getting the error:
import assert from 'assert';
^^^^^^
SyntaxError: Unexpected identifier
I tried to invoke mocha with both
mocha --require #babel/register --recursive
and
mocha --require babel-register --recursive
but the error would not go away.
What is the correct way to run ES6 style Mocha tests?

For anyone coming from Google:
You can also install esm: npm i esm --save-dev or use your preferred package manager.
Then pass it as an argument to mocha: mocha 'index.test.js' --require esm

Try Below Code
import { strict as assert } from 'assert';
Or
import * as assert from 'assert';
Hope this helps

I found the answer to my question here -> https://dev.to/bnorbertjs/my-nodejs-setup-mocha--chai-babel7-es6-43ei
This package.json file
{
"name": "mochatest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha --require #babel/register --recursive"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.5.4",
"#babel/register": "^7.4.4",
"mocha": "^6.1.4"
},
"dependencies": {}
}
together with this .babelrc
{
"presets": ["#babel/preset-env"]
}
solved my problem.

The Lodash Install In Webpack Guides page

When I look this page they use npm install --save lodash to install lodash. But when I look this page, the package.json looks like this:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
===> "devDependencies": { <===
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5" <- ???
}
}
Am I miss something?

No need to get confused. It's pretty simple.
use below command if you need to lodash in the production
npm install lodash --save
use below command if you don't need to lodash in the production
npm install lodash --save-dev
Once you are done. lodash's functions will be available globally. If you get any error like _ is not defined. Then you can import lodash like this
import _ from 'lodash'; OR let _ = require('lodash')