We Keep Coding

Console error on import of non-existent file in vite

I am migrating from webpack using Vue2.7 and #vitejs/plugin-vue2.
So there was one problem.
await import(`${path}/${config || 'config'}`).catch(e => ({default: {}}))).default
Up to now, when the above code was executed, if the imported file was missing, the console would not display an error and it would be handled properly.
But when I move to vite, once I do import, I get a Not Found error and then run catch.
like this.
http://localhost:14400/src/User/config net::ERR_ABORTED 404 (Not Found)
Does vite have a way to handle a missing file without displaying an error in the console?

By default imports in rollup (Vite's bundler) are hoisted (put on the top of the file ignoring try/catch) so you need to pass rollup options to override the default behavior as described here:
https://github.com/rollup/plugins/tree/master/packages/commonjs#ignoretrycatch
commonjs options can be configured in Vite's config file in the build section:
https://vitejs.dev/config/build-options.html#build-commonjsoptions

cannot use import statement outside a module on built exe with electron-forge

I am creating an app with Electron and Vue (using js not ts).
When I run the app using npm run electron:serve the app runs fine.
I now want to build a Windows exe so I can distribute my app. I have tried using electron-builder, electron-packager and electron-forge. Whenever I can get the build to finish, running the exe throws the cannot use import statement outside a module error (referring to the first import statement it finds, i.e. import { app, protocol, BrowserWindow } from 'electron').
I've tried adding "type":"module" to my package.json but (due a bug in Vue, according to this question), that throws Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]
I've also tried changing all my import statements to require but this doesn't work because some of the node modules I'm using use import and the error just throws for those instead.
I'm tearing my hair out over this. Where do I go from here?
UPDATE:
I have found a workaround for the Vue bug and posted my findings on the linked question. I can now add "type":"module" to my package.json.
However, I now get an error thrown when I run npm run electron:serve and from my built exe:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <my_project_root>\dist_electron\index.js
require() of ES modules is not supported.
require() of <my_project_root>\dist_electron\index.js from <my_project_root>\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
To be clear, I'm not using require in any of my source code, but the compiled(?) version does?
What's going on here?
UPDATE 2:
As requested, here is a minimal reproducible example that maintains original folder structure, configs and package.json

Webpack 5 - quiet warnings originating from node_modules?

I'm using webpack 5.44.0 and webpack-dev-server 3.11.2, and a custom webpack/babel config in my react project. I'm importing esri-leaflet-geocoder into my project. When developing with webpack dev server, I get this warning:
WARNING in ./node_modules/esri-leaflet-geocoder/node_modules/esri-leaflet/src/EsriLeaflet.js 2:0-51
Should not import the named export 'version' (reexported as 'VERSION') from default-exporting module (only default export is available soon)
# ./node_modules/esri-leaflet-geocoder/dist/esri-leaflet-geocoder-debug.js 5:102-125
# ./src/index.tsx 34:0-31
I read the question Error: Should not import the named export 'version' (imported as 'version'), which seems to be the most closely related. But in my case, ther issue is buried within the external module of esri-leaflet-geocoder, so I really don't have any control over the code in it.
Is it possible to tell webpack dev server to ignore this specific kind of warning, or any warning that originates from within the node_modules folder? I want to keep warnings from within my own code, but not print warnings if they're caused by code in a node_module. Is this kind of granular control over warnings possible in webpack? How can I ignore this warning?

Trying to import CSS, Error: EISDIR: illegal operation on a directory, read

So I am trying to use the Vue-Quill package as a text-editor.
Following the Installation instructions on their webpage with NPM.
Vue-Quill installs, without an error in the browser:
import { QuillEditor } from '#vueup/vue-quill'
import '#vueup/vue-quill/dist/vue-quill.snow.css';
But after trying to import the CSS like in the instructions and make it available globally, it throws me the following error:
./node_modules/#vueup/vue-quill/dist/vue-quill.snow.css
(./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-
3-1!./node_modules/postcss-loader/src??ref--6-oneOf-
3-2!./node_modules/#vueup/vue-quill/dist/vue-quill.snow.css)
and in the console:
Uncaught Error: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: EISDIR: illegal operation on a directory, read
In other StackOverflow question I already got the tip to:
Make sure the file is actually a file (not a directory)
Give it the permissions 777
So far, non of the steps introduced didn't yield any good result.
So, how do I get to resolve this issue for importing a CSS?

Module not found while compiling in React

While trying to import the collection-preview.components.jsx file in the shop-page.jsx, there occurs an error saying:
"Module not found: Can't resolve '../../components/collection-preview/collection-preview'"
URL of the code and the error is shared in the link:
I would like to know what am I missing here and why the files are not getting compiled.

Your file called collection-preview.component but you import collection-preview, just change the name to collection-preview.component, it should work
You could also drop js and jsx ending for files when importing :)