ava: SyntaxError: Unexpected token import - ava

So ava comes with build-in ES2015 support, which works fine for my actual test files. However, when I do
import {newUser, createUser, login} from './helpers/user';
I can't use import and export in the helper file, I then get:
Users/rowe/Code/fv/foxvision-api/test/api/helpers/user.js:1
(function (exports, require, module, __filename, __dirname) { import request from 'supertest';
SyntaxError: Unexpected token import
I have no specific babel configuration set up as for the test files it works out of the box. Can anyone explain to me why the helper dependencies are not transpiled with babel? Using test/**/helpers is even following ava convention.
Thanks,
Robin
Solution
So based on thangngoc89's solution, what I did to make it work was:
Add a .babelrc with content:
{
"presets": [
"es2015",
"stage-2"
],
"plugins": [
"espower",
"transform-runtime"
]
}
Added to package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}

AVA only transpile the test files. Not test dependencies so you will need to setup babel in your project (I suppose you did it because you're using ES6 anyway).
Then in AVA's setting, add this :
"ava": {
...
"babel": "inherit"
}
It means that use your project babel setting to transpile the test dependencies. See more information in AVA docs: https://github.com/sindresorhus/ava/blob/master/docs/recipes/babelrc.md

Using rweng, my solution came out a bit simpler.
.babelrc
{
"presets": [
"es2015"
],
"plugins": [
"transform-runtime"
]
}
package.json:
"ava": {
"require": ["babel-register"],
"babel": "inherit"
}

Unfortunately standard solution didn't work for my case.
Here is my solution which worked for ava + quasar + vue project
.babelrc
{
"presets": [
"es2017",
"#ava/stage-4",
"stage-3"
],
"plugins": [
"transform-runtime"
]
}
package.json
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
},
"scripts": {
"ava": "NODE_ENV=test ava",
"test": "ava",
"test:watch": "ava --watch --verbose"
}
install modules
yarn add babel-register babel-preset-es2017 #ava/babel-preset-stage-4 babel-plugin-transform-runtime babel-preset-stage-3 --dev

Related

mysql node module give me an error "require is not defined"

I'm trying to use mysql module in a node js project (node 18.12, mysql 2.18.1)
in my project I must use
"type": "module"
in my package.json because the app is constructed with modules. for example i use this imports in the head of my app.js
import { createServer } from 'node:http';
import fs from 'node:fs/promises';
import { createTodo, findTodos } from './functions/storage.js';
import { index,create } from './functions/api/api.js';
then I add the line, like in the doc
var mysql = require('mysql');
but when I launch the app i have this error
mysql node module "require is not defined in ES module scope, you can
use import instead"
I have tried to change type to commonjs but get the same error in the other way, tried to change the extensions of the js file for cjs or mjs . every time same type of error.
How can I use mysql with "native" module node app ?
I'm a beginner in node so, sorry if it is a dumb question, but I can't find any answer by the web.
Here is my package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC",
"volta": {
"node": "18.12.1"
},
"dependencies": {
"mysql": "^2.18.1"
}
}
Try to remove "type":"module" from package.json.
From How to fix reference error require is not defined in javascript
I finally found the answer here
const require = createRequire(import.meta.url);
var mysql      = require('mysql');
I hope this will be useful for other people ;)

Tslint exclude doesn't work correctly, React-Dropzone

I have the following structure:
components
my_component
tslint.json
tslint.json
root tslint.json
{
"extends": ["...some/tslint.json"],
"linterOptions": {
"exclude": [
"components/**/node_modules/**/",
"components/**/node_modules/*",
"components/*/node_modules/",
"node_modules"
]
}
}
component tslint.json
{
"extends": ["../../tslint.json"],
"linterOptions": {
"exclude": [
"node_modules/**"
]
}
}
But when I run "lint": "tslint \"components/**/**.ts*\""
from the root, I get these errors:
ERROR: components/my_component/node_modules/react-dropzone/typings/tests/accept.tsx[78, 22]: ' should be "
ERROR: components/my_component/node_modules/react-dropzone/typings/tests/accept.tsx[78, 36]: ' should be "
...
It should've work even without local tslint.json
But I tried to override, and even this didn't help
How to make it work?

Babel with babel-preset-env seems to ignore browserslist config

I’m testing Babel with browserslist in an npm script.
Here is my current package.json, in which Babel is doing what I expect:
{
"name": "npm-scripts-igloo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"devserver": "live-server",
"watch-sass": "node-sass sass/style.scss css/style.css --output-style expanded --watch",
"compile-sass": "node-sass sass/style.scss css/style.compiled.css --output-style expanded",
"prefix-css": "postcss css/style.compiled.css --use autoprefixer -o css/style.prefix.css",
"compress-css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
"build-css": "npm-run-all compile-sass prefix-css compress-css",
"babel": "babel app.js --watch -o js/app.compiled.js",
"start": "npm-run-all -p devserver watch-sass babel"
},
"browserslist": [
"last 5 versions"
],
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"cover 99.5%"
]
}
}
]
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.1",
"autoprefixer": "^9.4.7",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"live-server": "^1.2.1",
"node-sass": "^4.11.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.1"
}
}
I’m not using a .babelrc file or any other configuration of Babel.
I’ve tried to target Edge 16 using the browserslist key:
"browserslist": [
"Edge 16"
]
With this configuration, Babel should NOT convert const to var, but it does, as explained here:
Babel doesn’t change const since Edge 16 supports it
https://github.com/browserslist/browserslist-example
However, if I target Edge 16 using the babel key:
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"Edge 16"
]
}
}
]
]
}
then Babel correctly doesn’t change const to var since Edge 16 supports it.
I would prefer to use the browserslist key, as it’s the recommended practice
https://github.com/browserslist/browserslist
Also, I could then simply share this browserslist option with autoprefixer, which is how it’s supposed to work.
But, the problem is that Babel seems to ignore the browserslist key.
The same is true if I use a .browserslistrc file containing:
Edge 16
There is an asterisked note on this slide:
https://slides.com/ai/browserslist#/14
that reports:
Only Babel 7 supports config file
So, I tried updating Babel to v7:
npm install #babel/core -D
This produced the following in devDependencies:
"#babel/core": "^7.3.4"
Unfortunately, that didn’t seem to make any difference.
So, my questions are:
Why does the browserslist key not appear to be affecting Babel? Is there something wrong with my syntax?
Does it matter where in package.json the browserslist key appears? i.e. does key order matter?
A little bit late for the party but I was reading through the docs and found out this:
"By default #babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set."
source: here
So in your case you need to get rid of targets property otherwise it will take precedence and neither .browserlistrc nor browserslist property in package.json will take effect.
Hope it helps!
try to clean cache in node_modules/.cache/babel-loader
Its worked for me with babel#7.6.0 with following config in .babelrc fie
'#babel/preset-env', {
'useBuiltIns': 'usage',
'corejs': 3,
'targets': {
'browsers': ['chrome 74']
}
}
Found more info here.
An or combiner can use the keyword or as well as ,. last 1 version or > 1% is equal to last 1 version, > 1%.
and query combinations are also supported to perform an intersection of the previous query: last 1 version and > 1%.

Consuming pure ES2015 libraries with Webpack 2

Context
I've been using a monolithic src tree internally and have recently split it into separate smaller libraries for reuse. Since this is all internal, I have no need for these libraries to produce ES5. I want our webpack 2 apps to be able to consume pure ES2015 libraries.
Problem
The problem is, when I produce a pure ES2015 library, my webpack transpiled app fails with:
Uncaught TypeError: Class constructor RouteConfig cannot be invoked without 'new'
The source of this is:
import {RouteConfig} from '#acme/ui/config'
Sanity check
For verification that I'm not doing anything obviously wrong, I verified:
the library built as ES5 works
the app including the library (with the ES2015 preset added to it) via source alias works
Details
Library .babelrc
{ // produce a pure es2015 build
"presets": [
"es2017",
"es2016",
"stage-0",
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
Application .babelrc:
{
"presets": [
"es2017",
"es2016",
["es2015", {"modules": false}], // allows webpack2 to interpret ES2015 modules+
"stage-0", // if omitted, this leaves `export Log from './Log'`
"react"
],
"plugins": [
"babel-relay-plugin-loader",
"flow-react-proptypes",
"transform-flow-strip-types",
"lodash",
"transform-runtime",
"react-hot-loader/babel"
],
"env": {
"production": {
"presets": [
"react-optimize"
],
"plugins": [
["react-remove-properties", {"properties": ["data-test"]}]
]
}
}
}
TLDR;
We have many libraries and many apps that are internal and don't need ES5
I want to author both a library and an app in ES2015+.
Each library will create a pure ES2015 build for the private npm package.
I want to take advantage of as much webpack 2 tree shaking/optimization as possible.
Our library works as an ES5 package
Our library works as a source alias to the app with the 2015 preset added to it's .babelrc
Source alias usage for all our libraries is not desirable
Question
What config is needed to get webpack 2 to consume a pure ES2015 library?
It's possible you're excluding the node_modules folder in your babel-loader. If so, you can try modifying the exclude regex.
ie.
test: /\.js$/,
use: [
'babel-loader'
],
exclude: [/.*node_modules((?!folder_name_here).)*$/]

Module parse failed when using Riot with Webpack, and Babel for es2015

I have a project that is using ES2015 for the code, and also using Riot.
(The Riot components, however, do not need to be in ES2015, just old JS)
I am also using Webpack to build the project.
The problem I am getting is :
"ERROR in ./src/test-tag.tag
Module parse failed:
.../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag
Unexpected token (5:18) You may need an appropriate loader to handle
this file type."
It is complaining because of the way riot component script code looks, ie. a function must have just this for it's declaration functionName() { /* the code */ } , ie. there is no keyword function.
Here is my full project
app.js
import 'riot';
import 'test-tag.tag';
riot.mount("*");
test-tag.tag
<test-tag>
<h1>This is my test tag</h1>
<button onclick{ click_action }>Click Me</button>
<script>
//click_action() { alert('clicked!'); }
</script>
</test-tag>
index.html
<html>
<head></head>
<body>
<test-tag></test-tag>
<script src="app_bundle.js"></script>
</body>
</html>
package.json
{
"name": "riot_and_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015-riot": "^1.1.0",
"riot": "^2.5.0",
"riotjs-loader": "^3.0.0",
"tag": "^0.3.0",
"tag-loader": "^0.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
const path = require('path');
const PATHS = {
src: path.join(__dirname + '/src'),
dist: path.join(__dirname + '/build'),
};
module.exports = {
entry: [path.join(PATHS.src, '/app.js')],
resolve: {
modulesDirectories: ['node_modules', '.'],
extension: [ '.js' ]
},
output: {
path: PATHS.dist,
filename: 'app_bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
riot: 'riot'
})
],
module: {
preLoaders: [
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{ test: /\.tag$/, loader: 'tag' },
]
}
};
Now - that will all work as expected, except that clicking the button does nothing because that code is commented out.
If the click_action line in test-tag.tag is uncommented, then $ webpack results in the error quoted at the top of this (horribly huge) question.
Is there any way I can get webpack to accept the standard riot code?
OR
Is there a different way I can define riot internal functions in a way that webpack will not complain about?
Have in mind that the "ES6 like" method syntax is something added by Riot, is not standard ES6.
This will be the standard js syntax
this.click_action = function() {
alert('clicked!')
}
And this the es6 syntax
this.click_action = () => {
alert('clicked!')
}
Also you have a typo in your button definition, it will be like this
<button onclick={click_action}>Click Me</button>