babel-node doesn't transpile JSX in npm react script for Node version 14 - node.js

I'm having a big problem with running my npm script using babel-node. This script generates static error pages from react components. With Node versions 10 and 12 it is running successfully, but when I have updated my node version to 14 babel-node seems to stop transpiling JSX. Now I get this error:
<MuiThemeProvider theme={theme}>
^
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
at async link (internal/modules/esm/module_job.js:42:21)
My devDependencies in package.json file:
"devDependencies": {
"#babel/node": "^7.14.2",
"#babel/preset-env": "^7.14.2",
"babel-plugin-styled-components": "^1.12.0",
"prettier": "2.3.0"
}
and script in package.json:
"generate-error-pages": "babel-node scripts/generate-error-pages.js"
And this is my .babelrc file:
{
"presets": ["#babel/preset-env", "#babel/react"],
"plugins": [["styled-components", { "ssr": true }]]
}
I can't make it work with Node version 14 like it worked with version 10 and 12.

Creating new repository helped me find the problem. In previous versions of Node I had to add
"type": "module"
in package.json because without it there was an exception caused by using import in JS script. Now I observed that in Node 14 I don't need "type": "module" anymore. This was even the problem of described exception. After deleting this from package.json it is now working also in Node 14.

Related

Jasmine on Node.js fails with ERR_UNSUPPORTED_DIR_IMPORT

I'm writing an Express v4.18.2 app on Node.js 18.12.1 on Windows. I'm testing a controller with Jasmine 4.5.0. When I run jasmine spec, it fails with an error message about resolving ES modules:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import
'...\SimpleServiceJasmine\spec' is not supported resolving ES modules
imported from
...\SimpleServiceJasmine\node_modules\jasmine\lib\loader.js
...
code: 'ERR_UNSUPPORTED_DIR_IMPORT',
url: 'file:///D:/.../SimpleServiceJasmine/spec'
I use require, not import, everywhere in the code being tested or the spec.
Note that jasmine runs fine if I specify the spec file explicitly, even with wildcards, as long as the wildcard path resolves to a single file:
jasmine spec/service/contact-api.spec.js # ok
jasmine spec/*/c* # ok
I tried downgrading jasmine to 3.0.0 and 2.0.1 but got the same error. The behavior is the same on Windows 11 and Windows Server 2019.
Any suggestions for how can I run all the specs in this project?
Here's my package.json:
{
"name": "simpleservice",
"version": "1.0.0",
"description": "A simple CRUD API for contacts",
"main": "service/contact-api.js",
"scripts": {
"test": "jasmine spec/service/contact-api.spec.js",
"start": "node src/service/contact-api.js"
},
"author": "Puzzled Dev",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"jasmine": "^4.5.0"
}
}
Here's the spec/support/jasmine.json:
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.?(m)js"
],
"helpers": [
"helpers/**/*.?(m)js"
],
"env": {
"stopSpecOnExpectationFailure": false,
"random": true
}
}
Jasmine uses glob for pattern matching, which means whenever you pass spec as a pattern, glob finds this particular directory and then returns it to jasmine. Unfortunately, path validation in jasmine does not seem in a very smart way, it continues executing with the given path, and then it throws an error by Node.js.
It is equivalent to this:
import spec from './spec'
You can take a look at the jasmine-runner code, and the line in which contributor put a comment:
The ES module spec requires import paths to be valid URLs. As of v14,
Node enforces this on Windows but not on other OSes. On OS X, import
paths that are URLs must not contain parent directory references.
So, once you have defined spec_files in jasmine.json, there is no need to give an extra pattern to execute all tests.
jasmine will execute all tests with the help of spec_dir, and spec_files fields in jasmine.json. All you need to do is just simply run jasmine or npx jasmine.

how to set nodejs command `--max-http-header-size` with `nodemon --exec "babel-node" .`

I am upgrading my nodejs version from 8 to 10. after upgraded, i can't run my application in any browsers right now. so i've been googled my issue and found out that header size of node 10 has been downsized to 8kb from 80kb. my application header size is over 8kb. so i need to set it with nodejs command --max-http-header-size=80000. but i don't know how to set it up with nodemon and babel-node.
Please help.
here is my nodemon.json
{
"ext": "js jsx ejs json gql css",
"exec": "babel-node"
}
and here is my current package.json:
"develop:server": "BABEL_ENV=server nodemon .",
The Solution i've already tried:
{
"ext": "js jsx ejs json gql css",
"exec": "node --max-http-header-size=80000 ./node_modules/babel-cli/bin/babel-node.js"
}
The right solution is below ( choose one of them ):
{
"ext": "js jsx ejs json gql css",
"exec": "NODE_OPTIONS=--max-http-header-size=80000 babel-node"
}
"develop:server": "NODE_OPTIONS=--max-http-header-size=80000 BABEL_ENV=server nodemon .",
I think node engineers reduced the http-header-size from version 8.16.0. they reduced it to prevent attack like DDOS etc. I had the same problem when i upgraded from node version 8.9.1 to 8.16.0. how i solved the problem was in my package.json, I added --max-http-header-size=80000 flag in start script eg
"scripts": {"start": "node --max-http-header-size=80000 server.js"}
and it worked. but if your header is over 8kb then you have to go back to the previous version until the proper fix comes out.

npm script: browser opened using node, but not using babel

Early days in the development of my first npm script, and struggling somewhat. I'm on Ubuntu LTS with the latest nvm, node, npm and pnpm releases.
Node + npm have been installed using nvm, pnpm installed using npm, and several modules installed locally (i.e. without the -g flag) using pnpm. No sudo was necessary. The resulting package.json:
{
"name": "javascript-development-environment",
"version": "1.0.0",
"description": "JavaScript development environment cobbled together using various online sources",
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js",
"start": "./node_modules/.bin/babel buildScripts/srcServer.js"
},
"author": "Laird o' the Windy Waas",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.0.0"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"chalk": "^2.4.1",
"express": "^4.16.4",
"open": "^0.0.5",
"path": "^0.12.7"
}
}
With only Firefox 60.0.1 installed, on doing a 'pnpm start' using node, a browser window is opened "Hello World!" displayed, and terminal control has to be regained using a CTRL-C. -> All ok.
If I substitute in babel using the path as shown above (which results from the same issues described in this post), the buildScripts code is echoed to the terminal, but no browser window opens, and terminal control is released immediately on completion. The npm debugger provides no useful feedback. -> Something not working..
As the "Hello World!" code is traversed correctly using node (and remains unchanged for the babel traversal), it is not the source of the problem.
Here my babel config files:
.babelrc
{
"presets": [
"#babel/preset-env"
]
}
babel.config.js
const presets = [
[
"#babel/env",
{
targets: {
edge: "17",
firefox: "61",
chrome: "67",
safari: "11.1",
opera: "56"
},
useBuiltIns: "usage"
},
],
];
module.exports = { presets };
The problem looks to be that babel is not passing the transpiled code on to nodejs / express. Bound to be something simple, but I'm just going round in circles..
One thing I found myself asking is whether there might be a conflict between the various env presets across .babelrc, babel.config.js and package.json. Successive parking of the .babelrc and babel.config.js files, however, brought no change/advance.
I have also noticed that both (nvms) node and (ubuntus) nodejs are currently installed:
$ which node
/home/<myusername>/.nvm/versions/node/v10.13.0/bin/node
$ which nodejs
/usr/bin/nodejs
However, as everything to do with node and npm was installed using nvm, this shouldn't be a problem.
I could, I suppose, try installing babel globally, but with this widely frowned apon. I'd prefer a solution reflecting 'best practice'.
Thanks for any suggestions.
In earlier years, tutor material suggested babel-node would start npm / node (and hence express) on the user's behalf.
babel-node now no longer seems to be recognised. Attempts at using the babel-node command failed, and simply using node in it's place resulted in the transpiler output being dumped to the terminal.
babel, (in our case) pnpm, and node now have to be explicitly called, the latter referencing the transpiled code. node appears to handle interfacing with express.
After some experiment, therefore, the following changes (in package.json) appear to work fine:
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js -d dist",
"build": "./node_modules/.bin/babel buildScripts/srcServer.js -d dist",
"start": "pnpm run build && node dist/startMessage.js && node dist/srcServer.js"
},
These result both in a tidy console output and result in "Hallo World!" being displayed in a freshly opened browser window.
Just hope this is of use to someone else.. ;-)

Have you got nightmareJS working properley on c9.io IDE

NightmareJS on c9.io is literally a nightmare.
i cannot get it to work at all i am going to run through the whole process from start to finish.
Step 1
I create a new workspace
Hosted
Node.js
Step 2
Start Editing my new workspace
I open Package.json and add what i need heres my file.
{
"name": "chat-example",
"version": "0.0.0",
"description": "A chat example to showcase how to use `socket.io` with a static `express` server",
"main": "server.js",
"repository": "",
"author": "Mostafa Eweda <mostafa#c9.io>",
"dependencies": {
"async": "~0.2.8",
"express": "~3.2.4",
"socket.io": "~0.9.14",
"phantomjs": "*",
"casperjs": "*",
"nightmarejs": "*",
"utils": "*",
"crypto": "*"
}
}
i then run 'npm install' in the console.
Step 3
this is where it does not work i try all theses diffrent commands to get the examples running and the errors i get.
#stackoverflow:~/828481 $ cd node_modules/nightmarejs/examples/
#stackoverflow:~/828481/node_modules/nightmarejs/examples $ node server.js casper.js
Error: Cannot find module 'crypto'
phantomjs://bootstrap.js:289
phantomjs://bootstrap.js:254 in require
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:7
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:117
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/utils/utils.js:118
Error: Cannot find module 'casper'
phantomjs://bootstrap.js:289
phantomjs://bootstrap.js:254 in require
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareClient.js:4
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareClient.js:83
TypeError: 'undefined' is not a function (evaluating 'require(phantom.args[3].slice(13)+'nightmareClient.js').Nightmare({
exitOnError: false
})')
/var/lib/stickshift/5345392f50044693d40008de/app-root/data/828481/node_modules/nightmarejs/lib/nightmareTest.js:16
I have it working. I also had trouble at first. I tried downloading the prebuilt package, but I can't seem to get that working. I ended up just adding the following to my package.json file and ran npm update and all was well:
"nightmare": "^1.5.0",
"phantomjs": "~1.9.7"
Probably they've updated the npm repo and everything since you've posted this. I bet it was frustrating. I don't have those examples in my install, but I would guess you could run them if you had all of the right pre-req's installed.

Working Node.js modules into an application directory structure

I've begun using Node.js to make web applications. It's really awesome. I've come across a few modules that I want to incorporate into my build. I can work with the modules in Terminal after a global npm install. When it comes time to add them to my application, I have no idea how to go about placing them in my directory structure and I haven't found any good documentation on this. My typical node.js directory is:
ROOT
Server
server.js
node-modules
Client
index.html
css
-main.css
javascript
-main.js
-jquery.js
My process for installing the modules has been:
I cd into my Server file and run npm install
Then I go to my package.json file and include the module in the dependencies
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"jade": "*",
"stylus": "*",
"<node-module-here>": "1.0.x",
},
"engines": {
"node": "0.10.0",
"npm": "1.2.14"
},
}
After that, I head over to the server.js file I add:
module.exports = require('<path_to_node-module_lib>');
When I run functions that are dependent on the modules on the Client side (functions that work in Terminal), I don't receive an error but the function won't run. Because I'm not receiving errors I have no idea about how to debug. If anyone can recognize some fatal flaw in my structure or implementation and can offer some recommendations, I offer my first born.

Resources