I'm getting the error redeclaration of import Buffer when trying to polyfill Buffer in sveltekit.
Here is my svelte.config.js file:
import adapter from '#sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
import path from 'path';
import { NodeGlobalsPolyfillPlugin } from '#esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill';
import dotenv from 'dotenv-flow';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
dotenv.config();
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: 'index.html',
precompress: false
}),
vite: {
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
global: true,
process: true,
url: true,
assert: true,
crypto: true,
http: true,
https: true,
os: true,
stream: true,
util: true
}),
NodeModulesPolyfillPlugin()
]
}
},
resolve: {
alias: {
$components: path.resolve('./src/components'),
$stores: path.resolve('./src/stores'),
$api: path.resolve('./src/api'),
$node: path.resolve('./node_modules'),
'#toruslabs/openlogin': path.resolve(
'./node_modules/#toruslabs/openlogin/dist/openlogin.umd.min.js'
),
// polyfills
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
// buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
events: 'rollup-plugin-node-polyfills/polyfills/events',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough: 'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable: 'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain'
}
},
build: {
minify: false,
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill({
// buffer: false
})
]
}
}
}
}
};
export default config;
So sveltekit uses esbuild for dev and rollup for production builds...so we need two modules.
I almost got my code working but the the polyfilled imports seem to be importing Buffer twice.
Related
I develop a vue application, which use vite as bundler. It comes with a http server and the http-proxy middleware: https://vitejs.dev/config/server-options.html#server-proxy & https://github.com/http-party/node-http-proxy
I need to set the "x-forwarded-*" headers, for that i set xfwd=true in my vite config:
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
const {
BACKEND_HOST,
BACKEND_PORT,
BACKEND_PROTOCOL
} = process.env = Object.assign({
BACKEND_HOST: "127.0.0.1",
BACKEND_PORT: "8080",
BACKEND_PROTOCOL: "http"
}, process.env);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url))
}
},
server: {
proxy: {
"/api": {
target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
ws: true,
xfwd: true
},
"/auth": {
target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
xfwd: true
}
}
},
clearScreen: false
});
Headers are present on my backend, but the problem is the "x-forwarded-for" header has a ipv6 part which "breaks" my backend.
E.g.: 'x-forwarded-for': '::ffff:127.0.0.1'
What do i need to change in my vite/http-proxy config to remove the "::ffff:" part?
The option i looking for was "host": https://vitejs.dev/config/server-options.html#server-host
Set that to "0.0.0.0".
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url))
}
},
server: {
host: "0.0.0.0",
proxy: {
"/api": {
target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
ws: true,
xfwd: true
},
"/auth": {
target: `${BACKEND_PROTOCOL}://${BACKEND_HOST}:${BACKEND_PORT}`,
xfwd: true
}
}
},
clearScreen: false
});
I'm trying to solve the Vite build error I get:
RollupError: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
The file name reported with this error points to
my web worker code, so I assumed that this setting belongs to the worker section in vite.config.ts:
import { defineConfig } from "vite";
import preact from "#preact/preset-vite";
import basicSsl from "#vitejs/plugin-basic-ssl";
import { NodeGlobalsPolyfillPlugin } from "#esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
export default defineConfig({
plugins: [
preact(),
basicSsl(),
],
server: {
port: 3001,
https: true,
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
worker: {
rollupOptions: {
output: {
format: "esm",
},
},
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
output: {
format: "esm",
},
},
},
});
Additionally, I set the output format in the build rollup options. However, neither of the two settings are applied and I still get the said error.
What is the correct way to change the rollup output format setting in Vite?
The worker output format must be specified directly in the worker config key, not its rollup options:
import { defineConfig } from "vite";
import preact from "#preact/preset-vite";
import basicSsl from "#vitejs/plugin-basic-ssl";
import { NodeGlobalsPolyfillPlugin } from "#esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
export default defineConfig({
plugins: [
preact(),
basicSsl(),
],
server: {
port: 3001,
https: true,
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
worker: {
format: "es",
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
output: {
format: "esm",
},
},
},
});
I'm trying to run eslint AFTER vite bundles my code
import eslint from 'vite-plugin-eslint'
const outDir = 'out'
export default defineConfig({
plugins: [
{
...eslint({
include: outDir + '/**/*',
overrideConfigFile: '.eslintrc.js',
fix: true,
failOnError: true,
failOnWarning: true
}),
enforce: 'post',
apply: 'build',
}
],
build: {
emptyOutDir: false,
outDir,
sourcemap: false,
watch: {},
minify: false,
lib: {
entry: {
server_scripts : "./src/server/index.ts",
startup_scripts : "./src/startup/index.ts",
client_scripts : "./src/client/index.ts",
},
fileName: '[name]/bundle',
formats: ["cjs"],
},
},
})
here's what i have so far, i thought doing enforce:'post' should work but it doesn't, eslintrc already has the rules and doing eslint --fix manually fixes it. and i'm sure it's using the right eslint because it throws the error when i do lintOnStart option
Vite produces unreasonably small chunks (90% of all chunks are under 1KB with a few 300KB+).
Here is the full build log:
https://gist.github.com/gajus/0149233592085181331dde7076fc50b1
This is example website:
https://contra.com/p/gkOQlbLq-validating-postgre-sql-results-and-inferring-query-static-types
This is out Vite configuration:
import path from 'path';
import { default as react } from '#vitejs/plugin-react';
import { defineConfig } from 'vite';
import { default as ssr } from 'vite-plugin-ssr/plugin';
const { VITE_BASE_URL } = process.env;
export default defineConfig(({ ssrBuild }) => {
let build;
if (!ssrBuild) {
build = {
emptyOutDir: true,
manifest: true,
minify: true,
polyfillModulePreload: false,
rollupOptions: {
output: {
chunkFileNames: 'chunk-[name].[hash].js',
entryFileNames: 'entry-[name].[hash].js',
inlineDynamicImports: false,
sourcemap: true,
},
},
sourcemap: true,
};
}
return {
base: VITE_BASE_URL ?? '/static/',
build,
plugins: [
react({
babel: {
plugins: [
'babel-plugin-relay',
[
'babel-plugin-styled-components',
{
displayName: true,
fileName: false,
pure: true,
ssr: true,
},
],
],
},
}),
ssr(),
],
resolve: {
alias: {
'#': path.resolve(__dirname, './src/'),
},
},
};
});
If you try to inspect this page using Google tools, it doesn't even load – presumably because of 200 JavaScript chunks that that page needs to load.
https://search.google.com/test/mobile-friendly/result?id=ULZhtOfQfp1Gxj2wYhyCUw
How to reduce the number of chunks?
I'm starting to test Quasar framework and I want to proxy some url to my local backend but the configuration doesn't seem to work (documentation here).
The part of my quasar.config.js where the proxy should be configured:
devServer: {
// https: true
proxy: {
'/association': {
target: 'http://localhost:8080',
changeOrigin: true,
}
},
open: false,
},
I've also tried to do it inline '/association': 'http://localhost:8080' with the same result. My request are not redirect and query on port 80: http://localhost/association/setProducerStats
Anyone already managed to configure the proxy ?
Quasar is already running itself on port 8080 - try to use a different port for your local backend, or add port: 8090 to the devServer config.
Example config for Vite:
// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '#vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '#quasar/vite-plugin';
import viteStylelint from './plugins/stylelint';
import eslintPlugin from 'vite-plugin-eslint';
import Components from 'unplugin-vue-components/vite';
import { QuasarResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: { transformAssetUrls }
}),
quasar({
autoImportComponentCase: 'pascal',
sassVariables: 'src/quasar-variables.sass'
}),
viteStylelint({
exclude: /node_modules|.*uno\.css/
}),
eslintPlugin({
cache: false
}),
Components({
resolvers: [QuasarResolver()],
include: [/\.vue$/],
exclude: [/node_modules/, /\.git/, /\.nuxt/],
})
],
resolve: {
alias: {
src: resolve(__dirname, './src'),
'#': resolve(__dirname, './src'),
},
},
server: {
https: false,
port: 9000,
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
secure: true,
//rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
terserOptions: {
compress: {
drop_console: true,
},
},
// reportCompressedSize: true,
chunkSizeWarningLimit: 1024,
rollupOptions: {
output: {
manualChunks(id)
{
if (id.includes('/node_modules/'))
{
const modules = ['quasar', '#quasar', 'vue', '#vue'];
const chunk = modules.find((module) => id.includes(`/node_modules/${module}`));
return chunk ? `vendor-${chunk}` : 'vendor';
}
},
},
},
},
});