Develop Reference

How to configure vite to allow JS in JSX files

I want to add a constants.js and utilFunctions.js files in my Vite-React (JSX) project but its giving me error of file format not correct
How can i config it so that it allows the JS files

How to get Typescript support for files imported using a local package.json

I'm adding package.json files in the main folders of my app to be able to import files easily, for example in constants folder there is a package.json file with {"name":"#constants"} and to import from the folder I use:
import file from '#constants'
This is very convenient, but when using Typescript I don't get error checking, autocomplete... for files imported these way.

Injecting multiple external javascript files with Webpack

Let's say I have a few external javascript files (libraries, if you prefer to call them that way). Those files haven't been adapted to any of the "modern" JS functionalities, meaning that I can't import them like I'd do with some of the most common libraries nowadays (lodash, axios, etc...). The files in question have been always used as old-style import-and-use libraries (<script src="foo.js"></script>).
How can I make Webpack pack (concatenate) all those files and inject them in the head of my index.html, right before my actual bundle?

You can download 'foo.js' manually and add it to project repo. Imagine like you have a folder called 'external-libs' and you can simply import foo.js as something like following
import '../../external-libs/foo.js';
This will be enough for Webpack to append the content of foo.js to your final bundle.

Webpack not including all required files in build

I am working on rewritting some part of a js library with WebAssembly . The library uses rollup to bundle and the output created was dist/rebound.js . My changes add an additional file rebound.wasm . I didnt use any wasm loader but just the fetch api to bring to load wasm ,
//rebound.js
fetch('rebound.wasm').then(//instantiate)
I use rollup-copy-plugin to copy the wasm file to dist/rebound.wasm. Everything is fine, the dist folder has both js and wasm file. But when I use it in a test project which uses webpack and import rebound from 'rebound' the rebound.js file is present but the rebound.wasm file is not present. The fetch api gives a 404 error.
I feel webpack may be treeshaking it as there is no explicit import statement. How do I make sure rebound.wasm would in the js build?
If you need anymore info please ask.

Webpack watch file changes and trigger loader for other files

I'm looking for a way to watch changes on files (sass files precisely) and execute a loader on other files (js files) with webpack.
The goal is to detect sass changes and recompiling all the javascript files with the babel-loader, because they might import it through the styled-jsx plugin.
I'm stuck in the "loader" concept and can't figure out how to get other files when testing for /.scss$/

You don't need to do anything by yourself if you using scss modules with webpack (more about module concept in the webpack docs.
What webpack does - it starts at entry point (you can specify one or multiple entrypoints, if you don't, default src/index.js would be used). And then builds dependency trees between modules (which can have any file extension as long as there's a specific loader that can turn file into module). Webpack then watches all files and rebuild all modules that have a dependency on changed file. So, if you import the .scss file in, let's say, your entrypoint
import './styles.scss';
// ...
It would rebuild automatically when styles.scss changes

You need to import your .scss file(s) under one of your .js files so that webpack actually picks up the changes.
Then, all loaders you have configured will be applied automatically based on which file type they should target.