I'm creating an SPA with Laravel and Vue and am trying to use vue-pdf. I've successfully integrated several npm packages, but this one is giving me the error:
Uncaught SyntaxError: Unexpected token '<'
When I click on the file (worker.js) in my console, it looks like it's trying to perform a get request for a regular page on my site instead of grabbing the javascript so my hunch is that webpack isn't correctly transpiling vue-pdf. My current webpack config is:
const path = require('path')
const fs = require('fs-extra')
const mix = require('laravel-mix')
require('laravel-mix-versionhash')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
mix
.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css')
.sass('resources/sass/flowy.scss', 'public/dist/css')
mix.babel([
'resources/js/helpers/Date.js',
'resources/js/helpers/LoginRedirect.js'
], 'public/assets/js/combined.js')
.disableNotifications()
if (mix.inProduction()) {
mix
// .extract()
// .version()
.versionHash()
} else {
mix.sourceMaps()
}
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/js')
}
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build')
}
})
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAseets())
}
})
function publishAseets () {
const publicDir = path.resolve(__dirname, './public')
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'))
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
fs.removeSync(path.join(publicDir, 'build'))
}
Any help would be appreciated.
Related
I need help in running my Vue spa in the same domain as my laravel app , when running "npm run serve" in terminal I think it's working but when I go to the browser it's refusing connection. I haven't done the backend which I will use sanctum for handling API. Has anybody here have the same project working on like me? love to make conversations to solve this.
Thanks in advance
here is the vue.config.js file
const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')
function resolve (dir) {
return path.join(__dirname, dir)
}
/**
* check production or preview(pro.loacg.com only)
* #returns {boolean}
*/
function isProd () {
return process.env.NODE_ENV === 'production'
}
const assetsCDN = {
css: [],
// https://unpkg.com/browse/vue#2.6.10/
js: [
'//cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/vue-router#3.1.3/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/vuex#3.1.1/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/axios#0.19.0/dist/axios.min.js'
]
}
// webpack build externals
const prodExternals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
// vue.config.js
const vueConfig = {
configureWebpack: {
// webpack plugins
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// if prod is on, add externals
externals: isProd() ? prodExternals : {}
},
chainWebpack: (config) => {
config.resolve.alias
.set('#$', resolve('src'))
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
// if prod is on
// assets require on cdn
if (isProd()) {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
},
css: {
loaderOptions: {
less: {
modifyVars: {
// less vars，customize ant design theme
'primary-color': '#00B4E4',
// 'link-color': '#F5222D',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
}
},
}
if (process.env.VUE_APP_PREVIEW === 'true') {
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}
module.exports = vueConfig
module.exports = {
devServer: {
host: 'app.paymate-ui.test'
}
}
If I understand you correctly, you want to use Laravel and Vue.js together in the same application folder?
Should be pretty easy then.
First off, build your application with Vue scaffolding for the frontend.
Then, make a route that redirects everything to a single controller method that returns a spa view. (Or use a closure)
In this view, include your app.js as an asset and include the main Vue component (something like <app></app>).
Then build your Vue app. All requests will now be forwarded to the spa view, which includes your app.js, which should bootstrap Vue.
I deployed my 1st Nuxt.js app to Heroku...Everything went smooth but when I opened the app I realised that every .vue file/component has TailwindCSS styles up untill SM breakpoint. Mobile view is fine, but anything bigger than SM breakpoint is not apllied. I also used Purgecss to remove unused styles but not sure if that can cause the problems... Any ideas on how to fix this?
I fixed my problem just by finding this https://github.com/nuxt/nuxt.js/issues/2262
I created modules folder and added import-tailwind-config.js with the code:
module.exports = function () {
const tailwindConfig = require('#nuxtjs/tailwindcss')
this.options.env.tailwind = tailwindConfig
}
And inside nuxt.config.js, outside of module.exports I added
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')
class TailwindExtractor {
static extract (content) {
return content.match(/[A-z0-9-:/]+/g) || []
}
}
As well as this code inside of module.exports
build: {
extend (config, ctx) {
config.plugins.push(
new PurgecssPlugin({
whitelist: ['html', 'body'],
paths: glob.sync([
path.join(__dirname, 'components/**/*.vue'),
path.join(__dirname, 'layouts/**/*.vue'),
path.join(__dirname, 'pages/**/*.vue'),
path.join(__dirname, 'plugins/**/*.vue')
]),
extractors: [{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'vue']
}]
})
)
}
}
modules: [
'~modules/import-tailwind-config'
]
I'm making SPAs with Laravel and VueJs.
Sometimes .js files from fronted are cached in the browser, and the client is not seeing the latest updates. I'm using chunk names but the are still cached by the browser.
Is there a way to versionate the files automatically with Webpack and notice the client to correctly update the site?
Update > webpack.mix.js:
const path = require('path')
const mix = require('laravel-mix')
const webpack = require('webpack')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
mix
.js('resources/assets/js/app.js', 'public/dist/js')
.sass('resources/assets/sass/app.scss', 'public/dist/css')
.styles([
'resources/assets/sass/fa/css/fontawesome-all.css',
'public/css/awesome-bootstrap-checkbox.css',
'public/css/inspinia.css',
'node_modules/vue-multiselect/dist/vue-multiselect.min.css'
], 'public/dist/css/all.css')
.sourceMaps()
//.disableNotifications()
if (mix.inProduction()) {
mix.version()
mix.extract([
'vue',
'vform',
'axios',
'vuex',
'jquery',
'popper.js',
'vue-i18n',
'vue-meta',
'js-cookie',
'vue-router',
'sweetalert2',
'vuex-router-sync',
'#fortawesome/fontawesome',
'#fortawesome/vue-fontawesome'
])
}
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/assets/js')
}
},
output: {
chunkFilename: 'dist/js/chunk.[name].[chunkhash].js',
path: process.env.MIX_APP_URL,
publicPath: '/wms/public/'
}
})
My app is working fine in localhost with this configuration, I use XAMMP in localhost. but when I deployed my app in a VPS with Linux (ubunto) OS, I got this problem. In the first days they worked fine too, but recently when I added the last route (categories) and did 'npm run production' my routes suddenly stopped working.
When I click on a router-link the URL doesn't even change.
I changed my webserver from nginx to apache, but it doesn't make any difference.
my routes are like this:
const Index = resolve => {
require.ensure(['./frontend-components/main-content/index'], () => {
resolve(require('./frontend-components/main-content/index'));
});
};
const news = resolve => {
require.ensure(['./frontend-components/single/news'], () => {
resolve(require('./frontend-components/single/news'));
});
};
const lists = resolve => {
require.ensure(['./frontend-components/single/lists'], () => {
resolve(require('./frontend-components/single/lists'));
});
};
const categories = resolve => {
require.ensure(['./frontend-components/single/categories'], () => {
resolve(require('./frontend-components/single/categories'));
});
};
export const routes = [
{path: '/', component: Index},
{path: '/articles/:article_id/:slug',component: news,name: 'articles'},
{path: '/lists/:article_id/:slug',component: lists,name: 'lists'},
{path: '/categories/:cat_id/:slug', component: categories},
]
and my webpack configuration is :
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/fr-app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/fr-app.scss', 'public/css')
.sass('resources/assets/sass/admin.scss', 'public/css')
.options({processCssUrls: false})
.webpackConfig({ output: { filename: '[name].js', chunkFilename:
'js/[name].app.js', publicPath: '/' } });
I have this error when I click on a router-link:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
and it refers to this line to source code:
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
require.ensure is the legacy Webpack syntax, which is superceded by import. And as #Phil pointed out, resolve => {/*...*/} itself does not create a Promise, which is needed for lazy loading routes. You probably meant something like this:
const foo = new Promise(resolve => {
require.ensure( './path/to/foo', () => resolve(require('./path/to/foo')) );
});
const routes = [
{
path: '/foo',
component: foo
}
];
However, the vue-router docs recommends the import syntax for lazy loading routes:
const routes = [
{
path: '/foo',
component: () => import('./path/to/foo')
}
];
demo
I want to use Webpack in order to create one single scripts.js file out of all needed Javascript files.
Within my main.js I require three modules:
require('jquery');
require('readmore');
require('foundation');
My webpack.config.js is this:
var path = require('path');
module.exports = {
entry: ["./js/main.js"],
output: {
path: path.resolve(__dirname, 'build'),
filename: "scripts.js"
},
resolve: {
modulesDirectories: ["bower_components", "node_modules"],
alias: {
jquery: '../bower_components/jquery/dist/jquery.js',
readmore: '../node_modules/readmore-js/readmore.js',
foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
}
}
}
My problem: as readmore-js is a jQuery-Plugin it requires jQuery by itself.
I got this error after running Webpack:
ERROR in ./~/readmore-js/readmore.js
Module not found: Error: Can't resolve 'jquery' in '/Users/myName/www/myProject/node_modules/readmore-js'
# ./~/readmore-js/readmore.js 17:4-31
# ./js/main.js
# multi main
From my understanding the problem is that readmore also wants to load the module jQuery within the directory "nodes_modules". My first approach was to resolve this problem by adding moduleDirectories to the config-file, but it does still not work.
And even in this case, the plugin shouldn't load jQuery again.
Do you have any idea how I can load jQuery globally and then "tell" all modules which require jQuery by themself "look, it's there!"
As it may helps, the following is copied out of the plugin's readmore.js:
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}
You can use webpack.ProvidePlugin for this:
Remove require jquery from main.js:
require('readmore');
require('foundation');
Configure webpack.ProvidePlugin inside webpack.config.js:
var path = require('path');
module.exports = {
entry: ["./js/main.js"],
output: {
path: path.resolve(__dirname, 'build'),
filename: "scripts.js"
},
resolve: {
modulesDirectories: ["bower_components", "node_modules"],
alias: {
readmore: '../node_modules/readmore-js/readmore.js',
foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
]
}