I am using jQuery in my Angular Universal project.
I have installed jQuery and invoked it in angular.json file as follows :
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/tinymce/tinymce.min.js"
]
I have declared the variables in app.component.ts as follows:
declare var $: any;
But when I run the app, I get following list of errors:
ReferenceError: $ is not defined
TypeError: window.matchMedia is not a function
ReferenceError: location is not defined
Everything was working fine in the regular Angular app (without server side), but not working in the Universal app (with server side).
Related
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>
I'm using jquery in angular and it's working but when i have added angular universal i got this error.
angular.json
[
"src/assets/js/jquery-3.6.0.min.js",
"src/assets/js/jquery-ui.js"
]
App.component.ts
declare var $: any;
I am new to Laravel Vue and I recently came to a project. at my localhost everything working fine, but when I pushed my project to the server via git, the Vue components not working. it says this error in the console...
Uncaught SyntaxError: Unexpected token '<' app.js:1
there is no npm install on the server so I run the command locally "npm run production" and pushed the app.js and all other js files via git to the server.. the server files are the same as localhost but Vue components not working on the server, but they are running on localhost..., I am stuck to the problem with 3 days, any help will be highly appreciated.
Thanks
Just for clarity, the CSS file is rendering but the JS file not
In my console:
Resource interpreted as Stylesheet but transferred with MIME type text/html: /rider/auth/public/css/app.css.
Uncaught SyntaxError: Unexpected token '<' app.js:1
So the issue was in the .env file , and there was a variable "ASSET_URL = ./public" , this was not allowing the application to go to the correct path . Thanks #Aless55 for your great support
I made my own NPM package with a Vue component inside. At first I didn't use any building system, it was just a basic package with package.json and an src folder with a single *.vue component file and a main file index.js. I was exporting the component like this in my index.js:
module.exports = require('./TagsInput.vue');
The component worked fine when I installed it into a Laravel project.
Then I decided to use the webpack-simple vue-cli template to be able to build my package into the dist folder and I can't get things to work. The package builds fine when I build it from the package folder. But in Laravel I started getting this error:
TypeError: "exports" is read-only
Then I changed the index.js to this:
import TagsInput from './TagsInput.vue'
Vue.config.keyCodes.backspace = 8;
Vue.component('tags-input', TagsInput);
export { TagsInput }
export default TagsInput
And now I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <TagsInput>
...
I am trying to use Angular as frontend and Laravel as backend and I have created my Angular project with lazy loaded modules and used webpack to do so.
However, when I use my webpack-dev-server the lazy loading works find and when I use my build files and serve using Laravel it throws the error like this
Uncaught SyntaxError: Unexpected token <
Error: Loading chunk 0 failed.
at HTMLScriptElement.onScriptComplete (polyfills.js:104) [angular]
at HTMLScriptElement.wrapFn (polyfills.js:8558) [angular]
at Object.onInvokeTask (app.js:4091) [angular]
The chunk generation works fine. It generates files like 0.chunk.js and on...
Thanks
The other build files used the path to assets,
So added that same path for chunk file generation in the webpack.config.js. I thought the path property used for all the generated file.
the code goes like this.
output: {
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: 'assets/',
path: path.resolve(__dirname, 'assets/')
}