`Invalid mapping` error trying to use babel require hook and polyfill with react jsx transpile - source-maps

I'm trying to use babel for both ES6 and JSX transpilation for mocha tests.
Suppose we have test.jsx like this:
var React = require("react");
React.createClass({
render: function(){
return (<div>Hello World</div>);
}
});
Running babel test.jsx gives us valid transformed code. No problem.
I would expect that if I create a test.js file like this:
require("babel/register");
require("./test.jsx");
And then run node test.js, it would transpile my jsx for me in line, but instead I get an error:
c:\Users\user\dev\app\node_modules\babel\node_modules\babel-core\lib\babel\t
ransformation\file\index.js:628
throw err;
^
Error: c:/Users/user/dev/app/test.jsx: Invalid mapping: {"generated":{"line"
:6,"column":11},"source":"c:/Users/user/dev/app/test.jsx","name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (c:/Users/user/dev/app/node_modules\babel\node_modules\source-map\lib\source-map\source-map-
generator.js:275:15)
at SourceMapGenerator_addMapping [as addMapping] (c:/Users/user/dev/app/
node_modules\babel\node_modules\source-map\lib\source-map\source-map-generator.j
s:105:14)
at SourceMap.mark (c:/Users/user/dev/app/node_modules\babel\node_modules
\babel-core\lib\babel\generation\source-map.js:65:9)
at CodeGenerator.print (c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:236:16)
at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
at CodeGenerator.ReturnStatement (c:/Users/user/dev/app/node_modules\bab
el\node_modules\babel-core\lib\babel\generation\generators\statements.js:120:13)
at CodeGenerator.print c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:238:22)
at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
at CodeGenerator.printJoin (c:/Users/user/dev/app/node_modules\babel\nod
e_modules\babel-core\lib\babel\generation\index.js:286:13)
at NodePrinter.sequence (c:/Users/user/dev/app/node_modules\babel\node_m
odul
es\babel-core\lib\babel\generation\node\printer.js:23:27)
According to the docs, it looks like this should work. Am I missing something obvious, or should I report this as a bug in babel?

This was a bug in acorn-jsx, the JSX parser that Babel uses. The recommended fix would be:
rm -rf node_modules/babel && npm install

Related

Error on color substraction on build after laravel-mix update to 4.0.12

I noticed that sass build fails on color substraction after update to laravel-mix#4.0.12
My code in app.scss
.footer {
background-color: #fefefe - #a0a0a0
}
My webpack.mix.js
const mix = require('laravel-mix');
const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';
mix
.sass(`${resourcesAssets}scss/app.scss`, `${dest}css`);
On laravel-mix#1.7.2 running npm run prod works properly, but now I got next error
ERROR Failed to compile with 2 errors22:16:34
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Undefined operation "#fefefe - #a0a0a0".
background-color: #fefefe - #a0a0a0
^^^^^^^^^^^^^^^^^
stdin 2:23 root stylesheet
in C:\xampp\htdocs\laravel-test-mix\resources\sass\app.scss (line 2, column 23)
at runLoaders (C:\xampp\htdocs\laravel-test-mix\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\xampp\htdocs\laravel-test-mix\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at render (C:\xampp\htdocs\laravel-test-mix\node_modules\sass-loader\lib\loader.js:52:13)
at Function.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:25378:48)
at vB.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:16223:16)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5284:51
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
at tz.vd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9277:32)
at ic.uo (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8583:46)
at t6.$0 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8728:7)
at Object.eu (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1569:80)
at aj.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8646:3)
at is.bd (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8576:25)
at is.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8563:6)
at oy.cF (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8350:35)
at Object.o (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1442:19)
at C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:5835:52
at w0.a (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:1453:71)
at w0.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8365:23)
at uC.$2 (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:8360:25)
at tz.ve (C:\xampp\htdocs\laravel-test-mix\node_modules\sass\sass.dart.js:9275:42)
How can I fix this problem without setting up previously calculated value?
Color arithmetic was deprecated in dart-sass 4.
They recommend you (in a harsh way) to use color functions.
I rather like this color functions visual summary. You are probably looking for darken(color,%) in your code.

`Tslint --fix` does not autofix but instead generates lint problems as console errors

I'm using the Angular starter kit
and I'm trying to get tslint to autofix all my lint problems with the --fix flag.
I'm running the script:
npm run tslint --fix src/**/*.ts
It just generates the same error that I'm already being told about in tslint and not autofixing it:
console output:
ERROR: src/app/app-routing.module.ts[10, 5]: comment must start with a space
ERROR: src/app/app-routing.module.ts[2, 20]: Too many spaces before 'from'
Am I missing something that allows it to implement the changes?
My versions are:
"tslint": "^5.6.0"
"codelyzer": "^3.1.2"
Question: How can I get tslint to implement autofix to my lint errors?
Unfortunately, not all linting violations are auto-fixable. You can see which rules are auto-fixable here by looking for the Has Fixer tag.
My guess is that "comment must start with a space" is governed by the comment-format rule, which is not auto-fixable.
I'm not sure which rule is causing your second error, but it is most likely also not auto-fixable.
Here's a snippet you can run tslint --fix against to verify that some violations are fixed, and others are not.
//no var keyword (comment does not start with space)
var x: string = 'x';
console.log(x);
// array-type
let y: String[] = [];
console.log(y);
// ban-single-arg-parens
['1', '2'].filter((arg) => {
console.log(arg);
});
// semicolon
let z: string = ''
console.log(z);
// no unused variable
let a: string = '';
// trailing comma
let list = ['1', '2', ];
// missing trailing comma
let obj = [
1,
2
];
Rules to include when linting the above file:
"semicolon": [true, "always"],
"trailing-comma": [true, {"multiline": "always", "singleline": "never"}],
"array-type": [true, "array-generic"],
"arrow-parens": [true, "ban-single-arg-parens"],
It's tempting to think that all whitespace errors would be auto-fixable, and perhaps they should be. Sadly, they're not.
Update library tslint and codelyzer to latest.
and then use this command:
tslint --fix src/**/*.ts -t verbose without using npm run
after complete, it will show to you the unfixable problems so you have to fix it manually.
You can also add it to scripts in package.json like this:
"lint-fix": "tslint --fix src/**/*.ts -t verbose"

Gulp error: Path must be a string

I've got a problem with gulp.js.
Steps to reproduce:
$ composer global require "laravel/installer=~1.1"
$ laravel new myproject
$ cd myproject
$ php artisan serve
$ npm install
$ npm rm bootstrap-sass —save
$ npm install foundation-sites —save
$ npm install motion-ui —save
then I copy
_settings.scss
from
node_modules/foundation-sites/scss/settings
to
resources/assets/sass
in app.scss then i put every Foundation import
and finally I write Elixir task as reported here:
http://zecipriano.com/en/2015/12/laravel-elixir-and-zurb-foundation-revisited/
But when I launch gulp from terminal:
path.js:7
throw new TypeError('Path must be a string. Received ' + inspect(path));
... don't know what to do.
Everything updated, so I think it's not a version problem.
[EDIT]
$ node -v
v6.8.0
and here's my gulpfile.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
// Sass
var options = {
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
]
};
mix.sass('app.scss', null, options);
// Javascript
var jQuery = '../../../node_modules/jquery/dist/jquery.js';
var foundationJsFolder = '../../../node_modules/foundation-sites/js/';
mix.scripts([
jQuery,
foundationJsFolder + 'foundation.core.js',
// Include any needed components here. The following are just examples.
foundationJsFolder + 'foundation.util.mediaquery.js',
foundationJsFolder + 'foundation.util.keyboard.js',
foundationJsFolder + 'foundation.util.timerAndImageLoader.js',
foundationJsFolder + 'foundation.tabs.js',
// This file initializes foundation
'start_foundation.js'
]);
});
Any ideas?
Thank you in advance.
The problem is that the options have been moved from the third to the fourth parameter. You can run it with:
mix.sass('app.scss', null, null, options);
Cheers :D
I have the node 4.4.2 installed and countered the same error. Then I passed the the directory string directly instead of using an array with directions.

Mocha test failing using babel and webpack

So I am using webpack, babel, and mocha here. When I have code like this:
import userImage from '../../images/user.png';
and I build with webpack, userImage results in a string to the path of the file since I am using the file loader for images (requirements call for me not to embed images) however when I try to run my mocha tests using:
./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha
I get a syntax error:
SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0)
> 1 | �PNG
| ^
2 |
3 |
I also get this error when removing istanbul. So it seems like it is trying to load the actually image file however can parse it as JavaScript since it is not.
Anyone know a way around this issue?
You can use the --compilers option which allows you to customize the nodejs require system in order to let it understand png files. So :
mocha --compilers png:./mochacfg.js
Or create a file 'test/mocha.opts' containing (better for your needs):
--compilers png:./mochacfg.js
With ./mochacfg.js:
require.extensions['.png'] = function(){ return null; }
This ignores png files (should be ok if you do nothing special with them).
If you want to do something with the image data:
var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
var src = fs.readFileSync(filepath).toString ('base64');
return module._compile('module.exports = "data:image/png;base64,' + src + '";');
}
Its quite late to answer this question but just for knowledge sharing purpose, I am answering another approach to do this.
Create a test-config.js file and use it while running the mocha test cases.
var jsdom = require('jsdom').jsdom;
process.env.NODE_ENV = 'test';
// -------------------------------
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});
and inside package.json use this test command to run the test cases
"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",
I hope it helps someone.

Grunt autoprefixer error when using #extent in scss file

Error:
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/documentation.css created.
Warning: Can't parse CSS: Missing property value at line 66:21 in .tmp/styles/main.css Use --force to continue.
Line 66 points to the following code:
Source:
span {
#extent .md-body-1;
}
p {
#extent .md-body-1;
}
I can't extent a tag in scss? Or is a autoprefixer issue?
you need to use #extend not #extent

Resources