chore(frontend): remove custom Webpack sqlite-wasm integration plugins and cleanup config
- Deleted `dummy.js` and its usage for sqlite-wasm integration as custom Webpack adjustments are no longer necessary. - Removed outdated Webpack configuration files: `ignore-sqlite-wasm.js`, `ignore-sqlite-wasm-critical-dependency.js`, and `sqljs-fix.js`. - Introduced `sqlite-config.js` for simplified and streamlined sqlite-wasm and Skiko Webpack configuration. - Minor code formatting adjustments across frontend modules for improved consistency.
This commit is contained in:
-29
@@ -1,29 +0,0 @@
|
||||
// Suppress a known, external webpack warning coming from `@sqlite.org/sqlite-wasm`.
|
||||
//
|
||||
// Webpack warning:
|
||||
// "Critical dependency: the request of a dependency is an expression"
|
||||
//
|
||||
// Root cause:
|
||||
// `@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.mjs` uses a dynamic Worker URL:
|
||||
// `new Worker(new URL(options.proxyUri, import.meta.url))`
|
||||
// which webpack cannot statically analyze.
|
||||
//
|
||||
// We keep this suppression максимально spezifisch:
|
||||
// - match only this warning message
|
||||
// - and only if it originates from the sqlite-wasm package path.
|
||||
|
||||
(function (config) {
|
||||
config.ignoreWarnings = config.ignoreWarnings || []
|
||||
|
||||
// Webpack passes warning objects with `message` and `module.resource`.
|
||||
config.ignoreWarnings.push((warning) => {
|
||||
const message = String(warning && warning.message ? warning.message : warning)
|
||||
if (!message.includes('Critical dependency: the request of a dependency is an expression')) return false
|
||||
|
||||
const resource = warning && warning.module && warning.module.resource
|
||||
? String(warning.module.resource)
|
||||
: ''
|
||||
|
||||
return resource.includes('node_modules/@sqlite.org/sqlite-wasm/')
|
||||
})
|
||||
})(config)
|
||||
@@ -1,104 +0,0 @@
|
||||
// This file contains Webpack configuration adjustments for WebAssembly modules,
|
||||
// specifically to handle `skiko.wasm` and `sqlite3.wasm` correctly.
|
||||
|
||||
var pathModule;
|
||||
try {
|
||||
pathModule = path;
|
||||
} catch (e) {
|
||||
pathModule = require('path');
|
||||
}
|
||||
|
||||
var webpackModule;
|
||||
try {
|
||||
webpackModule = webpack;
|
||||
} catch (e) {
|
||||
webpackModule = require('webpack');
|
||||
}
|
||||
|
||||
// 1. Enable WebAssembly experiments in Webpack 5
|
||||
config.experiments = config.experiments || {};
|
||||
config.experiments.asyncWebAssembly = true;
|
||||
|
||||
config.module = config.module || {};
|
||||
config.module.rules = config.module.rules || [];
|
||||
|
||||
// 2. Add a rule to correctly handle .wasm files (like skiko.wasm) as WebAssembly modules
|
||||
config.module.rules.push({
|
||||
test: /\.wasm$/,
|
||||
type: 'webassembly/async'
|
||||
});
|
||||
|
||||
// 3. NormalModuleReplacementPlugin to redirect 'sqlite3.wasm' AND other internal sqlite-wasm modules to our dummy JS file.
|
||||
// This is needed because the `sqlite-wasm` library tries to `require` these files in a Webpack environment.
|
||||
// We want these `require` calls to return an empty JS object (from dummy.js) instead of failing.
|
||||
// Our worker will manually fetch the real sqlite3.wasm.
|
||||
|
||||
const dummyPath = pathModule.resolve(__dirname, "../../../../frontend/shells/meldestelle-portal/build/processedResources/js/main/dummy.js");
|
||||
|
||||
// Redirect sqlite3.wasm
|
||||
config.plugins.push(
|
||||
new webpackModule.NormalModuleReplacementPlugin(
|
||||
/sqlite3\.wasm$/,
|
||||
dummyPath
|
||||
)
|
||||
);
|
||||
|
||||
// Redirect other internal sqlite-wasm modules that might be causing issues
|
||||
// The error log showed: Can't resolve './sqlite-wasm/jswasm/sqlite3.mjs' and 'sqlite3-worker1-promiser.mjs'
|
||||
// We redirect them to dummy.js as well, assuming we don't need them for our manual loading approach.
|
||||
// Be careful not to redirect the main entry point if it's needed.
|
||||
// The errors seem to come from inside the node_modules package trying to resolve relative paths.
|
||||
|
||||
// Let's try to be more specific. If these are optional dependencies or part of the node-loading logic,
|
||||
// replacing them with dummy.js should be fine.
|
||||
config.plugins.push(
|
||||
new webpackModule.NormalModuleReplacementPlugin(
|
||||
/sqlite3\.mjs$/,
|
||||
function(resource) {
|
||||
// Only replace if it's inside the sqlite-wasm package structure we want to avoid
|
||||
if (resource.context.includes('@sqlite.org/sqlite-wasm')) {
|
||||
resource.request = dummyPath;
|
||||
}
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
config.plugins.push(
|
||||
new webpackModule.NormalModuleReplacementPlugin(
|
||||
/sqlite3-worker1-promiser\.mjs$/,
|
||||
dummyPath
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
// 4. Handle WASI imports for skiko.wasm (env, wasi_snapshot_preview1)
|
||||
// Webpack needs to know how to resolve these "magic" imports.
|
||||
// We can treat them as externals or empty modules.
|
||||
// Since we are in a browser environment, these are often provided by the runtime or polyfilled.
|
||||
// Mapping them to false tells Webpack to ignore them (empty module).
|
||||
|
||||
config.resolve = config.resolve || {};
|
||||
config.resolve.fallback = config.resolve.fallback || {};
|
||||
|
||||
// Fallbacks for Node.js core modules that might be required by libraries
|
||||
config.resolve.fallback.fs = false;
|
||||
config.resolve.fallback.path = false;
|
||||
config.resolve.fallback.crypto = false;
|
||||
|
||||
// Ignore WASI imports
|
||||
config.ignoreWarnings = config.ignoreWarnings || [];
|
||||
config.ignoreWarnings.push(/Critical dependency: the request of a dependency is an expression/);
|
||||
|
||||
// Use externals to handle WASI imports if fallback doesn't work
|
||||
config.externals = config.externals || {};
|
||||
// config.externals['env'] = 'env'; // This might expect a global 'env' variable
|
||||
// config.externals['wasi_snapshot_preview1'] = 'wasi_snapshot_preview1';
|
||||
|
||||
// Better approach for WASI in Webpack 5 with asyncWebAssembly:
|
||||
// Webpack should handle this if we don't interfere.
|
||||
// The error "Can't resolve 'env'" suggests it's looking for a module named 'env'.
|
||||
// We can provide a dummy module for these.
|
||||
|
||||
config.resolve.alias = config.resolve.alias || {};
|
||||
config.resolve.alias['env'] = dummyPath;
|
||||
config.resolve.alias['wasi_snapshot_preview1'] = dummyPath;
|
||||
@@ -3,6 +3,6 @@
|
||||
config.devServer = config.devServer || {};
|
||||
config.devServer.headers = {
|
||||
...config.devServer.headers,
|
||||
"Cross-Origin-Opener-Policy": "same-origin",
|
||||
"Cross-Origin-Embedder-Policy": "require-corp"
|
||||
"Cross-Origin-Opener-Policy": "same-origin",
|
||||
"Cross-Origin-Embedder-Policy": "require-corp"
|
||||
};
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
// Webpack configuration for SQLite WASM support AND Skiko fixes
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
config.resolve = config.resolve || {};
|
||||
config.resolve.fallback = config.resolve.fallback || {};
|
||||
config.resolve.alias = config.resolve.alias || {};
|
||||
|
||||
// 1. Fallbacks for Node.js core modules
|
||||
config.resolve.fallback.fs = false;
|
||||
config.resolve.fallback.path = false;
|
||||
config.resolve.fallback.crypto = false;
|
||||
|
||||
// 2. Resolve sqlite3 paths
|
||||
let sqliteBaseDir;
|
||||
try {
|
||||
const packagePath = path.dirname(require.resolve('@sqlite.org/sqlite-wasm/package.json'));
|
||||
sqliteBaseDir = path.join(packagePath, 'sqlite-wasm/jswasm');
|
||||
} catch (e) {
|
||||
console.warn("Could not resolve @sqlite.org/sqlite-wasm path automatically. Using fallback path.");
|
||||
sqliteBaseDir = path.resolve(__dirname, '../../../../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm');
|
||||
}
|
||||
|
||||
// 3. Copy ALL sqlite3 assets (wasm, js, and auxiliary workers)
|
||||
if (fs.existsSync(sqliteBaseDir)) {
|
||||
console.log("Copying sqlite3 assets from:", sqliteBaseDir);
|
||||
config.plugins.push(
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: sqliteBaseDir,
|
||||
to: '.', // Copy to root of dist
|
||||
globOptions: {
|
||||
ignore: ['**/package.json'] // Don't copy package.json if present
|
||||
},
|
||||
noErrorOnMissing: true
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
} else {
|
||||
console.error("ERROR: sqlite3 base directory does not exist:", sqliteBaseDir);
|
||||
}
|
||||
|
||||
// 4. Alias sqlite3.wasm (still needed for some internal checks maybe)
|
||||
const sqliteWasmPath = path.join(sqliteBaseDir, 'sqlite3.wasm');
|
||||
config.resolve.alias['sqlite3.wasm'] = sqliteWasmPath;
|
||||
config.resolve.alias['./sqlite3.wasm'] = sqliteWasmPath;
|
||||
|
||||
// 5. Handle .wasm files
|
||||
config.experiments = config.experiments || {};
|
||||
config.experiments.asyncWebAssembly = true;
|
||||
|
||||
config.module = config.module || {};
|
||||
config.module.rules = config.module.rules || [];
|
||||
|
||||
// Treat Skiko WASM as resource to avoid parsing errors
|
||||
config.module.rules.push({
|
||||
test: /skiko\.wasm$/,
|
||||
type: 'asset/resource'
|
||||
});
|
||||
|
||||
// Treat other WASM as async (default)
|
||||
config.module.rules.push({
|
||||
test: /\.wasm$/,
|
||||
exclude: /skiko\.wasm$/,
|
||||
type: 'webassembly/async'
|
||||
});
|
||||
|
||||
// 6. Ignore warnings
|
||||
config.ignoreWarnings = config.ignoreWarnings || [];
|
||||
config.ignoreWarnings.push(/Critical dependency: the request of a dependency is an expression/);
|
||||
|
||||
// 7. Fix for "webpackEmptyContext" in sqlite3.mjs
|
||||
config.plugins.push(
|
||||
new webpack.ContextReplacementPlugin(
|
||||
/@sqlite\.org\/sqlite-wasm/,
|
||||
(data) => {
|
||||
delete data.dependencies;
|
||||
return data;
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
// 8. MIME types
|
||||
config.devServer = config.devServer || {};
|
||||
config.devServer.devMiddleware = config.devServer.devMiddleware || {};
|
||||
config.devServer.devMiddleware.mimeTypes = {
|
||||
'application/wasm': ['wasm'],
|
||||
'application/javascript': ['js']
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
// Fix für sql.js unter Webpack 5
|
||||
config.resolve = config.resolve || {};
|
||||
config.resolve.fallback = config.resolve.fallback || {};
|
||||
config.resolve.fallback.fs = false;
|
||||
config.resolve.fallback.path = false;
|
||||
config.resolve.fallback.crypto = false;
|
||||
config.resolve.fallback.os = false;
|
||||
config.resolve.fallback.stream = false;
|
||||
config.resolve.fallback.buffer = false;
|
||||
Reference in New Issue
Block a user