I am using the yo react-boilerplate scaffold for a simple react project where I hope to test out the magic-move component.
When I run gulp dev I am getting the following error message:
Error: Parsing file /Users/Andrew/work/magicmove/node_modules/react-magic-move/modules/components/MagicMove.js: Unexpected token (22:6)
at Deps.parseDeps (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:439:28)
at fromSource (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:378:44)
at /Users/Andrew/work/magicmove/node_modules/browserify/node_modules/module-deps/index.js:372:17
at ConcatStream.<anonymous> (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/concat-stream/index.js:36:43)
at ConcatStream.emit (events.js:129:20)
at finishMaybe (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:460:14)
at endWritable (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
at ConcatStream.Writable.end (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
at DuplexWrapper.onend (/Users/Andrew/work/magicmove/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
at DuplexWrapper.g (events.js:199:16)
I am using a simple require statement like:
var MagicMove = require('react-magic-move');
Any thoughts on where the error is coming from? I'm thinking perhaps it could be a jsx related issue? Do I need something like jsx loader?
Here is the scaffold I am using so that you can look at the gulpfile.. maybe there is something I need to alter here?
https://github.com/mitchbox/generator-react-boilerplate
Thanks.
MagicMove.js has a parsing error on line 22.
MagicMove.js: Unexpected token (22:6)
I would start there.
Probably a jsx error, but it's hard to tell without seeing the code.
Looks like MagicMove.js is written in ES6 so you need something like babel.
Babelify (in case you are using browserify) may help to compile the code.
Related
just starting with react. I have a question about #HostListener from angular. Can I use that in React? If yes, what is the correct syntax?
I tried to check my method, please look at the following snippet:
#HostListener('document:fieldInput', ['$event']);
fieldInput() {
console.log(fieldInput); }
Further I get this error message. Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
I am coding in .js instead of .ts
tried dozens of workarounds now and I am really not able to get it to work.
My Setup is a clean "reactGo"-App ( https://github.com/reactGo/reactGo ) which has Webpack2 included.
Now i am trying to bring react-calendar-timeline ( https://github.com/namespace-ee/react-calendar-timeline ) to life.
Right after doing this, the first error you got is:
D:\Users\Documents\sandbox\reactGo\node_modules\react-calendar-timeline\modules\lib\Timeline.css:1
(function (exports, require, module, __filename, __dirname) { .react-calendar-timeline * { SyntaxError: Unexpected token .
In the reactGo-Repository you can see the full Webpack configuration. As I told, I tried several workarounds, but everything returns in other error-messages.
If I exclude the required css in the calendar-timeline.js directly and import it in my own jsx file, it works of course. But this is a really ugly workaround and I want to collaborate with other developers. Can't told them we have to exlude a require out of an external module.
Can you told me what is going wrong here? I'm out of ideas.
Thanks!
I am migrating an application from Angular1 to Angular2, in which I used the svg.js library to draw an SVG. Some elements of the SVG contained "ng-click" directives, that I made the SVG library print to the final SVG.
That worked alright in Angular1, however, now the directive is called "(click)" and everything breaks. I traced the SVG sources and found that the following call
this.node.setAttribute(attr, value.toString())
results in the following error message:
VM22161:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.(…)
Any ideas to solve that problem? Patching the SVG source would be ok for me, if there's no other way.
A valid and quick workaround is to use the binding syntax of Angular2, that allows to use "on-click" instead of "(click)".
I have an angular app (using AngularAMD/RequireJS) and I'm converting the design to use angular-material. I have a toolbar directive that has md-icon using md-svg-src.
Trouble running the toolbar-directive_test.js file.
At first it kept complaining "Unresolve GET request images/icon.svg". I resolved in the test setup using:
$httpBackend.whenGET(/\.svg$/).respond('');
Now if I run that test file using fdescribe(...) all the tests pass.
But if I run all my app tests (without fdescribe on that toolbar test file), they are somehow failing because of the md-icons. The error I get, which appears on another test file:
TypeError: Cannot read property 'element' of undefined
The stack-trace does not give any guidance on what is causing it. Only mentions angular-mocks.js, and then exits around the any random assertion on this test file where the error is showing. And if I xdescribe this file which is showing the element of undefined error, the next test file is failing with this error instead.
If I use xdescribe on toolbar-directive_test.js file (the one which has the md-icon), all the tests pass.
And if I run all tests including the toolbar-directive_test.js file, but I remove all the md-icon instances from its template, again all the tests are passing.
I have tried including ngMaterial-mocks package in my tests, and that doesn't do anything. But in general, I'm not using that package (but I am using ngMocks).
Any suggestions on how to debug this?
As #Widget suggested, this works:
$httpBackend.whenGET(/\.svg$/).respond('<svg></svg>');
Where this didn't work:
$httpBackend.whenGET(/\.svg$/).respond('');
Has anybody had any luck with using blueimp jquery-file-upload with browserify? I have the following requires in my javascript ...
require("jquery");
require("blueimp-file-upload/js/jquery.iframe-transport.js");
require("blueimp-file-upload");
require("blueimp-file-upload/js/jquery.fileupload-angular.js");
and I get the following error when I use the resulting browserified code...
TypeError: $element.fileupload is not a function
... at the line ...
$element.fileupload(angular.extend(
... inside of jquery.fileupload-angular.js. Without browserify this was working fine. I can't figure out where the fileupload() function is being added to the prototype of the $element.
By request I'm posting what I did here to get around the issue. So technically speaking not an answer but a "work around". As I indicated in my comment above I used gulp-concat along with gulp-uglify to do the minimizing "manually". I say manually because I have to list all of the source files here rather than relying on the requires.
gulp.src([src1, src2, ..., srcN])
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest(outputdir));