I have to include https://www.npmjs.com/package/vue2-daterange-picker in my project made with Kendo, Vue, .Net, Angular and jQuery(Yes it's a lot).
<script src="https://unpkg.com/vue2-daterange-picker#0.5.1/dist/vue2-daterange-picker.umd.min.js"></script>
I am including it via this in my scripts and when I try to use, it throws error Uncaught ReferenceError: DateRangePicker is not defined.
I have even declared it in my js file
Vue.component('date-range-picker', DateRangePicker)
How to resolve this?
I am also using bundles.Add(new ScriptBundle()) but I am unable to add the dependency through that also.
As the documentation says. This script is installed via npm or yarn which means you need some kind of bundler, like webpack to build your dependencies and your scripts (e.g. into one file).
Fact that you're using jQuery, KendoUI, Vue and Angular and not using any bundler is a little weird. It seems that if you want to use vue2-datepicker-range you'll need to use bundler of some sort.
Related
I have created some functionality in my Laravel 5.4 project which I think will be useful in other projects. To make it reusable, I've implemented it as a Laravel Package (following instructions here: https://laravel.com/docs/5.4/packages)
The package defines some views, and the views require some javascript, and this javascript requires jQuery.
So how can I set things up so that the scripts get executed when my views are rendered?
The Laravel documentation describes how to use the service provider's publish() method in order to have package scripts copied to the public directory (https://laravel.com/docs/5.4/packages#public-assets). But does this assume the scripts are already compiled / minified? And once they're in the public directory, how should we load them? And how do we handle script dependencies (in my case jQuery)? We don't want it being included more than once.
And where does Laravel Mix come into this?
I think ideally we should to be able to put the javascript source code somewhere in the package:
require('jquery');
// do things with jquery
Then when I run npm run dev (or npm run production) the package javascript is compiled by Mix along with the app javascript and all their dependencies, and the end user's browser just needs to download app.js.
Can anyone suggest how to accomplish this?
Or if I'm going about this all wrong, then can anyone suggest how to do this the 'right' way?
I am using Reactjs.NET within an MVC 5 project,
We have been able to combine Webpack with reactjs.net, but currently we are running into issues using external modules, for example (material-ui) within our react components directory. Since reactJs.NET doesn't support import we are trying to include those in the JSX components using the require statement, however we are getting a Script threw an exception: 'require' is undefined
any idea how we can include some of the modules that we have in our webpack bundle inside our jsx component?
this issue sounds like exactly what you're experiencing.
assuming you've gone through this page then maybe the problem is related to having npm installed webpack 2 which uses a different config. check out webpack's migration guide for info on that.
The tutorial I was following, used jQuery inside typings folder used
/// <reference path="../typings/tsd.d.ts" />
inside app.component but did not work.
Tried import the library in side index.html through CDN, then use
declare var $:any; still not working
Installed jQuery through NPM and it to path inside system.config.ts like the following
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js'
},
still no clue
Update:
Now I installed angular via angular-cli. I do not 404 error, but the app still not working. It is supposed to output the keyup in the console
https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview
You mentioned you were just using a tutorial, so, not attached to the SystemJS config itself.
If you are using the Angular CLI instead (my personal recommendation), you can do it as follows:
Install jQuery, the actual library
npm install jquery --save
Install jQuery TypeScript autocomplete
npm install #types/jquery --save-dev
Then go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, add this inside it:
"../node_modules/jquery/dist/jquery.min.js"
(or use the slim version if that's your cup of tea, keep the rest of the path as-is)
After that, jQuery will be available for you as a global variable. You can log jQuery.fn.jquery (which brings jQuery's version) to ensure it's working brilliantly.
P.S.
If you want to use Webpack directly, or gulp, we need to see a sample of your config file, or which project seed did you used to create the project (applicable to Webpack and Gulp projects).
Jquery is awesome when you want to just do a simple DOM manipulation, i feel its one of the major drawbacks for Angular, simple DOM accessing in one line would be great. Here ya go. Load Jquery in your index.html file. Also you need to include the definitions file to get the Jquery functions to work inside typescript functions.
<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script>
I am new to Javascript and am interested in using a library from github. I am using netbeans to code and I have installed node.js. However, I am still getting the error 'Require is not defined'. I have installed 'browserify' as this seemed like a common solution, but I am still getting this error.
Am I doing something wrong?
Image of set up libraries
Update
I have also found that there is a problem with one of my libraries, think it could be relevant to the original problem.
Problem with library
If you are developing NodeJS based project, you should use NodeJS project type in NetBeans where require() is considered as known global function and as such NetBeans won't show the hint.You can change your current project to enable NodeJS support by right clicking on the project, select Project Properties -> NodeJS and check Enable NodeJS support.
If you are using RequireJS library, you can also enable RequireJS support in Project Properties in JavaScript Frameworks -> RequireJS
I guess this is because require() does not exist in the browser/client-side JavaScript.Can you give it a try to following statements;
Use <script> tag.
Use a CommmonJS implementation. Synchronous
dependencies like Node.js
Use an AMD implementation.
And keep library codes and application codes seperated. ( bundle.js and script.js )
Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.
I'm trying to build the material-ui (material-ui.com) javascript so that I can include it in my project and use the react components. I've been using browserify to bundle all the javascript into a single file, which I then include in my HTML file. So, in the material-ui/lib directory (which is where the JSX-transformed JS seems to live -- I'm very new to NPM bundles + browserify etc), I run
browserify index.js -o material-ui.js -r material-ui
I then include that material-ui.js file in my HTML.
But then when I try writing require('material-ui') in my javascript in the HTML page I get "Cannot find module 'material-ui'".
I don't really understand what browserify is meant to be doing, what the require function is doing, and how I'm meant to reference any of the material-ui react classes. Thanks!
So I just managed to solve this. Browserify was creating a require() function but not the material-ui module because I was calling it from the wrong directory. Calling it from the npm's module root without specifying a starting .js point somehow made it actually work, allowing me to use require('material-ui') without any errors.