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.
Related
Locally, Vite builds just fine. However, in CI (which just runs the same script, npm run build), it fails.
I get this error in CI:
Error: "Buffer" is not exported by "__vite-browser-external", imported by "src/index.html?html-proxy&index=0.js".
file: /home/runner/work/explorer/explorer/src/index.html?html-proxy&index=0.js:2:13
1:
2: import { Buffer } from "buffer";
^
3: window.Buffer = Buffer;
Error: error during build:
RollupError: "Buffer" is not exported by "__vite-browser-external", imported by "src/index.html?html-proxy&index=0.js".
I added the line that is causing the error because of an issue when running vite serve locally (it errors) - StackOverflow suggested this solution. It builds fine even in CI without that line.
Here's my Vite config:
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import svgrPlugin from 'vite-plugin-svgr'
import { createHtmlPlugin } from 'vite-plugin-html'
import EnvironmentPlugin from 'vite-plugin-environment'
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill'
export default defineConfig({
root: './src',
envDir: '..',
build: {
// relative to the root
outDir: '../build',
},
// relative to the root
publicDir: '../public',
server: {
open: true,
port: 3000,
proxy: {
'/api': 'http://localhost:5001',
},
},
define: { 'process.env': {} },
resolve: {
alias: {
events: 'events',
stream: 'stream-browserify',
zlib: 'browserify-zlib',
'util/': 'util',
},
},
optimizeDeps: {
esbuildOptions: {
define: {
// Node.js global to browser globalThis
global: 'globalThis',
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
}),
],
},
},
plugins: [
svgrPlugin({
exportAsDefault: true,
}),
react({
// Use React plugin in all *.jsx and *.tsx files
include: '**/*.{jsx,tsx}',
}),
createHtmlPlugin({
inject: {
data: {
VITE_GA_ID: process.env.VITE_GA_ID,
VITE_ZENDESK_KEY: process.env.VITE_ZENDESK_KEY,
},
},
}),
EnvironmentPlugin('all'),
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true,
}),
viteTsconfigPaths(),
],
test: {
globals: true,
setupFiles: 'src/setupTests.js',
},
})
My build command is DISABLE_NEW_JSX_TRANSFORM=true vite build --emptyOutDir
My serve command is DISABLE_NEW_JSX_TRANSFORM=true vite serve
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
I'm using this github cli plugin to scaffold mv3 chrome extensions using vue and vite.
The template is created correctly and I'm able to work on it, but I have a problem when I want to use the chrome.window.create or chrome.tabs.create, when I run the build command the final folder will not contain the popup.html file, it will be bundled only if is used inside the manifest.js file that is used to generate the build
This is the manifest configuration
import { defineManifest } from '#crxjs/vite-plugin'
export default defineManifest({
name: '',
description: '',
version: '1.0.0',
manifest_version: 3,
icons: {
16: 'img/logo-16.png',
32: 'img/logo-34.png',
48: 'img/logo-48.png',
128: 'img/logo-128.png',
},
//If I uncomment popup will be included but tabs and popup windows will not work
action: {
// default_popup: 'popup.html',
// default_icon: 'img/logo-48.png',
},
//options_page: 'options.html',
background: {
service_worker: 'src/background/index.js',
type: 'module',
},
content_scripts: [
{
matches: ['http://*/*', 'https://*/*'],
js: ['src/content/index.js'],
},
],
host_permissions: [
'https://*.herokuapp.com/*'
],
web_accessible_resources: [
{
resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
matches: [],
},
],
permissions: [
'tabs',
'gcm',
'identity',
],
oauth2: {
"client_id": "...cd.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
}
})
And this is the vite code I have
import { defineConfig } from 'vite'
import { crx } from '#crxjs/vite-plugin'
import vue from '#vitejs/plugin-vue'
import manifest from './src/manifest.js'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const production = mode === 'production'
return {
build: {
emptyOutDir: true,
outDir: 'build',
rollupOptions: {
output: {
chunkFileNames: 'assets/chunk-[hash].js',
},
},
},
plugins: [crx({ manifest }), vue()],
}
})
How I can fix the build to include the popup.html page or any custom html page I can need?
I have like this configuration file in my vue.js + vite.js project:
File vite.config.js:
import { defineConfig, loadEnv } from 'vite'
import svgLoader from 'vite-svg-loader'
import vue from '#vitejs/plugin-vue'
import path from 'path'
const generateScopedName = 'tw_[local]'
export default ({ mode }) => {
process.env = {...process.env, ...loadEnv(mode, process.cwd(), '')};
return defineConfig({
define: {
'process.env': process.env
},
build: {
sourcemap: false,
cssCodeSplit: false,
rollupOptions: {
output: {
dir: 'dist',
chunkFileNames: '[name].js'
}
}
},
resolve: {
alias: {
'#': path.resolve(__dirname, './src')
}
},
server: {
fs: {
allow: ['..']
},
hmr: {
overlay: false
}
},
plugins: [vue(), svgLoader()],
css: {
modules: {
generateScopedName
}
}
});
}
When I build my project by running command vite build then value of defined process.env variable will be saved as static value from current .env file values. But when I put my bulded projec to another place with different .env file then value of defined process.env won't update automatically. How I can correctly watch .env file values for changes on static build if it possible of course?
I have a legacy app were we are trying to export some components with WP5 module-federation.
The plugin configuration is currently like this:
output: {
filename: "[name].bundle.js",
},
plugins: [
new ModuleFederationPlugin({
name: "remote",
filename: "remoteEntry.js",
remotes: {},
exposes: {
"./TestExport": path.resolve(__dirname, "../src/TestExport"),
},
shared: {
"react#17": {
singleton: true,
requiredVersion: deps.react,
},
},
}
),
]
the webpack config file is in a config dir in the root folder, this is why we are exposing the component with path.resolve.
When compiling the code, the remoteEntry.js file is not generated and we can't import it in another application using module-federation.
I've tried creating an app and exporting something with module-federation and consuming it inside the legacy app and it worked, but the opposite doesn't work.