Using babel-watch, when debugging through the Chrome inspector, I don't have source maps available.
When running the same code using babel-node, with the same .babelrc, source maps are available.
Here is my .babelrc:
{
"presets": [
["#babel/preset-env", { "targets": { "node": "current" } } ]
],
"sourceMaps": "inline"
}
How do I make source maps available in babel-watch?
Related
First of all, some facts:
Node.js requires that all local imports include the imported module's extension (e.g. import hello from './hello.js', not import hello from './hello').
TypeScript will compile imports with or without the .js extension, which means a missing .js extension is a runtime error.
TypeScript doesn't transform imports to add the .js extension or convert .ts to .js.
In my Node.js project, I want to make missing a missing .js extension be a build-time error using the import/extensions ESLint rule. However, when I enable this rule using the following configuration:
{
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"import/resolver": {
"typescript": {},
"node": {
"extensions": [".js"]
}
}
},
"rules": {
"import/extensions": ["error", "ignorePackages"]
}
}
running eslint gives me the following error:
/sandbox/src/index.ts
1:19 error Missing file extension "ts" for "./hello.js" import/extensions
Source files:
// index.ts
import hello from "./hello.js";
hello();
// hello.ts
export default function hello() {
console.log("Hello");
}
CodeSandbox link: https://codesandbox.io/s/elated-germain-13glp7
I fixed this with the following config:
{
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"rules": {
"import/extensions": ["error", "ignorePackages"],
"import/no-unresolved": "off"
}
}
The main thing is to disable the "import/no-unresolved" rule and remove "settings"."import/resolver"."node". ("import/no-unresolved" is redundant as unresolved imports are resolved at the compilation stage.) Other items removed here were already being added as a result of extending the #typescript-eslint plugins.
I found an eslint plugin that can fix missing .js extensions for imports in .ts files, instead of just showing an error:
https://github.com/AlexSergey/eslint-plugin-file-extension-in-import-ts
https://www.npmjs.com/package/eslint-plugin-file-extension-in-import-ts
Install:
npm i -D eslint-plugin-file-extension-in-import-ts
Add to .eslintrc file:
{
"plugins": [
"file-extension-in-import-ts"
],
"rules": {
"file-extension-in-import-ts/file-extension-in-import-ts": "error"
}
}
NOTE: I ran into an issue similar to https://github.com/import-js/eslint-plugin-import/issues/1292 when using this package, and it will incorrectly try to add .js extensions on these paths when fixing automatically.
You could try ts-add-js-extension package to append .js extension to the transpiled JavaScript files. After you install you can do
ts-add-js-extension add --dir={your-transpiled-outdir}
The Situation
I have a NodeJS project that uses Babel and ESLint (6.8).
I'm using the relatively new syntax for aggregate exports (export * as name1 from …;).
The Code
constants.js
export const x = 5
export const y = 6
index.js
export * as constants from './constants'
sandbox.js
import { constants } from './index'
console.log(constants.x)
When I run babel-node sandbox.js everything works just fine, and the value for x (5) is rendered.
.eslintrc
{
"extends": "airbnb-base",
"parser": "babel-eslint",
"env": {
"es6": true,
"node": true,
"jest": true
}
}
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "13.10"
}
}
]
],
"plugins": [
"#babel/plugin-proposal-export-namespace-from"
]
}
The Problem
ESLint seems to be confused by my aggregate export, rendering the following error when I lint:
sandbox.js
1:10 error constants not found in './index' import/named
The Question
How do I get ESLint to recognize that the named aggregate does in fact exist? I would like to be able to still benefit from the import/named checks overall.
It's been a while since I started a nodejs project from scratch, so was a bit of a headscratcher to set up and configure eslint, babel etc.
right now my babelrc is :
{
"presets": [
[
"env",
{
"targets": {
"node": "10"
}
}
]
],
"plugins": [
[
"transform-runtime",
{
"regenerator": true
}
]
]
}
package.json has dev dependencies:
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
Now I want to loop over a list of objects. For each, I need to perform some asynchronous tasks that I'll need to await on, so I did:
for await (const thing of things) {
const foo = await doSomethingThatTakesAwhile(thing)
// etc
}
but when I run it in dev (nodemon via babel-node) now there's a syntax error on the await:
for await (const thing of things) {
^
Syntax Error Unexpected token, expected (
at Parser.pp$5.raise (... \node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (... \node_modules\babylon\lib\index.js:1761:8)
at Parser.pp.expect (... \node_modules\babylon\lib\index.js:1749:33)
at Parser.pp$1.parseForStatement (... \node_modules\babylon\lib\index.js:2008:8)
etc..
Do I have to change my babel config, and/or have I completely misunderstood for/await and await/async ?
I found another project in which i know for await of works... it looks like I'm using old babel plugins and not the new, separated out #babel/xxx libs. After trial and error installing and uninstalling stuff: this is the resulting babelrc that worked:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "10"
}
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
},
"#babel/preset-env"
]
]
}
By this point I had installed all of:
#babel/core
#babel/node
#babel/cli
#babel/preset-env
#babel/plugin-transform-runtime
Then I ran into this issue: https://github.com/meteor/meteor/issues/10128
So Had to also install #babel/runtime pegged at 7.0.0-beta.55 ... and now it builds!!
I believe you need the babel-plugin-proposal-async-generator-functions plugin to use the for await of syntax.
I have the following .babelrc.js in the root folder:
{
"plugins": [
"#babel/plugin-transform-flow-strip-types",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-transform-async-to-generator",
"#babel/plugin-transform-strict-mode",
"#babel/plugin-transform-runtime"
],
"cache": "true"
}
but when it tries to run node ./packages/jest-cli/bin/jest.js I see:
Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:
What am I missing?
Use new babel.config.js
https://new.babeljs.io/docs/en/next/babelconfigjs.html
module.exports = function(api) {
api.cache(true)
return {
plugins: [
"#babel/plugin-transform-flow-strip-types",
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-transform-async-to-generator",
"#babel/plugin-transform-strict-mode",
"#babel/plugin-transform-runtime"
]
}
}
I am building a native module that needs to link a static library. The path to that library. My binding.gyp file has the following appearance:
{
"targets": [
{
"target_name": "DcpServer",
"sources": [
"DcpServer.cc"
],
"include_dirs": [
"../../coratools",
"../../../boost-1.65.1"
],
"libraries": [
"<(module_root_dir)/../../coratools/release_uni64/coratools.lib"
],
"defines": [ "CSIWEB_EMBEDDED", "UNICODE", "_UNICODE" ],
"configurations": {
"Release": {
"msvs_settings": {
"VCCLCompilerTool": {
"ExceptionHandling": 1,
"RuntimeTypeInfo": "true"
}
}
},
"Debug": {
"msvs_settings": {
"VCCLCompilerTool": {
"ExceptionHandling": 1,
"RuntimeTypeInfo": "true"
}
}
}
}
}
]
}
The path to coratools.lib will vary based upon whether the debug or release configuration is selected. The problem is that node-gyp did not allow me to place the "libraries" key within the "configurations" property. Is there a way of doing what I want by making the library path conditional?
I never did discover how to do this. In the end, I switched to using cmake-js to build my native module.