I am trying to use #yaireo/tagify in my Laravel 9 project. (https://www.npmjs.com/package/#yaireo/tagify)
I imported it with npm i #yaireo/tagify --save
Then put import Tagify from '#yaireo/tagify' in my app.js file, then ran npm run build on my project.
I can verify the code gets added to the project as it appears in my previously empty app.abc123.js file by looking at the sources within Chrome. The file looks compressed / optimized which I expect to happen.
However, I get this error in the console jquery-3.6.1.min.js:2 Uncaught ReferenceError: Tagify is not defined
I've also tried copying the jQuery.tagify.min.js file to /resources/js/jQuery.tagify.min.js and then using #vite(['resources/js/jQuery.tagify.min.js']) within the blade template, then npm run build to build the files. Again this works, and the file is included in the sources, but the exact same error.
The only way I were able to get it to work without the error was by copying jQuery.tagify.min.js directly to /public/build/assets/jQuery.tagify.min.js and using <script type="text/javascript" src="/build/assets/jQuery.tagify.min.js"></script> in the blade template.
This says to me that vite seems to be doing something when it's trying to compress/optimise the file that breaks the functionality.
I recall running into the same issues with bootstrap and JQuery and ultimately decided to reference the CDN for those files.
This is the raw jQuery.tagify.min.js file: https://pastebin.com/PzK7ps25
This is the file after being processed by vite / npm run build: https://pastebin.com/1FCDXyty
What am I doing wrong?
Edit:
Not that it should have any bearing on the issue, the code I am using within the blade template is:
<input name='basic' value='tag1, tag2, group 3, etc...'>
<script>
$( document ).ready(function() {
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input)
});
</script>
Related
I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:
TS2503: Cannot find namespace 'WebDataRocks'.
I tried several stuff, but I still receive the error. The only things that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.
My guess is the file should be tsx not ts. But, again I can't change the modules.
Any thoughts?
I kindly suggest creating a new project and embedding WebDataRocks to check how modules should be imported.
Here is a short guide:
If you don’t have a React+TS application yet, create one by running this command in the console:
npx create-react-app my-app --template typescript
cd my-app
Get the WebDataRocks React module from npm:
npm install react-webdatarocks
Add WebDataRocks’ styles to the src/index.tsx file:
import 'webdatarocks/webdatarocks.css'
Import the WebDataRocksReact module to the src/App.tsx file:
import * as WebDataRocksReact from 'react-webdatarocks';
Open src/App.tsx and add WebDataRocks there using the WebDataRocksReact.Pivot component:
function App() {
return (
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
);
}
Run your application:
npm start
Open http://localhost:3000/ in the browser — WebDataRocks is embedded into your React+TS project.
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
(Disclaimer: I'm not very proficient in Vue)
What is the correct way to import/include a Vuejs package in my project? I somehow seem to not be able to import a file.
I'm trying to import this package: https://github.com/sagalbot/vue-select
What I have done so far:
Ran the command: npm install vue-select
Tried adding the vue-select package to my Vue like so (in
resources/assets/js/app.js):
import vSelect from './components/Select.vue'
Vue.component('v-select', vSelect);
Now when I use the v-select in my HTML file it gives this error in console: [Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What I've tried to fix this:
Instead of using this in app.js I used it in my *.vue file, I don't use webpack/browserify I think, so import doesnt work :/ I prefer not to use browserify.
I have vue-resource package aswell and that created a vue-resource.js file in my public/js directory which I can import to use vue-resource. It seems like vue-select doesn't create its own vue-select.js file.
If you have any suggestions, please let me know.
I have looked at this question: Import vue package in laravel but I don't understand what paths and files the lines should be added to.
I think this is hust your import statement. If you have installed it through npm, then you should import from vue-select. Also, use require instead of import, This way:
Vue.component('v-select', require('vue-select'));
You may want to use it only in your Vue component, then you should load your own component as explained above, And in your own vue component say VueSelect.vueuse this:
<template>
<!-- use it with name 'v-select' in your component -->
<v-select></v-select>
</template>
<script>
export default {
...
components: { vSelect: require('vue-select') },
...
}
</script>
Then you can register your own component a s global,
Vue.component('vue-select', require( './components/VueSelect.vue') );
And use it in your root component:
<vue-select></vue-select>
Update
If you are using laravel, it gives you laravel mix out of the box which compiles down your assets using webpack. All you need to do is run a compile script:
npm run dev
If you are making changes to your js files, you wouldn't want to run this over and over, so you can run watch command:
npm run watch
If this doesnt work for you, try watch-poll instead. Als, make sure you have installed all dependencies first:
npm install
I am trying to figure out laravel for a small project I am working on.
I want to load a js file on a particular view(not the entire app) so I have created a client.js file in resources/assets/js
In the view --
<script src="{{ mix('js/client.js') }}"></script>
in webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js', 'resources/assets/js/client.js')
And run npm run dev which doesn't return any errors.
However when I try to load the view in question I get the error --
Undefined index: /js/client.js (View: /var/www/resources/views/devices/search.blade.php)
What am I doing wrong/ missing?
mix.js(from, to) expects 2 arguments. The file to transform and location where to transform it to. So the resources/assets/js/client.js isn't transforming anywhere.
You probably want to do this:
mix.js('resources/assets/js/app.js', 'public/js/app.js')
.js('resources/assets/js/client.js', 'public/js/client.js)
I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.
I am using Laravel v5.4 and NPM v5.3.0
I want to use the Sweet Alert library and so did
npm install sweetalert
which placed the files in the node_modules directory and package.json as expected
This is where the confusion begins. I then did
npm install --no-bin-links
(the no-bin-links flag recommended for Windows hosts by the docs)
and
npm run dev
thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.
The output states:
DONE Compiled successfully in 8551ms
which suggests to me that I have simply failed to include the Sweet Alert library in this process.
PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:
jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined
I have also tried "require"-ing the library in bootstrap.js, stating:
window.swal = require('sweetalert');
or simply
swal = require('sweetalert');
Where 'sweetalert' again is suggested by the IDE autocomplete.
Here is how I attempted to use it:
$( document ).ready(function () {
alert("Hello!"); //works
swal({
title: "Hello!",
text: "Hellooo",
type: "error",
confirmButtonText: "OK THEN"
});
});
Which throws the error mentioned above.
I also tried initializing using
window.swal({...
sweetAlert({...
which fail.
What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?
Any help is greatly appreciated.
You need to add a reference to your sweetalert vendor file in your webpack.js config file.
mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');
That will copy it from your vendor folder to your public folder when you run
npm run dev