We Keep Coding

Vue 3 & Vite built application shows blank page

I have a problem trying to make a build of a new Vue3.js + Vite.js application. Once my application is finished i made the npm run build action in order to generate the final deployment files.
Problem is that when I try to see the generated page, it only shows a white page.
Opening the inspection tool I can see how the main generated javascript files are like not being found by the static index.html:
Failed to load resource: net::ERR_FAILED index.7b66f7af.js:1

Ok. I found the solution searching a bit, and I see how this problem also occurred actually in Vue 2.
The only thing that you have to do for solvif is add base: './' in your vite.config.js, like this:
import {
defineConfig
} from 'vite'
import vue from '#vitejs/plugin-vue'
import vuetify from '#vuetify/vite-plugin'
const path = require('path')
export default defineConfig({
plugins: [
vue(),
vuetify({
autoImport: true,
}),
],
define: {
'process.env': {}
},
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
},
},
base: './',
})
Hope it helps you all!

I had this problem also, and found a solution:
It looks like the awnser given by #javi But it's different. I found out that the situation changes when you deploy your application.
In vite config there is a setting called 'base' filled in like: base: mode === 'production' ? '/nameExample/' : '/', this will put the output of your project on the endpoint : 'nameExample'. If you go in production this fails and shows a blank page, and you need to changes this nameExample to '/' to show the projectbuild online. But than it shows a blank page in development because it mismatches the name of the project. Hope this will help you.

Rollup : single html output

I'm trying to package my Svelte app into a single Html file output.
I've managed to get the desired output with a configuration based on that answer :
Output Single HTML File from Svelte Project
With "npm run dev" everything is fine with the first build, but I'm having issues following (live-reload) builds: bundle['bundle.css'] is not filled in my inlineSvelte's generateBundle function.
I didn't manage to change the rollup-plugin-css-only for rollup-plugin-embed-css, which seemed to have an appropriate name for my needs.
Here's my rollup.config.js :
import svelte from 'rollup-plugin-svelte';
import livereload from 'rollup-plugin-livereload';
import css from 'rollup-plugin-css-only';
...
function inlineSvelte(templatePath, dest) {
return {
name: 'Svelte Inliner',
generateBundle(opts, bundle) {
const file = path.parse(opts.file).base;
const jsCode = bundle[file].code;
const cssCode = bundle['bundle.css'].source;
const template = fs.readFileSync(templatePath, 'utf-8');
bundle[file].code = template
.replace('%%script%%', jsCode)
.replace('%%style%%', cssCode);
}
}
}
export default {
input: 'src/main.js',
output: {
format: 'es',
file: outputDir + 'index.html',
name: 'app'
},
plugins: [
svelte({
compilerOptions: {
dev: !production
}
}),
css({ output: 'bundle.css' }),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
!production && livereload(outputDir),
inlineSvelte('./src/template.html')
],
watch: {
clearScreen: false
}
};

It is surely possible to embed the produced CSS file in your HTML, at least with some reasonably simple custom plugin.
However, if you only have CSS in your Svelte components, that is you don't have import 'whatever.css' anywhere in your code, you can just rely on Svelte injecting CSS from compiled JS code and be done with it.
This loses a little in terms of performance because such injected CSS will never be cached by the browser, but it avoids the added complexity / risk / coupling associated with a custom build step... And this kind of performance is often not so important in scenarios where you want all your app in a single HTML file.
To enable this, set emitCss: false on the Svelte plugin:
plugins: [
svelte({
emitCss: false,
...
}),
...
],
...
You won't need any Rollup plugin for CSS in this case.

HMR - webpack-hot-middleware do not reload my page

I have a Vue(hello-world) application using
webpack-dev-middleware and webpack-hot-middleware
[hrm] said it's connected in the console when I run the application
Then when I made some changes on my main.js, it thorws up
bundle rebuilding
bundle.js:1382 [HMR] bundle rebuilt in 95ms
bundle.js:2336 [HMR] Checking for updates on the server...
bundle.js:2409 [HMR] Updated modules:
bundle.js:2411 [HMR] - ./src/main.js
bundle.js:2416 [HMR] App is up to date.
Which is fine, but DOM does not reflect my changes and I have to manually reload the page in order to see them.
These are the code files I have right now:
// dev-server.js
...
app.use(middleware(compiler, {
noInfo: true,
publicPath: webpackConfig.output.path
}));
app.use(webpackHotMiddleware(compiler));
...
and here my webpack config:
module.exports = {
context: srcPath,
entry: ['webpack-hot-middleware/client', './main'],
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
output: {
path: distPath,
publicPath: distPath,
filename: 'bundle.js',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
})
]
}
then I accept module hot changes on main.js:
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: "hello world!!"
}
})
if (module.hot) {
module.hot.accept();
}
I've struggled myself looking on forums and blog posts but seems I'm missing something, any ideas what could be the issue.

I am currently switching from Webpack 3 to 4 and I am facing the same problem as yours.
I think your dev-server.js has missing some codes. I know it is a bit late but I hope this could be an answer for someone who has been struggled few days like me.
For Webpack 4:
// dev-server.js
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
});
compiler.hooks.compilation.tap('html-webpack-plugin-after-emit', () => {
hotMiddleware.publish({
action: 'reload'
});
});
For Webpack 3:
// dev-server.js
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {},
heartbeat: 2000
});
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
});
});

I'd suggest blowing away all of the options to start with, and then incrementally add them as desired once you have basic functionality working. I think that your path option is actually the default anyway, and that heartbeat looks really long. (I'm also assuming the linebreak in your webpack entry config is a typo..)
You can see a working example of applying webpack-hot-middleware to an existing webpack-dev-middleware app (albeit React instead of Vue - and please ignore the CoffeeScript), that was done about a week ago. It's pretty bare, and is pretty similar to your setup, except with fewer options. (I'm also able to avoid having to touch module.hot myself, though I imagine that depends on what other libraries are in the mix.)

sw-precache-webpack-plugin webpack service worker default template

I'm using the sw-precache-webpack-plugin to generate a service worker for my project, I can see all my fonts, js and css files in the cache storage but not the index / html file and its not working when i go offline. I also get a 'site cannot be installed: no matching service worker detected.' when i try and add to homepage on the App manifest.
My stack is a universal React + redux app, with Express + ejs for index file. I'm not sure if its because I'm using ejs rather than a default html file, but it doesnt seem to find the file. Is there a way I can specify a template? My sw-precache-webpack-plugin webpack setting is:
new SWPrecacheWebpackPlugin({
cacheId: 'tester',
filename: 'my-service-worker.js',
directoryIndex: '/',
}),
Any advice would be appreciated

You are missing a specification of a caching strategy in the plugin config.
plugins: [
new SWPrecacheWebpackPlugin({
cacheId: 'tester',
filename: 'my-service-worker.js',
runtimeCaching: [
{
urlPattern: '/',
handler: 'cacheFirst',
}
]
})
]
Documentation: https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject

Why requiring javascript asynchronous loading under my webpack configuration

I'm really struggling with odd codes.
I want to include some query parameters by $.ajaxPrefilter in all jQuery ajax request.
I found below the code make it if it load correctly synchronous order.
But, following code in entry.js loaded jscode in unpredictable order.Sometimes prefilter.js were preloaded ,the other time, post_ajaxs.js were preloaded.(I inspected server post message,and sometimes lack of data and I checked timing loading using chrome devtools).
require(['prefilter'])
$(function(){
if($("#page_id").length > 0) {
require([
"src/common/post_ajax.js"
]);
}
});
Why is it caused? I'm confused because I first thought require keyword is synchronous loading.
I show partial fragment of webpack.config.js may be related.
entry: {
/webroot/js/entry.js: __dirname+"/src/entry.js"
},
resolve: {
alias: {
"prefilter": __dirname + "/src/common/prefilter.js",
}
},
output: {
path: __dirname + "/webroot/js/",
filename: "[name].js",
chunkFilename: "[hash].[id].js?" + (+new Date()),
publicPath: "/js/"
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
d3: "d3"
})
]
I want to enforce prefilter.js preloaded and load post_ajax after it. Please, give me help.Any information I'll appreciate.
Edit:
Here is prefilter.js.
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
options.data = $.param($.extend(originalOptions.data, {'data[extra]':$("#some_id").val() }));
}
});

It might be scope problem because outer required js is global scope and not nested by function curly braces. Webpack might separate dependencies because I test two case using require.ensure nesting $(function{}) and putting require(['prefilter']) into $(function{})'s scope, both works correctly though it is my prediction.
But,more correct answer welcome if you have.