We Keep Coding

anyone know how i can debug this error in sveltekit

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
at formatError (file:///app/abd/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41389:46)
at TransformContext.error (file:///app/abd/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41385:19)
at TransformContext.transform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39628:22)
at async Object.transform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
at async loadAndTransform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)
i've tried actually changing the file extension, but that led me down a rabbithole which ended in more errors.
not sure what's going on but this project uses typescript.
i uninstalled vite, and then reinstalled it, and now get:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
at formatError (file:///app/abd/node_modules/vite/dist/node/chunks/dep-9912c491.js:41395:46)
at TransformContext.error (file:///app/abd/node_modules/vite/dist/node/chunks/dep-9912c491.js:41391:19)
at TransformContext.transform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-9912c491.js:39629:22)
at async Object.transform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-9912c491.js:41662:30)
at async loadAndTransform (file:///app/abd/node_modules/vite/dist/node/chunks/dep-9912c491.js:39467:29)
any suggestions?

Webpack/jQuery: "Uncaught ReferenceError: $ is not defined" when importing other modules

I have a project that I'm using Webpack for, and I am trying to use the autocomplete feature of jQuery-UI. However, whenever I import jQuery-UI into my app.js file using `import 'jquery-ui/ui/widgets/autocomplete', it breaks jQuery and I get the error:
Uncaught ReferenceError: $ is not defined.

The problem was fixed when I changed import 'jquery-ui/ui/widgets/autocomplete into require(jquery-ui/ui/widgets/autocomplete) in my apps.js file (or index.js or whatever your entry file for Webpack is).
Again, I have no idea why this works, but it does, and I can't argue with that.
Thanks to https://stackoverflow.com/a/42465244/10757677 for the inspiration.

Typescript module not found (Vue) and unexpected token #Component

GOAL
I am trying to setup Typescript, Vue, and Vuetify in Codesandbox, but it seems like nothing will cooperate.
I copied code straight from a normal Vue app initialized with Vue CLI and it doesn't work :/
PROBLEM
Typescript will not recognize .vue files (such as import App from "#/App.vue"; in main.ts)
In App.vue, eslint keeps flagging # from the #Component decorator EVEN though I set a parser in .eslintrc.js
ATTEMPTED SOLUTIONS
I tried to solve the problem with Typescript not recognizing .vue files using Importing Vue components in TypeScript file
BUT it doesn't work anymore. Also, this implementation makes every import hyperlink go to vue-shim.d.ts. When I CNTRL click the import to go to the imported file's contents, I go to vue-shim.d.ts instead of to the imported file.
I tried solving the #Component decorator problem with eslint using ESLint unexpected character '#' for JS decorators
BUT it did nothing.
CODE
https://codesandbox.io/s/infallible-framework-pjbx1?file=/src/App.vue

typescript: relative modules were not found

I am converting code from javascript to typescript as a part of a migration process.
I need to import 'xyz.css' file in my another file like 'abc.ts'. both the files are in the same directory. I am importing the file as follows :
import '../../xyz.css';
and it gives me an error :
relative modules were not found:
'../../../xyz.css' in '../../dist/abc.js'
This error occurs while webpack compilation process.
Please give a suggestion to resolve same.
Thanks!

For non-node_modules based modules, you should use a path, usually a relative path. So if you're trying to reference xyz.css from the same directory as your typescript file, you would use
import './xyz.css';

Importing js library that doesn't have exports

I have a ngDraggable.js library in my node_modules folder which must be included as dependency as follows:
import draggable from 'ngDraggable';
ngDraggable.js doesn't have exports so I used the work around from some SO answer which I cannot find any more. It was suggested to use an index.js file withing the same folder, which would import ngDraggable.js and export it. For some reason this file was lost and I can't remember that 2 lines of code doing this:( I tried this, but it doesn't work at all:
import ngDraggable from './ngDraggable';
export default angular.module('ngDraggable', [ngDraggable]);
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"default":{"default":{"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[{}],"name":"ngDraggable"}}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.6.1/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at http://localhost:3000/index.js:17216:12
Where 'app' is the main module representing the application and "default" must the module that imports ngDraggable and exposes it for main module

I found the copy of missing file. Here's the code snippet
require('./ngDraggable.js');
module.exports = 'ngDraggable';

you can try
import * as draggable from 'ngDraggable';