I'm trying to import a node module in a custom module i'm creating in public folder.
What i'm doing in webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.js('node_modules/normalize-wheel', 'public/assets')
.version();
In script file
import NormalizeWheel from '../normalize-wheel.js'
the error i'm getting
Uncaught SyntaxError: The requested module '../normalize-wheel.js' does not provide an export named 'default'
How can i import from node_modules folder correctly with laravel mix?
To anyone who has the same question/issue as me, i found an easy solution.
In your app.js file just do
window.NormalizeWheel = require('normalize-wheel');
Webpack via Laravel Mix bundles in up in one file /public/js/app.js which can be attached anywhere.
Related
I am new to Laravel and Vue and trying to include a component in my blade template as below
Below is my app.js
require('./bootstrap');
window.Vue= require('vue');
Vue.component('Home',require('./components/home.vue').default);
webpack.min.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
Home.vue inside resources/js/components/home.vue
<template>
<div class="home">Hello from home</div>
</template>
in my blade template, I have loaded app.js and added component as below
<body class="antialiased">
<Home></Home>
</body>
now when I try to compile npm run dev or npm watch it gives me the following error
ERROR in ./resources/js/components/home.vue 1:0 Module parse failed:
Unexpected token (1:0) You may need an appropriate loader to handle
this file type, currently no loaders are configured to process this
file. See https://webpack.js.org/concepts#loaders
| Hello from home |
webpack compiled with 1 error
can someone please help me to fix the issue?
If you shown the complete home.vue file, the script part with the export is missing:
<template>
<div class="home">Hello from home</div>
</template>
<script>
export default {
name: "Home"
}
</script>
Or it may be also related to this line:
mix.js('resources/js/app.js', 'public/js')
You should try with:
mix.js('resources/js/app.js', 'public/js').vue()
While working with Vue, make sure that following dependencies have been properly installed:
VueJS (of course)
vue-loader (npm i vue-loader)
vue-template-compiler (npm i vue-template-compiler)
You can check those dependencies in your package.json file. If they are not there, then your SFC not going to work.
Export default is not a problem. There are compnents with just template and that's completely fine.
I have a Laravel application. Currently there's a single package.json file in the root of the project that has scripts to build the frontend app.js and app.css as well as backend.
Can I use two different ones that would be in frontend/package.json and backend/package.json so that front-end has only front end related packages and scripts while the backend has only backend related packages and scripts.
Thoughts?
In Laravel5, we have laravel-mix that can help you do that easily. In the root directory of your project, there is a file known as webpack.mix.js, and in it by default there are the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
If you want to have separate js and scss files, just add here. Say you want to add theme.js and theme.scss for the frontend, just include as follows:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/theme.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css');
Of course don't forget to add the corresponding files inside the resources/js (changed from laravel 5.5 onwards) and resources/sass respectively.
Due to security reasons I move all directories and files into a main directory and took out all files/directories from public folder to root of Laravel project. Now I want to npm run dev in order to compile scss files to css and js to js. However each time I run npm run dev it creates a folder named public inside the main folder I had created and put compiled files into that. But I want to put it in root folder which contains: css-js-svg-fonts-index so I changed
This:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
to this:
mix.js('resources/js/app.js', '../../js')
.sass('resources/sass/app.scss', '../../css');
but no result :( it just creates public folder inside main folder that is not the root I want it to be one level upper.
Thanks
I found it :)
mix.setPublicPath('../')
.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
but previously I was wrong with an extra slash which was:
mix.setPublicPath('../')
.js('resources/js/app.js', '/js')
.sass('resources/sass/app.scss', '/css');
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
I'm trying to use webpack with a file from a folder located on Project/app/Dashboard/Resources/scss/main.scss and Project/app/Dashboard/Resources/js/main.js, but I get an error.
I've try:
mix.js('app/Dashboard/Resources/js/main.js', 'public/js/dashboard.js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css/dashboard.css');
-
mix.js('app/Dashboard/Resources/js/main.js', 'public/js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.script('app/Dashboard/Resources/js/main.js', 'public/js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.sass('app/Dashboard/Resources/scss/main.scss', 'public/css/dashboard.css');
So... yes... This is awkward... In one of the .scss files, I had a link to a missing image. Check all the url, they should exist.