Develop Reference

Vite v3.2.5 use app.js instead of app.mjs

I use VueJS version 2 with Vite v3.2.5 and when I load my website I get this error in Firefox:
Loading of the module from ".../build/app.mjs" was blocked due to an unapproved MIME type ("application/octet-stream").
CSS/SCSS is working and I have only problems with the app.js/app.mjs.
Is it possible to change the output of my file from app.mjs to app.js?
This is my vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue2';
const path = require('path')
import { resolve } from 'path'
export default defineConfig({
plugins: [
laravel({
hotFile: 'public/widget.hot',
input: [
'resources/js/app.js',
'resources/scss/app.scss',
'resources/scss/index.scss'
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
host: true
},
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js',
},
dedupe: [
'vue'
]
},
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
},
build: {
cssCodeSplit: true,
lib: {
input: {
app: "./resources/js/app.js"
},
formats: ['es'],
entry: resolve(__dirname, 'resources/js/app.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
name: 'bundle',
fileName: 'app'
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
//format: "esm",
inlineDynamicImports: false,
},
},
},
});
I have this in my blade.php file:
#vite('resources/js/app.js')
Does anyone how to fix it?
Thanks for help!

Try adding the mime type for .mjs files in the Plesk control panel (based on their docs):
If this is a Linux server
Log in to Plesk.
Go to Domains > YOUR DOMAIN NAME > Apache & nginx Settings.
Next to MIME types, select the Enter custom value option button.
Add a line that says: text/javascript .mjs.
Save your changes.
If this is a Windows server
Log in to Plesk.
Go to Domains > YOUR DOMAIN NAME > Hosting Settings > IIS Settings.
Go to the MIME Types section.
Add a line that says: text/javascript .mjs.
Save your changes.

Huge chunk sizes due to dynamic json imports in production build

I have a vite SPA and use dynamic imports to load my json files. Since I need to load numerous very large json files, the index.js file in my /dist becomes too big in my production build.
What is the best way to import these json files dynamically but still keep small chunks? Can I import somehow the json files dynamically as own chunks, similar to images and videos with hashes?
Here my vite.config.js
import path from 'path'
import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import { createHtmlPlugin } from 'vite-plugin-html'
import svgr from 'vite-plugin-svgr'
import legacy from '#vitejs/plugin-legacy'
import react from '#vitejs/plugin-react'
import { name } from './package.json'
export default defineConfig({
base: '/widgets/' + name + '/',
server: {
open: true, // Define a BROWSER in your .env-File to specify which browser. Defaults to Chrome. https://vitejs.dev/config/#server-open
port: 3000,
},
resolve: {
alias: {
'#Assets': path.resolve(__dirname, 'src/assets'),
'#Components': path.resolve(__dirname, 'src/components'),
'#Examples': path.resolve(__dirname, 'src/examples'),
'#Scripts': path.resolve(__dirname, 'src/scripts'),
'#Styles': path.resolve(__dirname, 'src/assets/styles'),
'#Cms': path.resolve(__dirname, 'src/assets/styles/cms'),
},
},
css: {
devSourcemap: true, // needed for css imported in cms template
},
define: {
__DATA_PATH__: JSON.stringify(process.env.npm_package_config_dataPath),
},
build: {
rollupOptions: {
output: {
entryFileNames: `[name].js`,
chunkFileNames: `[name].js`,
assetFileNames: `[name].[ext]`,
},
},
},
plugins: [
legacy({
polyfills: true,
}),
react(),
createHtmlPlugin({
minify: true,
inject: {
data: {
title: name,
id: name,
},
},
}),
cssInjectedByJsPlugin(),
svgr(),
],
})

You can try this configuration：
// vite.config.ts
build: {
chunkSizeWarningLimit: 500, // default 500 KB
},
https://vitejs.dev/config/build-options.html#build-chunksizewarninglimit

What is the proper way of bundling in node dependencies with rollup?

So I was trying to bundle in a bunch of external package dependencies using roll-up, like three JS and deck.gl. Right now I have a rollup config file set up like so, one to build just the code I have written and another that bundles in all the dependencies :
import externals from "rollup-plugin-node-externals";
export default [
{
input: "./Src/index.js",
output: [
{
file: "./Build/pgl.js",
format: "iife",
plugins: [
externals({
deps: true, // Dependencies will not be bundled in
}),
],
},
{
file: "./Build/pgl_module.js",
format: "iife",
plugins: [
externals({
deps: false, // Dependencies will be bundled in
}),
],
sourceMap: true,
},
],
},
];
I have also tried to do the same thing with something like
import { nodeResolve } from '#rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [nodeResolve()]
};
but to no avail it never bundles up the node packages into the build file and always gives the error :
...
three/examples/jsm/lines/Line2.js (guessing 'Line2_js')
three/examples/jsm/lines/LineMaterial.js (guessing 'LineMaterial_js')
three/examples/jsm/lines/LineGeometry.js (guessing 'LineGeometry_js')
three/examples/jsm/controls/OrbitControls (guessing 'OrbitControls')
#deck.gl/core (guessing 'core')
#deck.gl/layers (guessing 'layers')
(!) Unresolved dependencies

Serve static images in development with Vite using new URL

I currently have a React App with Vite 2.7.1. I'm having trouble displaying static local images in Vite while in development.This works in production.
I'm using:
new URL(path, import.meta.url);
And I've tried:
new URL(path, import.meta.url).href;
Then I'd consume it like:
const wavesBg = new URL(
'../../../../resources/images/background-waves.svg', import.meta.url
);
<img src={wavesBg } />
I don't know if this is a file server problem, but it does map the address correctly!
Here's my vite.config.ts file:
export default defineConfig({
plugins: [
viteCommonjs(),
// https://www.npmjs.com/package/#vitejs/plugin-react
react(),
tsconfigPaths(),
eslintPlugin(),
],
resolve: {
alias: {
stream: 'stream-browserify',
'~': path.resolve(__dirname, 'src'),
},
},
server: {
open: true,
fs: {
allow: [
// https://vitejs.dev/config/#server-fs-allow
searchForWorkspaceRoot(process.cwd()),
// This is where I'm serving my images.
'/libs/components/src/resources/images',
],
},
},
optimizeDeps: {
/// Omitted
},
// esbuild: { jsxInject: `import React from 'react'` },
});
Note. Vite is currently configured in a monorepo fashion served using the NX CLI.

webpack module function not found

I have a simple project with a few html files in root folder and a few javascript modules in scripts directory.
I want to start using webpack now because I want minification and to start using environments. Everything was working before I started using webpack.
I read documentation for Webpack 5 but could not find anything that solves my problem. So I came up with this webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
lib: "./scripts/lib.js"
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
devServer: {
contentBase: "./dist",
inline: true, //Enable watch and live reload
host: "localhost",
port: 8080,
stats: "errors-only",
https: false
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
hash: true
})
],
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
};
My index.html imports and uses module functions like this:
<script type="module">
import * as lib from "./scripts/lib.js";
window.lib = lib;
</script>
<body onload="lib.myFn()">
</body>
But after running this webpack (using webpack serve) I am getting "is not a function" or "module not found" errors.
How can I compile and run my existing project with webpack without making any changes in my directory structure and fix this error so I can start using functions in lib.js in my index.html? Thanks.