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/')
}
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 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 recently started learning nextjs/react and got stuck following the tutorials on the official nextjs website when trying to export my app into a static site:
I'm using sass for styling the app, and when trying to run the npm run build script, it throws me an error saying
Module parse failed: Unexpected token (1:0) You may need an
appropriate loader to handle this file type.
I've checked through my code structure & setup and couldn't figure out what went wrong. It looks like the error has something to do with the sass loader? Any pointers would be greatly appreciated.
below are a few screenshots of my setup.
You need to add sass-loader dependency.
npm i -D sass-loader
and then add it like this:
config.module.rules.push(
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader',
{ loader: 'sass-loader' },
],
},
);
You have two module.exports in your next.config.js which is invalid.
Perhaps try passing the config to withSass and exporting that...
module.exports = withSass({ exportPathMap: /* ... etc ... */ })
I'm building something using the Electron framework. I'm using Vue and SCSS, and I'd like to use Laravel Mix.
However, I can't figure out how to use Laravel Mix without ES6 compilation using babel. Since Electron is running on Node, there is no need to compile to ES5.
Looking through Laravel Mix's API, there seems to be no method that provides this functionality.
I created a .babelrc file with the following contents:
{
"plugins": [ ],
"presets": [ ]
}
However, after running npm run dev, the output file clearly has been transpiled to ES5.
According to line 248 of src/config.js in Laravel Mix's source code, the options taken from .babelrc overwrite the default options defined on line 220.
Laravel Mix Version: 1.7.2
Is there something I'm missing? Or does Laravel Mix simply not support this functionality?
Thanks in advance.
I had similar problem and it wasn't easy to find, but here's the solution:
mix.babelConfig({
only: ["./some-fake-dir"]
})
As the Babel documentation says:
Use it to explicitly enable Babel compilation of files inside the src
directory while disabling everything else.
So by entering some fake dir, you turn off the compilation all together.
More on this option here: https://babeljs.io/docs/en/options#only
I am struggling with webpack. I want to have the compiled files in public-cdn folder. However, the following code creates files in several different locations. Including E:\cdn. Chunks, app.js, css files - everything in different location.
Paths:
main folder: www/Project
laravel public: www/Project/public
cdn folder: www/Project/public-cdn
webpack.mix.js
mix.webpackConfig({
output : {
path : '/public-cdn/',
publicPath : 'http://cdn.ywg.localhost/',
chunkFilename : 'js/[name].js'
},
});
mix.sass('resources/assets/sass/styles.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.sass('resources/assets/sass/invoice.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.js('resources/assets/js/frontApps.js', '../public-cdn/js')
.extract(['vue']);
I tried experimenting with Path and PublicPath parameters. PublicPath doesn't seem to work at all.
After some more experimenting, I think I found a solution. The issue might be caused by laravel mix which set's the "public" folder.
I added:
mix.setPublicPath('public-cdn/');
and it seems to be working well now.