I have a Javascript module that looks like: I need to import this script in React. This is what I tried: Defined a useScript method: Use it to load the script in React component: This gives me the error: Note, that if I remove export from the JS file then it works. However, I need the export and not sure
Tag: webpack
webpack not able to resolve node_modules material-icons
Here is the error I am getting However I uninstalled material-icons before this and this is my package.json I tried installing however it is not getting re installed and still my page stopped rendering. Answer There must be some uninstalled packages that are probably conflicting. What you should try doing in …
React-select library crashing my page on render
I am currently attempting to implement react-select into a web-app I am developing, but whenever it is rendered it crashes the entire react application with minified error #130 – Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: …
How can I keep track of game data that is changing without using global variables? [webpack]
I had a simple Rock Paper Scissors game where I used global variables to keep track of game data like player score, computer score, the state of the game (ongoing = true/false), etc. I recently learned how to use webpack so I bundled up my code into modules to practice in this format, and now I’m unable…
How to display build version in React/webpack app
I need to version every build and display it in app. I’ve tried to use this tutorial but it didn’t work for me https://dmitriy-comarov.medium.com/app-version-from-package-json-with-react-and-webpack-84097bd3f4f9 Is there any way to make it work? Answer You still can follow this tutorial above but …
How to define custom Express.js route for vite dev server
I am translating my app from webpack configuration into vite. My current webpack dev server has custom endopint configured for doing some stuff. I need to have this same endpoint in vite config as well. How to do this? How can I define an express.js route for vite dev server? This endpoint is for loading envi…
Babel 7.18 doesn’t transpile components outside the project root directory
I have a component sharedlib outside the babel root directory of project1. I used to use webpack to package this project without problems, but when I configured babel, I got the following error： The demo project to reproduce the problem is on github https://github.com/xybei/test_babel My project directory is …
What does the :8 mean in Webpack’s output variables. filename: [name][contenthash:8]?
I’m configuring Webpacks output and i have run into some examples which have this unusual syntax added on the end. Ok now you see the :8’s after fullhash? what extra feature does it provide? My first guess was UTF-8??? But that’s just a stab in the dark. Answer So from a quick little search …
how to enable top level await in reactjs
I have installed craco using yarn add @craco/craco I have also replaced the scritps and have created a craco.config.js but when I’m trying to use await at top level I’m still getting this error in my react app Answer In the craco docs, it says you need to add a configure block to handle any webpac…
Webpack, disable the export of assets referenced in SCSS/CSS
When running Webpack in development, it generates the correct bundle.js and style.css with source maps, but all the assets referenced in the SCSS files are copied to my Webpack output folder, along with a hash before them, like so: Is there a way to disable the hashing & copying of assets for local develo…