I am facing a strange error which I can't get resolved after googling and poking around.
So in my main.js, I have
import $ from 'jquery';
Loading my dev.html all works fine, but after running nmp run build, and loading index.html, I get
steal.production.js:11 ReferenceError: jQuery is not defined
at eval (jquery.dotdotdot:3)
at Function.eval (app.js:3)
So I also added
import jQuery from 'jquery'; -> no result
Loading jquery directly in my index.html removes the error but just leads to other issues down the road. So I think I should get this fixed to get my deployment done.
Many thanks for your support.
Nada
Found the error, package.json pointed to a test.js file.
Related
I am a beginner at three.js and I am following everything it says in the tutorial I am following (https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho&index=1) I have installed parcel with "npm install parcel -g", and I have installed three.js with "npm install three" and my code editor (Brackets) is throwing two errors for the code "import * as THREE from 'three';".
Under JSlint it says "Expected an identifier and instead saw 'import'." and under ESlint it says "ERROR: Parsing error: The keyword 'import' is reserved"
I copied the code in the tutorial exactly as it said, and it's still throwing those errors. weird
And in index.html I tried making the script tag have type="module" and without it having that, and it still doesn't work.
Maybe it's because I'm not using Visual Studio?
Thanks!
I'm three.js developer, too.
Perhaps do you miss following section?
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.148.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three#0.148.0/examples/jsm/"
}
}
</>
If it's wrong, contact me.
Thanks.
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>
(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 using Symfony 2.8.18. I was always able to debug the previous error messages I had. I searched on Google for same errors but I did not find anything. Everything worked perfectly before. I restarted my local server and get the following error message:
Warning: class_implements(): Class �]� does not exist and could not be
loaded
Here is a link to the screenshot of the message: strange bug screenshot.
I deleted the cache by removing the corresponding folders and by using the following command:
php app\console doctrine:cache:clear-metadata && php app\console doctrine:cache:clear-query && php app\console doctrine:cache:clear-result
But it did not solve my problem. I do not know how to understand this error message.
Do you have any ideas on how to debug the code?
I did not change anything but it seems one or several files were corrupted. The solution was to:
Remove the vendor folder;
Run composer install.
My problem was solved by doing this.
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4