I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
Related
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'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
Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.
npm run dev
Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.
src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:
$icon-font-path = "../fonts" - but npm gives error.
By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"
Copied fonts folder inside puclic/css folder, didn't work.
Added options to the webpack.mix.js file:
options({processCssUrls: false})
and in _variables.css again set:
$icon-font-path = "../fonts"
Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.
Also, I followed this question, but couldn't find any answer, all solutions didn't work.
glyphicons not showing with sass bootstrap integration
Finally, found the solution. In webpack.config.js set:
publicPath: '../'
instead of Mix.resourceRoot
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: Mix.resourceRoot
}
},
Is there actually a Jade template engine for Laravel5?
Jade code would be much easier to develop with, and - it would produce a compact HTML code.
I am new to Laravel since today, figuring out the same question you have.
I think there are two different approches:
Compiling via build tools
First you could use npm, gulp and elixir - witch both come with Laravel.
Therefore you have to have npm and gulp installed (I assume you already have).
Use the laravel-elixir-jade module via
npm i --save-dev laravel-elixir-jade
After adding a couple of lines in your gulpfile you can run the default task via
gulp
Here is an example of an elixir function inside the gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-jade');
elixir(function(mix) {
mix.less('app.less')
.jade({
baseDir: './resources',
blade: true,
dest: '/views/',
pretty: true,
search: '**/*.jade',
src: '/jade/'
});
});
Dont forget the require('laravel-elixir-jade'); at the beginning.
Compiling at server-side
You also have the possibility to let the PHP-Server render your jade files while rendering the page. I have created a package called mhochm/laravel-jadephp could be the right module for you.
I promise:
Create views as always but in Jade syntax
Require this package with composer:
composer require mhochm/laravel-jadephp
Add the ServiceProvider to the providers array in config/app.php:
'mhochm\LaravelJadePHP\LaravelJadePHPServiceProvider',
I hope this will help you :)
Moses