I can compile and run my JSX app with one command:
jsx app.jsx | node
But I also want my server to automatically restart every time I modify app.jsx. I can do that with nodemon, but I can't quite figure out how to get nodemon to run my script through the JSX compiler beforehand.
I've got a nodemon.json file set up like this:
{
"execMap": {
"js": "node",
"jsx": "jsx {{filename}} | node"
},
"ext": "js jsx",
"ignore": [
".hg",
"node_modules",
".idea"
],
"verbose": true
}
But when I run nodemon it tells me:
8 Feb 21:58:48 - [nodemon] starting `jsx app.jsx | node`
8 Feb 21:58:48 - [nodemon] child pid: 10976
'\"jsx app.jsx | node\"' is not recognized as an internal or external command,
operable program or batch file.
Which is odd, because that command works verbatim when I paste it directly into my terminal.
Is there any way I get nodemon to run my JSX files?
It seems nodemon is attempting to run a program with the name you provide, rather than executing a shell.
Create a jsx.sh file with this content:
#!/bin/sh
jsx "$1" | node
Then chmod +x jsx.sh, and put this in your nodemon.json:
{
"execMap": {
"js": "node",
"jsx": "./jsx.sh"
},
"ext": "js jsx",
"ignore": [
".hg",
"node_modules",
".idea"
],
"verbose": true
}
* not tested
OR you can just locate the jsx command in your ./node_modules/.bin directory and run it off that instead:
{
script: "client.js",
options: {
execMap: {
"js": "node",
"jsx": "./node_modules/.bin/jsx \"$1\" | node"
},
ext: "js jsx",
callback: function (nodemon) {
nodemon.on("log", function (event) {
console.log(event.colour);
});
},
ignore: [
"node_modules/**/*.js",
"public/js/**",
"lib/api/**",
]
}
}
If you're on Windows (like me) you can create a .bat instead of a .sh like FakeRainBrigand suggests
#echo off
jsx %1 | node
This file has to be in the same directory as nodemon.json and package.json -- paths don't seem to work in the execMap for whatever reason.
Also, an even easier solution is to just not use any JSX in your main/server script, install node-jsx and then require your JSX files as needed.
Related
I have a problem with my create react app. When I run dev version everything is fine. When I'm trying to run build version I get error:
Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
at n (react-datepicker.js:4634)
I tried this: babel.rc file
{
"presets": ["es2015", "stage-0"],
"env": {
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development": {
"plugins": [[
"react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
}]
// note: you can put more transforms into array
// this is just one of them!
}
]]
}
}
}
and my build command is:
"build": "set NODE_ENV=production && react-scripts build",
Any idea why this happens or where should I look for solutions?
Thanks
In my Express/React app, I am using Webpack to handle server-side rendering. However, I am experiencing a build error related to environment variables that I'm trying to access in my Express server script.
In the server script, index.js, I am setting a few variables like so:
const gitCommit = process.env.GIT_COMMIT || require("./gitignore/git_commit.js"),
buildDate = process.env.BUILD_DATE || require("./gitignore/build_date.js")
And since I am running a test production build on my local machine, I delete the gitignore/ directory and set those environment variables:
$ export GIT_COMMIT="test commit hash"
$ export BUILD_DATE="test build date"
Then I npm run build, which executes the following scripts:
"build:client": "webpack --config webpack.config.js",
"build:server": "webpack --config webpack.server.config.js",
"build": "npm run build:client && npm run build:server"
build:client executes with no problem, but build:server throws errors...
ERROR in ./index.js
Module not found: Error: Can't resolve './gitignore/git_commit.js' in '/Users/filepath'
# ./index.js 12:38-74
ERROR in ./index.js
Module not found: Error: Can't resolve './gitignore/build_date.js' in '/Users/filepath'
# ./index.js 13:42-78
implying that the two environment variables referenced in index.js can't be found, and so it's looking for the gitignore/ instead, which shouldn't exist (I mean, it does exist locally, but I've deleted since I'm simulating a production build).
Here is the complete webpack.server.config.js:
const fs = require("fs"),
path = require("path")// ,
// ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
"entry": path.resolve(__dirname, "index.js"),
// keep node_module paths out of the bundle
"externals": fs.readdirSync(path.resolve(__dirname, "node_modules")).concat(["react-dom/server", "react/addons"]).reduce((ext, mod) => {
ext[mod] = `commonjs ${mod}`
return ext
}, {}),
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.js$/
}
]
},
"node": {
"__dirname": true,
"__filename": true
},
"output": {
"filename": "server.bundle.js"
},
"target": "node"
}
Now I expect that gitignore/ would not be found, but what I don't understand is why the two environment variables that I set are not being detected by index.js - they are definitely set in the console before I even run the build command. If I console.log() them in the beginning of webpack.server.config.js, it logs them correctly, and if I run my development version instead (which doesn't use the server config), I can log them correctly in index.js. What gives?
Node version 6.11.1, NPM version 3.10.10, Webpack version 2.6.0.
Your environment variables are only available when Webpack runs, but not when you execute your index.js.
You will need to use the EnvironmentPlugin in your Webpack config like that:
plugins: [new webpack.EnvironmentPlugin(['GIT_COMMIT ', 'BUILD_DATE'])]
That plugin will replace the variables by their actual values.
HINT: Do not use ||. Webpack does not know how to optimize it. Try the ternary operator:
const gitCommit = (process.env.GIT_COMMIT) ? (
process.env.GIT_COMMIT
) : (
require('./gitignore/git_commit.js')
);
Webpack will bundle this to:
const gitCommit = (true) ? (
"test commit hash"
) : (
require('./gitignore/git_commit.js')
);
No IgnorePlugin is needed. Even better, with the UglifyJSPlugin, your code will be optimized to const gitCommit = "test commit hash";. In some cases gitCommit is removed completely as a variable. Its string value will be used instead anywhere where you applied gitCommit.
I have source code and tests separated as follows:
`src/main/ts/hello.ts` //SOURCE FILES HERE
`src/test/ts/hello.spec.ts` //SPEC FILES HERE
The import statement in src/test/ts/hello.spec.ts looks like this:
import hello from 'hello';
The hello.ts source code looks like this:
export function hello() {
return 'Hello World!';
}
export default hello;
My tsconfig.json is setup such that the test files can import source modules without using relative paths like this:
{
"include": [
"src/main/ts/**/*.ts"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"experimentalDecorators": true,
"noImplicitAny": true,
"moduleResolution": "node",
"target": "es6",
"baseUrl": ".",
"paths": {
"*": [
"*", "src/main/ts/*"
]
}
}
}
This way the hello.spec.ts file can import hello using the statement import hello from 'hello';
I'm trying to run the tests with npm test configured to run mocha and tsnode like this (Based on this article):
"scripts": {
"test": "mocha -r ts-node/register src/test/ts"
},
However it does not look like ts-node is picking up on my tsconfig.json configuration as I get this error:
mocha -r ts-node/register src/test/ts
Error: Cannot find module 'hello'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
The module resolution that you set through paths in tsconfig.json is purely an compile-time thing. (See this ts-node issue report and this TypeScript issue report for details.) It does not affect how the code is emitted, which means that your test file is doing a require("hello"), which Node cannot resolve. The consequence of paths being a compile-time thing is that your module loader needs to be configured to also perform the same kind of resolution that you specify in tsconfig.json. If you were using RequireJS, for instance, you'd need to have a configuration for it that does the same thing paths in tsconfig.json does. You are using Node, however...
What you can do in Node is use tsconfig-paths, which will read the tsconfig.json, parse the paths setting and change the module resolution in Node so that it works.
Using your code, I modified hello.spec.ts to have at least one test for feedback:
import hello from "hello";
import "mocha";
it("q", () => {
if (hello() !== "Hello World!") {
throw new Error("unequal");
}
});
I installed tsconfig-paths and #types/mocha (so that import "mocha" does the right thing compilation-wise in the test file I show above) and invoked Mocha like this:
$ ./node_modules/.bin/mocha --compilers ts:ts-node/register -r tsconfig-paths/register 'src/test/ts/**/*.ts'
I got this output:
✓ q
1 passing (20ms)
To reproduce:
Use my Windows 10 PC to open VSCode
Create a Hello World js file
Launch as node application from the VSCode Debugger view
Produces error: Cannot find runtime 'node' on PATH
Given:
My launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Build",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/build.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false
}
]
}
I have moved nodejs to within 2048 characters of my PATH variable.
I have restarted my computer.
I have restarted VSCode.
From both CMD and the Integrated Terminal (sysnative/cmd):
PATH contains D:/Program Files/nodejs
where node returns D:/Program Files/nodejs/node.exe
From the Google Developer Console:
process.env.PATH contains D:/Program Files/nodejs
Running the following code produces D:/Program Files/nodejs/node.exe:
(function(){
const cp = require('child_process');
const env = Object.assign({}, process.env, {
ATOM_SHELL_INTERNAL_RUN_AS_NODE: '1',
ELECTRON_NO_ATTACH_CONSOLE: '1'
});
const result = cp.spawnSync('where', ['node'], {
detached: true,
stdio: ['ignore', 'pipe', process.stderr],
env,
encoding: 'utf8'
});
console.log(result.stdout);
})();
Additional
Also .NET-Core applications behave identically - terminal and cmd works, dotnet is on the path, but Launch from VSCode debugger view fails to find CLI Tools on the path.
Attaching to an existing dotnet process produces a different error:
Please set up the launch configuration file for your application. command 'csharp.listProcess' not found
Not sure if related, but F12 for jumping to declaration is unresponsive.
Update
I've been doing some debugging, and it looks like the following code produces Command Failed: echo test:
require('child_process')
.execSync('echo test', {cwd: workspaceRoot, env: process.env});
Under the hood, it winds up calling
require('child_process')
.spawnSync('cmd', ['/s', '/c', '"echo test"'], {cwd: workspaceRoot, env: process.env});
The command it builds under the hood is C:\Windows\System32\cmd.exe /s /c "echo test" which I tested and does indeed print test.
The spawnSync call reveals that the exit code was 3221225477.
In fact, every time I use child_process to execute something via cmd, the exit code is 3221225477. I can get spawnSync to start other processes aside from cmd, though. This works:
require('child_process')
.spawnSync('node', ['build.js'], {cwd: workspaceRoot, env: process.env});
I can successfully use the node in the console of the sublime text 3 editor. I try to use nodemon to make it faster for me to run it each time I save the file.
I go tools-> build system and type this:
{
"cmd": [ "/usr/local/bin/nodemon", "$file" ],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": "source.js"
}
but I get the following error:
env: node: Argument list too long
[Finished in 25.7s with exit code 126]
[cmd: ['/usr/local/bin/nodemon', '/Users/x/Documents/MSCS/p2/v4/app.js']]
[dir: /Users/x/Documents/MSCS/p2/v4]
[path: /usr/bin:/bin:/usr/sbin:/sbin]
And in the console here is what happens:
x$> nodemon --v app.js
env: node: Argument list too long
Thanks for help:)
Let me tell you how I manage
1st. add the main script on the package.json to start with a simple nodemon (without args)
"scripts": {
"start": "node app-server.js",
...
2nd. tools > build system > new build system
{
"shell": true,
"cmd": ["nodemon"],
"path": "/usr/local/bin/:$PATH",
"env": {
"dns_srv": "4.2.2.2",
},
"working_dir": "${project_path:${folder}}",
"selector": "*.js"
}
still working on how to get ansi colors on the output terminal..