We Keep Coding

Why Jest failing on node-fetch giving syntax error on import

I'm trying to understand how to fix the following error using Jest in my unit tests in NodeJS.
The test run with this command "test": "NODE_ENV=test jest spec/* -i --coverage --passWithNoTests",
I'm also using babel and this is my config
{
"presets": [["#babel/env", { "targets": { "node": "current" } }]],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
["babel-plugin-inline-import", { "extensions": [".gql"] }],
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
In package.json I have this
"jest": {
"verbose": true,
"collectCoverageFrom": [
"spec/**/*.js"
]
},
I tried several guides online but cannot find a solution to this

You've got Jest successfully configured to transform your code, but it is not transforming modules that you're importing—in this case node-fetch, which has the import keyword in its source code (as seen in your error). This is because, by default, Jest is configured not to transform files in node_modules:
transformIgnorePatterns [array]
Default: ["/node_modules/", "\.pnp\.[^\/]+$"]
An array of regexp pattern strings that are matched against all source file paths before transformation. If the file path matches any of the patterns, it will not be transformed.
You can set transformIgnorePatterns to exclude certain packages in node_modules with a jest.config.js like this:
const esModules = [
'node-fetch',
'data-uri-to-buffer',
'fetch-blob',
'formdata-polyfill',
].join('|');
module.exports = {
transformIgnorePatterns: [
`/node_modules/(?!${esModules})`,
'\\.pnp\\.[^\\/]+$',
],
};
(see https://github.com/nrwl/nx/issues/812#issuecomment-429420861)

If you have .babelrc try to rename it to babel.config.js
Source:
https://babeljs.io/docs/en/configuration#whats-your-use-case
but also this (there's more in the discussion)
Jest won't transform the module - SyntaxError: Cannot use import statement outside a module

React - 'classProperties' isn't currently enabled

I added Truncate-react to my project. After that, React tells me I need to install #babel/plugin-proposal-class-properties, which I did in package.json file in this way:
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
Of course, the proposal-class-properties itself I installed with the label --save-dev
but after all this, I still get an error that looks like this

based on the github link you sent you have to do 2 things to make it work
you have both .babelrc file and babel config in your package.json. you have to choose one.
You have to change import TextTruncate from 'react-text-truncate/src/TextTruncate' to
import TextTruncate from 'react-text-truncate' in VideoCard component.
I assume react-text-truncate/src/TextTruncate this file is not the compiled version

Eslint - SourceType mixture of script and module

We are starting to mix in some es6 modules and eslint justly complains when you use import/export when not using the sourceType: script
Parsing error: 'import' and 'export' may appear only with 'sourceType: module'at line 1 col 1
However if I change sourceType to module then every file that has 'use strict'; at the top gets flagged saying use strict isn't needed in modules.
The modules are my jsx files and my js files are POJ so I need both sourceTypes to be operating.
Any ideas on how to coerce eslint to behave with both modules and scripts? I would like to avoid running two seperate eslintrc files and rule sets just to have one be modules and the other be scripts.

As long as as your scripts have one extension and your modules have a different extension, then you can have two different configs.
// .eslintrc.json
{
// ...
// Your normal config goes here
// ...
}
Lint your normal scripts with eslint ., just like you've been doing. It defaults to sourceType: "script", pulls .eslintrc.json by default, and only lints *.js files by default.
// .eslintrc.modules.json
{
"extends": "./.eslintrc.json",
"parserOptions": {
"sourceType": "module"
},
// You can have additional module-specific config here if you want
}
Now you can lint just the modules using eslint --config .eslintrc.modules.json --ext .jsx ., which will pull the modules config, which is just an extension of the normal .eslintrc.json, and it will only lint the *.jsx files.

I've created the main file in the root folder with option sourceType: script.
When in a folder ./front file .eslintrc.json:
{
"extends": "../.eslintrc.json",
"parserOptions": {
"sourceType": "module"
}
}

There's a nicer approach now in eslint 4.1.0+:
module.exports = {
overrides: [
{
files: [ "rollup.config.js" ],
parserOptions: { sourceType: "module" },
}
]
};
You can also change rules or whatever you want, per-glob, in the overrides section.

There is a way to have your cake and eat it too, keeping all your files with the .js extension while disambiguating the sourceTypes of files.
First, like the other answers suggest, add an override for an alternate file extension:
{ "overrides":
[
{ "files": [ "*.js" ]
, "excludedFiles": "*unambiguous.js"
, "processor": "plugin-name/disambiguate" }
,
{ "files": [ "*.mjs" ]
, "parserOptions":
{ "sourceType": "module" } }
] }
Then comes the magic: make a super simple ESLint plugin like so
var module_regex = /\bimport\b|\bexport\b/
module .exports =
{ processors:
{ disambiguate:
{ preprocess: (_source_string, _file_path) => {
if (module_regex .test (_source_string)) {
return [
{ text: _source_string
, filename: 'unambiguous.mjs' } ] }
else {
return [
{ text: _source_string
, filename: 'unambiguous.js' } ] } } } } }
With this setup, after the ESLint plugin disambiguates your Javascript code, ESLint understands your sourceType just as its supposed to, with no changes to .js file extensions needed.
This fits well with the ESLint configuration/plugin model, and as a plugin you can even put the "overrides" in the plugin config so that all your base config needs is to do is to include the plugin, to make the disambiguation work.
May consider putting this up on npm sometime, hope this helps someone.

Flowtype + babelify

I'm onto my personal project and I want to integrate flowtype. Now, within the package.json I got:
"babel-plugin-syntax-flow": "6.3.13"
which helps babelify to transcript the flowtype's syntax but it doesn't do 'flow check' and doesn't log potential errors. Should I setup a separate gulp task with a separate package for it like https://www.npmjs.com/package/gulp-flowtype or should the the babel-plugin-syntax-flow also handle error logging?

The only thing Babel knows about Flow is how to parse it so that it won't cause a syntax error. Generally you'd use babel-plugin-transform-flow-strip-types, which enables the syntax plugin you have now, and then deletes the flow types so they don't end up in your final output. This is also enabled by default if you use the Babel preset react.
You'd definitely still have to use Flow's standard typechecker to do the actual static analysis.

Here is my working solution:
You need to install:
$ npm i --save-dev babel-plugin-syntax-flow
babel-plugin-transform-flow-strip-types babel-plugin-typecheck
Then add
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
to your .babelrc configuration
Here is a sample of my configuration:
{
"presets": ["stage-2", "es2015", "react"],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"transform-async-to-generator"
],
"env": {
"development": {
"presets": ["react-hmre"]
},
"test":{
"presets": ["stage-2", "es2015", "react"],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"transform-async-to-generator"
],
}
}
}
This will output errors both at runtime and into your console.

As of June 2017, all you need to do is npm i --save-dev flow-runtime and add:
{
"plugins": [["flow-runtime", {
"assert": true,
"annotate": true
}]]
}

ES6 Transpile in package.json

Happy Thanksgiving All!
I'm running into a situation and I'm hoping someone can help me out. I have a package.json file, and I'm trying to transpile es6 but not exactly sure what I'm doing wrong. I have a JS Fiddle of my current package.json: http://jsfiddle.net/jdubba/nnhytbdr/ but mainly, i have this line here:
{
"name": "react-starter",
"browserify": {
"transform": [
"reactify"
]
},
"scripts": {
...
From what I've been reading, in the "browserify" object, under "transform", i'm supposed to be able to do something like:
{
"presets": ["es2015", "react"]
}
But i'm doing this incorrectly. I'm going off of what I found here: https://github.com/andreypopp/reactify
When I change my transform array to:
"transform": [
["reactify", {"es6": true}]
]
and then add an import statement into my code, I get the following error:
Parse Error: Line 2: Illegal import declaration while parsing file:
Which then inevitably sent me down another path of findings:
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Parse+Error+Illegal+import+declaration+while+parsing
but I haven't found anything to fix my issue, and I feel like i'm going in circles. This illegal import declaration error is pretty common, but I'm interested in a solution that works without having to use grunt or gulp (which is mainly what I've been seeing). Can anyone lend a hand?

I ended up making the following change to my package.json:
"browserify": {
"transform": [
"babelify"
]
},
...
I was not able to get babelify v7.2.0 to work with import/export, so switching to v6.1.2 gave me the results I wanted.