Tag: webpack

Import dynamically external JavaScript module in React component

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

webpack not able to resolve node_modules material-icons

javascript material-ui npm-package reactjs webpack

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 my idea is: delete the node_modules folder run yarn/npm

React-select library crashing my page on render

javascript react-select reactjs webpack

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: object. The code which procedurally generates these select elements looks as such And

How can I keep track of game data that is changing without using global variables? [webpack]

javascript object 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 to access the

How to display build version in React/webpack app

javascript reactjs version webpack

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 if you are not using typescript you don’t have to declare ‘VERSION’ variable. You can call it straight from

How to define custom Express.js route for vite dev server

javascript vite webpack

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 environment variables from a service

Babel 7.18 doesn’t transpile components outside the project root directory

babeljs javascript node.js webpack

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 like this: Here’s the project1/package.json, I have configured sharedlib as a local

What does the :8 mean in Webpack’s output variables. filename: [name][contenthash:8]?

javascript reactjs webpack

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 in the docs, I found this

how to enable top level await in reactjs

javascript reactjs webpack

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 webpack configuration options ` What

Webpack, disable the export of assets referenced in SCSS/CSS

javascript sass sass-loader webpack

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 development? I understand this for production but