Uncaught SyntaxError: Unexpected token <
Iam getting the above error when I am trying to integrate REACT with my existing backbone project. So i follow the **react.backbone** plugin. i included below library in my lib folder and call it in config.js file
"react": "libs/react.min",
"react.backbone": "libs/react.backbone",
"react-dom": "libs/react-dom",
"browser": "libs/browser.min",
Now the below code i add in my backbone view file like below code. But at the time of rendering i am getting the below issue. Could you help me to solve this issue. where i missed what.
'use strict';
define(["jquery",
"backbone",
"common/utils",
"coreModule/views/base.view",'react','react-dom', 'react.backbone','browser'],
function ($,
Backbone,
utils,
BaseView,
React,reactDom,reactbackbone,browser) {
var UserViewComponent = React.createBackboneClass({
render: function() {
return (<div>test</div>);
}
});
var UserView = React.createFactory(UserViewComponent);
var userView = UserView();
// Mount your component directly
React.render(userView, document.getElementById('test'));
});
Thanks in advanced
I've never used React Backbone, but I can see from the GitHub README that the render method is supposed to return JSX, not a plain string.
i.e. Change your render definition to:
render: function () {
return <div>test</div>;
}
Further to that, it's a good idea to follow the advice of the warning and use the non-minified library to help you locate the source of the error.
Related
I am using #googlemaps/js-api-loader in my Nuxt 3 website. Everything works fine in local development, but when I try to build the project with nuxt generate (no matter if locally or on Vercel) I'm getting following error:
[nuxt] [request error] Named export 'Loader' not found. The requested module 'file:///path/to/website/node_modules/#googlemaps/js-api-loader/dist/index.umd.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:
The important part of loading script looks like this:
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: config.googleMapsApiKey,
version: 'weekly',
});
onMounted(async() => {
await loader
.load()
...
so I tried to import this package differently, e.g.:
import * as gmaps from '#googlemaps/js-api-loader';
const { Loader } = gmaps;
and the previous error disappeared, but now I'm getting
[Vue warn]: Unhandled error during execution of setup function
at <DynamicLocations class="contact__map" locations= [
{
id: 1,
...
[nuxt] [request error] gmaps.Loader is not a constructor
at setup (./.nuxt/prerender/chunks/app/server.mjs:5536:20)
at _sfc_main$t.setup (./.nuxt/prerender/chunks/app/server.mjs:5582:25)
at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23)
at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30)
at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17)
at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12)
at ./.nuxt/prerender/chunks/app/server.mjs:5628:36
at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12084:16)
I also can't import package by default export. Do you have any ideas what's going on and how can I fix this?
I found a documentation page related to this problem and there is the following information:
If you encounter these errors, the issue is almost certainly with the upstream library. They need to fix their library to support being imported by Node.
Although they provide a solution to get rid of errors by adding the package to build.transpile:
build: {
transpile: ['#googlemaps/js-api-loader'],
},
It worked for me
I have React.js project that needs to convert to a Next.js
This project has a file data-pulse-provider.js
import { logMessage, } from './helpers';
import $ from 'jquery';
require('signalr');
window.jQuery = $;
var DataPulseProvider = /** #class */ (function () {
//...
}());
export { DataPulseProvider };
Here I am getting an error
Error: jQuery was not found. Please ensure jQuery is referenced before
the SignalR client JavaScript file.
I think this window object is not available all the time in next.js. The solution I found was use dynamic imports with SSR false and then use useEffect to window object-related code. But this is a pure js file hence I can't use the useEffect or something like that. So how can I fix this issue?
Any help!
Thanks in advance.
I have a fresh Laravel 5.8 installation and I would like to include the js modules from MDBootstrap.
In my bootstrap.js file I have:
require('./mdb/modules');
The ./mdb/modules.js file has:
exports.modules = [
'./js/_intro-mdb-pro.js',
'./js/scrolling-navbar.js',
'./js/vendor/jquery.easing.js',
'./js/vendor/velocity.js',
'./js/vendor/chart.js',
'./js/vendor/wow.js',
... 30 more
];
The compilation works ok, but of course, it doesn't take any effect from these modules include.
I don't know how to include all of them at once as they are not looking like a regular module so I can import like 'import * from 'my-module'
I also tried the ES6 way:
import * as MDBootstrap from './mdb/modules';
but I got the same result: successful compilation without including them into the compiled js file.
The content of these 'modules' doesn't seem to look like a normal module where we export default {} or some other functions or variables. It looks like:
//mdb/js/scrolling-navbar.js
"use strict";
(function ($) {
var SCROLLING_NAVBAR_OFFSET_TOP = 50;
$(window).on('scroll', function () {
var $navbar = $('.navbar');
if ($navbar.length) {
if ($navbar.offset().top > SCROLLING_NAVBAR_OFFSET_TOP) {
$('.scrolling-navbar').addClass('top-nav-collapse');
} else {
$('.scrolling-navbar').removeClass('top-nav-collapse');
}
}
});
})(jQuery);
Even 'exports.modules = [..]' is not familiar to me. I know about 'module.export = ...' but this 'exports' looks like it's a Node.js object.
I know there's also another method to include the dist version of the plugin. I also tried it, but I got some errors: 'Identifier '_classCallCheck' has already been declared'. I looked deeper and I found that actually many of those files are declaring the '_classCallCheck' function and of course that it a redeclare error. Maybe I can refer to this particular error directly to them (MDBootstrap).
So here I am, trying to include and use these modules/files in my Laravel project without success. Any help is appreciated.
I am once again puzzled by Javascript. I am using Systemjs as a module loader and have a class as follows:
export default class Tool{
constructor(state, displayText) {
this._state = state;
this._displayText = displayText;
}
get displayText() {
return this._displayText;
}
get state() {
return this._state;
}
}
I am using this class in a unit test (Karma/Mocha/Chai) as follows:
'use strict';
import Tool from '../core/model/framework/Tool';
import chai from '../../../jspm_packages/npm/chai#3.5.0';
chai.should();
describe('MenuProvider', () => {
describe('registration', () => {
it('should register a new Workbench Module', ()=> {
let tools = [];
debugger;
tools.push(new Tool('Pink Fuzzy Bunnies', 'bunnyState'));
tools.push(new Tool('Look no hands', 'nohandsstate'));
let toolboxes = [];
toolboxes.push(new Toolbox('My Shiny New Toolbox', tools));
let newModule = new WorkbenchModule('My Module', toolboxes);
let providerUnderTest = new MenuProvider();
providerUnderTest.loadModule(newModule);
provider.modules.count.should.equal(1);
provider.getModule('My Module').should.not.be.null;
});
});
});
When I hit the debugger statement Tool is undefined. I am pretty sure I have jspm configured properly for my Karma test. I can see that every file is loading correctly when I debug the Karma test.
Is there something I am missing? I would just like to be pointed in the right direction. Let me know if I need to add more of my code or config.
You aren't exporting your class. Add this to the bottom of your Tool file:
export default Tool;
I was in fact exporting my class on the first line. The problem turned out to be related to the fact that Javascript does not hoist classes. Basically the tests were trying to use the classes before they were loaded by Karma and JSPM. I was able to resolve the issue by explicitly loading the files by adding the following to my config file:
jspm: {
config: 'jspm.conf.js',
loadFiles: ['src/app/angular-bootstrap.js', 'src/app/core/model/**/*.js', 'src/app/**/*.spec.js'], //'src/app/**/!(*.e2e|*.po).js'
serveFiles: ['src/app/**/*.+(js|html|css|json|*jade*)'] // *.{a,b,c} to *.+(a|b|c) https://github.com/karma-runner/karma/issues/1532
}
This is what did the trick: 'src/app/core/model//*.js'
Just as a tangential note. I also had fits over why Karam was not loading my Jade files so I could import them using JSPM. All I had to do was add the .jade extension to the list of file types being served up by Karma.
Such as a strange and wonderful world this Javascript stuff is!
Currently in the process of building a web app using ReactJs and the Fluxible architecture. While trying to integrate the React-daterangepicker module into my project, I have encountered the following error of which I cannot trace the origin.
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
Here's my DatePicker Component, I have followed the github demo and done exactly the same steps.
'use strict';
var React = require('react/addons');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
import DefaultMixin from '../mixins/DefaultMixin';
module.exports = React.createClass({
mixins: [DefaultMixin],
render() {
return (
<DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
<div>Click Me To Open Picker!</div>
</DateRangePicker>
);
}
});
What could be causing this error? Googling it gave no result and I've been struggling with it for the past hours.
It seems like the react-bootstrap-daterangepicker module needs jQuery to be available globally as $. Try including jQuery on the page before you load the module.
TL;DR: this isn't a react problem, you need to load jQuery BEFORE loading your react files.
Lets deconstruct your error message:
$.fn.daterangepicker = function(options, callback) {
^
TypeError: Cannot set property 'daterangepicker' of undefined
at /Volumes/DATA/Projects/deeplinq/node_modules/react-bootstrap-daterangepicker/lib/daterangepicker.js:1360:26
I'm mostly interested in the first part Cannot set property 'daterangepicker' of undefined...
This is happening because $.fn is returning undefined.
Try This:
immediately before you require react, you should require jquery:
var $ = require('jquery');
var React = require('react/addons');