my web pack.mix.js codes are
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
moment: 'moment'
});
mix.js('resources/js/app.js', 'public/js')
.mix.js('resources/js/theme.js', 'public/js')
.mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css')
.sass('resources/sass/admin.scss', 'public/css');
I have this codes in resource/js/theme.js
require('./files/jquery3.3');
require('./files/functions');
require('./files/effect');
I declare some functions in files/functions.js
and use them in files/effect.js
but the browser console gives me this error
Uncaught ReferenceError: 'my_function' is not defined
note: my_function declared in files/functions.js and called in files/effect.js
You need to add file full name i.e. file name + extension
require('./files/jquery3.3.js');
require('./files/functions.js');
require('./files/effect.js');
Related
I'm using laravel and vue , but when i try to load the page, this error appear
app.js:1894 Uncaught ReferenceError: vur is not defined
at Module../resources/js/app.js
my webpack file is:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
my route file is:
import Home from './components/Home';
import About from './components/About';
export default({
mode:'history',
routes:[
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
]
})
Check your app.js and index.js files.You may have spelled vue as vur.It's a typo I think.
In my laravel project I use nwidart.
Each module has its own node_module and webpack.mix.js file. When I run npm run dev on each module, other modules and main vue components does not work and shows this error:
example.js:31589 [Vue warn]: Failed to resolve async component: function () {
return webpack_require.e/* import() */(4).then(webpack_require.bind(null, 44));
}
Reason: TypeError: Cannot read property 'call' of undefined
Here is my Module webpack file:
let mix = require('laravel-mix');
mix.setPublicPath('../../public/');
mix.js(__dirname +'/Resources/assets/js/example.js', 'js/')
.sass(__dirname +'/Resources/assets/sass/example.scss', 'css/');
Main webpack file:
let mix = require('laravel-mix');
require('laravel-mix-merge-manifest');
mix.mergeManifest();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
How can I fix this?
When trying this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass('resources/sass/app.scss', 'public/css/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});
the output from npm is should not contain the item '[...]/app.scss' twice.
How to ouput 2 distincts css from one source as app.scss ?
Instead of injecting your data into the mix call, you need to create a stub scss file for each theme you are creating.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app_red.scss', 'public/css')
.sass('resources/assets/sass/app_blue.scss', 'public/css')
Where those scss files include the base app.scss and overrides that you are injecting with your data value.
Since you are using a different variable values for both css files. You have to call .sass twice but to optimize it further i would suggest you to use variables.
e.g.
const cssSourceDir = 'resources/sass/';
const cssPublicDir = 'public/css/';
const commonSassFile = `${cssSourceDir}/app.scss`;
duplication can be removed like this
mix.js('resources/js/app.js', 'public/js')
.sass(commonSassFile, cssPublicDir+'/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass(commonSassFile, cssPublicDir+'/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});
I haven't touched the webpack since the beginning of my project at all, suddenly I get this error.
I'm trying to load the login page and get this error and nothing loads
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js:64)
at app.js:73038
No idea what this is about, this is my webpack.mis.js
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
})
.version();
I haven't changed anything in my webpack, and it was working before as in showing me the page, all I did was move the User model from app to app/Models and change all the mentions of app/User to app/Models/User.
When I run npn run dev on my Laravel project I get:
Is there any way to change the name of these numbered javascript assets to something unique such as a hash based on contents? They don't seem to have a cache busting hash in the query string when being requested and I have noticed issues from time to time with browsers caching these. Here is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);
This is what I eventually ended up doing and it works well:
mix.webpackConfig({
output: {
chunkFilename: "[name].[chunkhash:8].js",
filename: "[name].js",
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);