Summary
I'm trying to utilize webpack to bundle my javascript. However, part of the code that needs to be used exists on root, as a peer to the src folder. (See image below.) Those files contain/reference a service worker, web assembly code, and a flat file database SQLLite database. But, my bundled code containers a reference to file:///C:/code/bio-dash/chms/dist/sql-httpvfs.js, which is definitely an error, and causes CORS error. How do I get webpack to bundle my data.js file correctly, with a relative reference to the file in question?
Images
Offending bundled code in data.js. I think it should be relative to the development server, and not my file system:
Error message
sql-httpvfs.js:637 Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at 'file:///C:/code/bio-dash/chms/dist/55d3459a09daf1539fb9.js' cannot be accessed from origin 'http://localhost:3000'.
Express server.js
const express = require('express'); const path = require('path'); const cors = require('cors'); const PORT = process.env.PORT || 3000; const app = express(); app.use(cors()); // the \__dirname is the current directory from where the script is running app.use(express.static(\__dirname)); // send the user to index html page inspite of the url app.get('/', (req, res) =\> { res.sendFile(path.resolve(\__dirname, 'index.html')); }); app.get('/about', (req, res) =\> { res.sendFile(path.resolve(\__dirname, 'about.html')); }); app.get('/resources', (req, res) =\> { res.sendFile(path.resolve(\__dirname, 'resources.html')); }); // Start the Express.js server app.listen(PORT, function () { console.log( ==\> API Server now listening on PORT ${PORT}!); console.log('\\x1b\[36m%s\\x1b\[0m', http://localhost:${PORT}); });\
webpack.config.js
const path = require('path'); const webpack = require('webpack'); const config = { target: \['web', 'es6'\], entry: path.resolve(\__dirname, './src'), output: { path: path.resolve(\__dirname, 'src/js/CHMS'), filename: './data.js', publicPath: './', }, plugins: \[new webpack.SourceMapDevToolPlugin({})\], devServer: {}, mode: 'development', module: { rules: \[ { test: /.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: \['@babel/preset-env'\], }, }, }, { test: /.css$/i, use: \['style-loader', 'css-loader'\], }, \], }, // provide custom path aliases to the following files resolve: { alias: { '@': path.resolve(\__dirname, 'src/'), Components: path.resolve(\__dirname, 'src/components/'), Assets: path.resolve(\__dirname, 'src/assets/'), Utilities: path.resolve(\__dirname, 'src/utils/'), }, }, }; module.exports = config;
I'm using Node 20.10.0, and webpack 5.89.0
I tried adding serving static files in my express server, so that it would be serving up all the files from root directory.
app.use(express.static(__dirname));
I tried switching to Vite for my bundler, but ran into other issues, also related to those files in chms/dist/