I have a simple javascript project that is using ES6, plus import and export. Here is my .babelrc file
{
"env": {
"es": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
},
"modules": false
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
},
"test": {
"presets": ["env"]
},
"cjs": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
}
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
}
}
}
I run my tests with npm test, which runs this command out of my package.json: "test": "jest --notify".
Locally, everything runs fine and all my tests pass, but when I push to Travis, I get this error: SyntaxError: Unexpected token import. It does not recognize my import statements.
Here is my .travis.yml:
language: node_js
cache:
yarn: true
node_js:
- '8.4'
script:
- npm test
env:
- NODE_ENV: feature/travis
Why is my .babelrc not working on Travis? What am I missing?
This is likely happening because you have defined NODE_ENV: feature/travis in your travis.yml. This will cause Travis to run your tests as NODE_ENV=feature/travis jest --notify.
This generally shouldn't cause concern, but jest will automatically set the NODE_ENV to test if it is not already set.
It could be that you're issue is similar to the discussion taking place over at https://github.com/facebook/jest/issues/3370. There is some contention on whether Jest should be automatically setting the NODE_ENV to test or if it should just use development if no NODE_ENV is present (or just respect whatever NODE_ENV is already set if its set globally).
You can also see this logic in the jest-cli https://github.com/facebook/jest/blob/master/packages/jest-cli/bin/jest.js#L12-L14
So my recommendation is to test this without having your NODE_ENV set in your travis.yml to see if it successfully runs all of your tests.
Related
I am doing a react course on front-end masters,and we had to modify the babel config to allow state instantiations like :state = {index: 0} in class components, however upon running the command: npm install -D babel-eslint #babel/core #babel/preset-env #babel/plugin-proposal-class-properties #babel/preset-react ,and creating a .babelrc file in root-directory and modifying it as such: { "presets": ["#babel/preset-react", "#babel/preset-env"], "plugins": ["#babel/plugin-proposal-class-properties"] }.
I get the following error:
/home/rahat/Documents/react_adopt_me/src/App.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
Duplicates detected are:
[
{
"alias": "/home/rahat/Documents/react_adopt_me/src/node_modules/#babel/plugin-proposal-class-properties/lib/index.js",
"dirname": "/home/rahat/Documents/react_adopt_me/src",
"ownPass": false,
"file": {
"request": "#babel/plugin-proposal-class-properties",
"resolved": "/home/rahat/Documents/react_adopt_me/src/node_modules/#babel/plugin-proposal-class-properties/lib/index.js"
}
},
{
"alias": "base$2",
"options": {
"loose": "#__internal__#babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
},
"dirname": "/home/rahat/Documents/react_adopt_me/src",
"ownPass": false
}
]
I believe this may be a node version issue.
If you want a quick fix then uninstall the plugin-proposal-class-properties via:
npm uninstall #babel/plugin-proposal-class-properties
then disable/delete the plugin in .babelrc:
{
"presets": ["#babel/preset-react", "#babel/preset-env"]
//"plugins": ["#babel/plugin-proposal-class-properties"]
}
clear the cache:
npm run clear-build-cache
Then run the server again.
I am running ava with ts-node with the following config:
"ava": {
"files": [
"tests/**/*",
"!test/exclude-files-in-this-directory",
"!**/exclude-files-with-this-name.*"
],
"failFast": true,
"failWithoutAssertions": false,
"extensions": [
"spec.ts",
"ts"
],
"environmentVariables": {
"NODE_ENV": "test"
},
"require": [
"ts-node/register",
"tsconfig-paths/register"
],
"tap": false,
"verbose": true
}
The problem is that .spec.ts files don't get recognized, as ts-node is doing some kind of conversion (I think) of the .spec.ts files into just .ts, which means that the extension with spec.ts is never matched.
Here's the output of the tests
- graphql › stage-2 › workspace.ts › do later
✔ general › functions.ts › returns proper difference
The files are named workspace.spec.ts and functions.spec.ts
Is there anyway for ts-node to not drop the spec part?
ts-node should only kick in when AVA requires the test file. I can't immediately spot why this isn't working. Are those spec.ts files inside the tests directory?
P.S. NODE_ENV already defaults to test, and you don't need to disable tap either.
I've been working on a PHP project for a while and the client has asked for IE11 support at the last possible minute. HTML/CSS problems I can deal with but my javascript was written modern syntax.
So I install node, take my javascript, run it through Rollup & Babel the first time it's needed and cache the result for future requests.
Now the output lacks the arrow functions that were giving me a headache before but I've got a bigger problem: the polyfills are import statements and IE11 doesn't support import statements.
I feel like I need to emphasise that I'm not running a node server - it's a PHP server, I'm just using node on the backend for rollup & babel. If there's something that node does to make this work I'm not familiar with it.
Here's my rollup.config.js:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import minify from 'rollup-plugin-babel-minify';
export default {
input: '_dud_input.js', // These are set in the exec() call
output: {
file: '_dud_output.js', // These are set in the exec() call
format: 'iife',
strict : false
},
plugins: [
resolve({
browser: true
}),
commonjs({
sourceMap: false
}),
babel({
exclude: 'node_modules/**' // only transpile our source code
}),
minify({
"comments": false
})
]
};
And here's babel.config.js:
module.exports = {
"presets" : [
[
"#babel/preset-env",
{
"targets": {
"browsers": "> 0.5%, ie >= 11"
},
"modules": false,
"spec": true,
"useBuiltIns": "usage",
"forceAllTransforms": true,
"corejs": {
"version": 3,
"proposals": false
}
}
]
]
}
For giggles, here's the shell script I call to run the process:
#!/bin/bash
set -e
# Expected argument values:
# $1 - Path of the root directory
# $2 - Path of the node binary
# $3 - Path of the rollup binary
# $4 - Source file path
# $5 - Destination file path
if [ $# -ne 5 ]
then
exit 99
fi
ROOT_DIR=$1
NODE_BIN=$2
ROLLUP_BIN=$3
SRC_PATH=$4
DEST_PATH=$5
cd ${ROOT_DIR}
${NODE_BIN} ${ROLLUP_BIN} -c ${ROOT_DIR}/rollup.config.js -i ${SRC_PATH} -o ${DEST_PATH}
And it's linked like this:
<script defer="" type="text/javascript" src="http://example.com/site-asset/flatfile.js"></script>
With these settings, my flatfile.js outputs with the following at the top:
import"core-js/modules/es.symbol";
import"core-js/modules/es.symbol.description";
import"core-js/modules/es.symbol.iterator";
import"core-js/modules/es.array.concat";
import"core-js/modules/es.array.filter";
import"core-js/modules/es.array.find";
import"core-js/modules/es.array.for-each";
// ...etc...
Under this setup IE11's console says there's a Syntax error at the first line of every file with the import statements.
Changing useBuiltIns from usage to entry (which I understand means I'm expected to have an entry file elsewhere that adds the polyfills) and including https://polyfill.io/v3/ doesn't do anything (I get errors on Number.parseFloat() calls).
Out of desperation I even added a "core-js" route to my application, which tries to serve up the appropriate core-js file - but there's no indication that IE11 is even trying to follow the require statements.
Looking around the internet it seems like this isn't a problem for anybody else - IE11 apparently works for everybody else?
Maybe it's because I'm not using a node server, but a PHP/Apache one?
I just want the Babel to include the core-js polyfills in my files, not as require statements that IE11 doesn't know how to parse.
I had to disable the babel-minify plugin, but aside from that, copying your configuration seems to work just fine and I get a single bundled JavaScript file with no import statements.
The files are reproduced below, but the full test repo is available at https://github.com/akx/so58712204 – yarn; yarn build and look in dist/...
babel.config.js
module.exports = {
presets: [
[
"#babel/preset-env",
{
targets: {
browsers: "> 0.5%, ie >= 11"
},
modules: false,
spec: true,
useBuiltIns: "usage",
forceAllTransforms: true,
corejs: {
version: 3,
proposals: false
}
}
]
]
};
package.json
{
"scripts": {
"build": "rollup -c ./rollup.config.js -i ./src/entry.js -o ./dist/output.js"
},
"dependencies": {
"#babel/core": "^7.7.0",
"#babel/preset-env": "^7.7.0",
"core-js": "^3.3.6",
"rollup": "^1.26.3",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-babel-minify": "^9.1.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0"
}
}
rollup.config.js
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
export default {
input: "_dud_input.js", // These are set in the exec() call
output: {
file: "_dud_output.js", // These are set in the exec() call
format: "iife",
strict: false
},
plugins: [
resolve({
browser: true
}),
commonjs({
sourceMap: false
}),
babel({
exclude: "node_modules/**" // only transpile our source code
})
]
};
src/entry.js
import { magicNumber } from "./magic";
console.log(new Set([Number.parseFloat(magicNumber)]));
src/magic.js
const magicNumber = "8.82";
export { magicNumber };
One of the main features of StandardJS is that it doesn't require configuration.
The problem is that I want to configure it. I don't want to put:
/* eslint-env mocha */
...in every test file. I want to configure StandardJS to treat everything in the test directory as mocha tests.
I've found in the README that some configuration is possible, e.g.:
{
"standard": {
"globals": [ "myVar1", "myVar2" ]
}
}
...but I'm struggling to find more comprehensive documentation about the configuration options. Is it possible to configure StandardJS to treat files in different directories differently?
You have a couple of options to try out and see what works for your specific project depending on the recent implementation of StandardJS.
Define your own globals
in package.json:
"standard": {
"globals": [
"describe",
"before",
"after",
"beforeEach",
"afterEach",
"it",
"assert"
]
}
or in .eslintrc:
{
"globals": {
"describe": false,
"before": false,
"after": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"assert": false
}
}
More on ESLint's configuration.
Define an environment
in package.json:
"standard": {
"env": {
"mocha": true
}
}
or in .eslintrc:
{
"env": {
"mocha": true
}
}
Check out currently available environments
Run StandardJS as an NPM script with the environment specified
in package.json:
{
"scripts": {
"lint": "standard --env mocha"
}
}
Use a plugin
after installing the plugin (e.g. eslint-plugin-mocha)
in package.json:
"standard": {
"plugins": [
"mocha"
]
}
or in .eslintrc:
{
"plugins": [
"mocha"
]
}
Create your own, customized rules based on StandardJS
Check out this repository. The quick rundown:
Install with:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
Then create a .eslintrc file by extending StandardJS and start to fill with your own rules:
{
"extends": "standard"
}
Since StandardJS uses ESLint under the hood, you can pretty much configure it however you want it using ESLint's documentation.
I have a React project which is running the react-transform-hmr hot module reloader, and all was running fine until I implemented mocha tests.
When I run the tests I get the following error:
throw new 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');
I have googled this, and found some information mentioning moving the hot module reloading setup out of the .babelrc file and into the Webpack config, which I did, and the tests ran fine, but then the Hot Module Reloading wasn't working.
After playing around, and not getting both to work together, I have reverted and thought I would ask for some help as I am truly stuck. Any ideas what I can do?
My babel config is as follows:
{
"presets": ["react", "es2015", "stage-1"],
"env": {
"development": {
"plugins": [
["transform-object-rest-spread"],
["transform-react-display-name"],
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}]
]
},
"production": {
"plugins": [
["transform-object-rest-spread"],
["transform-react-display-name"]
]
}
}
}
And my webpack config is as follows:
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
}
]
}
Thank you :)
Got this working with the following in the package.json:
"test": "export NODE_ENV=testing|| set NODE_ENV=testing&& mocha --compilers js:babel-core/register --require ./tests/test-helper.js \"./tests/**/*#(.js|.jsx)\"",
This was taken from here.