Questions tagged [babeljs]
Babel, the JavaScript compiler, undergoes a remarkable transformation. It converts ES6+ (or ES2015) code into astonishingly compatible ES5 code.
I have been struggling to successfully build my react package for publishing. Despite checking multiple resources, including stackoverflow and other websites, I am unable to find a solution that works for me. Here is an excerpt from my package.json: { " ...
Check out the code on Github: https://github.com/bhatvikrant/IndecisionApp I have already run npm i and then executed yarn run dev-server, utilizing webpack. My operating system is MacOs. I have also created the .babelrc file. The issue I encountered aft ...
Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...
Currently, I am developing a React website that includes distinct sections such as contact management and message management. Each of these sections is quite extensive. To navigate to these sections, we use a single dashboard for control. Since separate ...
While attempting to integrate Jest with VueJS, I encountered an issue: Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15). To resolve this, I had to include "@babel/core": "^7.7.5", " ...
When it comes to importing or requiring JSON (.json) files in TypeScript code, there have been multiple questions addressing similar issues. However, my query specifically pertains to requiring a JSON file within an ES6 module that is transpiled to the cur ...
I created my own npm package for React, which we'll call @group/package. Within this package, I developed exportable hooks. One example is a hook called useFetchWithRefreshToken. This hook always calls the same API_URL, but the specific URL depends on ...
Seeking assistance with integrating a rust-generated wasm module into my NextJS project. This is how I am attempting to import the wasm: import init, { tokenize } from "@/wasm/lazyjson"; const Test = dynamic({ loader: async () => { ...
Greetings, wonderful people of the internet! I am a newcomer to the enchanting world of programming and I am facing a perplexing issue. Although Webpack is trying to guide me towards the solution, I seem to be struggling with fixing it on my own. const pa ...
I've been delving into learning typescript, react, and babel, and here is the code I've come up with: export default function App(): JSX.Element { console.log('+++++ came inside App +++++++ '); const {state, dispatch} = useContext(Store); useE ...
Currently, I have my developer tools open and I'm trying to locate the installed modules using the console. Below are the versions listed in my package.json. You can also access the compiled bundle.js at https://pastebin.com/EbTg6bSF. "devDependencie ...
Currently, I am facing an issue while running my project's tests on the CI/CD machines. These tests, which are performed using jest, have been smoothly executed on all environments for a significant period of time. However, after some package updates, ...
I have attempted numerous solutions from the Github community regarding this issue, but unfortunately none have worked for me. /node_modules/react-xml-parser/dist/bundle.js: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you ha ...
Greetings everyone, I've been experimenting with Bootstrap for Webpack, but I've hit a roadblock. After reading numerous blog articles, I found that they either rely on the outdated 'bootstrap-webpack' plugin from 7 months ago (which doesn't work out of t ...
I've been experimenting with setting the material-ui theme in Meteor using react-mounter to mount components. Initially, I encountered difficulties setting it up. However, after extending the component and following the examples on the material-ui si ...
Struggling to set up a React app using Webpack and Babel. After following various tutorials on YouTube and other websites, I keep encountering the same error whenever I run the webpack serve command, even if my index.js file is empty. [ERROR]: ERROR in .. ...
When I utilize the material-ui package in Webstorm, I am able to experience helpful auto-completion using the ctrl+space shortcut: https://i.stack.imgur.com/Pivuw.png I speculated that this feature may be attributed to the inclusion of an index.es.js fil ...
By modifying the code snippet in the settings.json file within VS Code, I successfully managed to alter the default 4-space indentation for JavaScript: "[javascript]": { "editor.tabSize": 2 }, Strangely enough, this adjustment does ...
element lies my inquiry about the process of importing CSS files and images in a React project. Specifically, I aim to create a package, share it on npm without going through the building phase, and then integrate it into a new Create React App (CRA) for ...
As a beginner in React, Webpack, Babel, and web development, I have been tasked by my company to upgrade the material-ui version for a dropdown search component. The current version used in the project is "1.0.0-beta.43", and I decided to start by upgradin ...
I keep encountering an error with Babel saying Cannot find module 'babel-plugin-svg-sprite-loader' This is the content of my babel configuration file: { "presets": ["next/babel"], "plugins": [ ["styled-compon ...
I'm currently troubleshooting my NextJS app to work in IE11. The app runs smoothly on Chrome and other modern browsers, but I encounter an error related to arrow functions when running it on IE11. I have a similar project that works on IE11 using Next.js v ...
I'm in the process of creating a boilerplate using React, Redux, ReactRouter, and Jest. However, I've encountered an issue while testing a component with react-test-renderer. I have implemented two types of tests: unit tests for my Redux actions and snaps ...
Having issues using enzyme to test my React Native project even after following the set up instructions. Link to Set Up Instructions "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "mocha --require react ...
Encountering an issue while running the command in Next.js with npm run dev, leading to an error message stating: error - failed to load SWC binary see more info here: https://nextjs.org/docs/messages/failed-loading-swc. PS D:\web-development\new ...
After adapting react-server-example (https://github.com/mhart/react-server-example), I encountered an issue with using JSX in my project. Despite making various changes like switching from Browserify to Webpack and installing babel-preset-react, I am still ...
While attempting to convert a PHP script to JavaScript using babel-preset-php, I encountered the following error: Error: Plugin 0 specified in "/media/deep/5738c180-2397-451b-b0b5-df09b7ad951e1/deepx/Documents/TestingAll/node_modules/babel-preset-php/ ...
I recently implemented Webpack for my Django and Vue project, but I encountered an error when trying to run webpack. Can anyone help me troubleshoot this issue? $ node --use_strict ./node_modules/.bin/webpack --config webpack.config.js node_modules/webp ...
Currently working with Vue and babel. I have a function that's been exported // Inside file a.js export async function get() { ... } I am trying to link this exported function to a static method of MyClass // Inside file b.js import myInterface fr ...
Having some trouble configuring the server to handle multiple entries and outputs. The application utilizes Zurb Foundation, jQuery, and React. I'm aiming to exclude jQuery and foundation from the bundle.js file, while also creating a separate bundle for ...
I am working on a project that involves Node + Express + Babel + ES6. Within this project, I have the following files: /package.json { "name": "test-backend", "version": "1.0.0", "description": " ...
Could someone assist me with my current predicament? I attempted to work with TypeScript and utilize the useReducer hook. const initialState = { a: "a" }; const [state, dispatch] = useReducer(reducer, {...initialState}); I keep encountering an error ...
Struggling to render multiple pages in React, I am a newbie and have been exploring various tutorials and pages. My stack includes React, Webpack, Babel, and ESLint with Airbnb configuration. When I render my React app, it appears like this. View of the ...
Error: Element type is invalid. Expected a string (for built-in components) or a class/function (for composite components), but received null. Verify the render method of TransitionGroup. This specific issue arises only when using material-ui and importin ...
To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...
While attempting to run a test, I encountered an unexpected token error with Jest. The issue seems to stem from the usage of ky http, which is not being transpiled properly. Test suite failed to run Jest encountered an unexpected token This typ ...
Currently, I am utilizing WebPack, Babel, and React within my project. The folder structure that I have in place is outlined below: node_modules/ .babelrc package.json SomeThirdPartyFolder/ node_modules/ package.json src/ FileA.js ...
In my web app, I am using Browserify, Babel, and Gulp to bundle my scripts into a single file. However, when I checked the file size, it was over 3MB which seems excessive to me. Although I'm not entirely sure how Babel and Browserify modify my sourc ...
When trying to build only Express and gql server-related files separately using webpack5, an error occurs during the process. ERROR in main Module not found: Error: Can't resolve './src' in '/Users/leedonghee/Dropbox/Project/observer/Homepage/v2/server ...
I am currently working on two separate projects, one being an app and the other a webapp. The app project is already set up with react-native-dotenv and is functioning as expected. However, when I attempt to use the same code for the webapp, I encounter an ...
I've integrated babel-preset-react-app into my project with the following .babelrc configuration: { "presets": ["react-app"], "plugins": [ "transform-es2015-modules-commonjs", "transform-async-generator-functions" ] } Currently, I&apos ...
Recently set up a fresh Vue project on Windows 7 using the VueJS UI utility. Unit testing with Jest enabled and added babel to the mix. However, when running "npm test" in the command line, an error is returned stating 'Error: no test specified' ...
Exploring ES6+ (modern JavaScript) is a new adventure for me, and I've discovered that in order to use it in browsers, tools like babel-minify or terser are necessary. It's interesting to note that Babili was initially thought to be a separate to ...
I've encountered an issue while building and publishing a package on npm with babel. The build process is showing me the following warning: Line 1: 'use strict' is unnecessary inside of modules strict Line 23: Unexpected mix of '||' and '&&' ...
Struggling with ES6 to perform a seemingly simple task, I am attempting to fetch JSON API data for Bitcoin from three different websites: The problem lies in the fact that all these sites provide only a single endpoint leading directly to the price value ...
UPDATE: After struggling with my own custom Webpack setup, I decided to switch to using react-scripts, and now everything is compiling smoothly. It seems like the issue was indeed with my Webpack/Babel configuration, but I still can't pinpoint the exact ca ...
I recently converted my AngularJS application to es6 using webpack and the import/export syntax. Everything is running smoothly, except for the this keyword. Due to webpack wrapping all of my code into iife functions during compilation (modules), the thi ...
Encountering an ES6 import issue in Mocha test cases currently. Even after attempting to add the latest Babel and presets, the issue remains unresolved. Various solutions have been tested but none seem to fix the problem. This snippet shows my package.jso ...
One notable feature of Next.JS is its use of babel in configuring the Why Did You Render. module.exports = function (api) { const isServer = api.caller((caller) => caller?.isServer) const isCallerDevelopment = api.caller((caller) => caller?.i ...
Struggling to deploy firebase functions and encountering multiple issues. During the deployment process, facing a babel error: Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault' at Function.Module._resolveFilen ...
Have you ever considered bundling all of your classes into a single file without using Babel to polyfill it to ES5? If the browser doesn't support ES6, you could then use Babel in the browser or load the polyfilled bundle and manually add the dependencies. ...
Within my package.json, I have a start-script that I utilize in my development environment. This is how it looks: "scripts": { "dev": "NODE_PATH=src nodemon --watch src/ --exec babel-node src/app.js" } Upon running npm run dev, everything runs smooth ...
Yesterday, I successfully followed the instructions on React Native's Android Setup Page and ran the code without any issues. However, today when I attempted to run the same code, it displayed a "build is successful" message but only showed a android/ ...
Exploring the pipeline operator implementation in my Typescript project has been quite a journey. Leveraging babel as my trusty transpiler and Typescript as the vigilant type checker was the initial plan. The quest began with configuring babel to work sea ...
Struggling to create a simple Angular todo application using ES6. Despite the controller being registered correctly, I keep encountering an error related to the title when navigating to the associated state. *Note: App.js referenced in index is the Babel ...
I've been utilizing Babel for some time now and it effectively transforms my ES Next code to the dist directory using this command: babel src --out-dir dist --source-maps --copy-files Up until now, all my JavaScript code has been stored in the src folder. ...
When running test runs, issues arise when using standard HTML tags with Jest. My setup includes Babel, Webpack, Jest, and React Testing Library. To enable jest, I have installed a number of packages: "@babel/plugin-proposal-class-properties": "7.8.3", "@ ...
I experimented with Server-Side Rendering (SSR) in my React application for SEO benefits. Although I encountered certain errors, they were not considered actual errors by React. Initially, the error appeared in componenDidMount=()=> Upon commenting ou ...
Currently, I am working on a Next.js application and I need to customize Babel in order to run my Jest test suite. The issue I'm facing is that when I configure the babel.config.js file, Jest runs successfully but Next.js also picks up this configurat ...
I seem to be having trouble with styled components; something must be off in my setup. Here's the component I'm working with: import React from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` d ...
I recently wrote a simple code in ES6 import { scale } from 'd3-scale'; const a = scale.scalePow().domain([0, 20]).range([0, 1, 2, 30, 560, 1]); console.log(a(1)); To install the required dependency 'd3-scale', you can use: npm ins ...
As I was testing my React project on webpack-dev-server, I encountered an issue with using the classfield syntax. The error occurred during state initialization. client:162 ./src/containers/App.js Module build failed (from ./node_modules/babel-loader/lib/ ...
Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...
Just diving into the world of React and decided to enroll in a course on Udemy React.js Essential Training However, I quickly realized that the tutorials are a bit outdated. As I was following along, I encountered an error while trying to compile my c ...
I am currently working on a React app that I developed using create-react-app. My main goal is to take user input as code and then evaluate it in order to render the output. Here's what I have attempted so far: import React, { Component } from &apos ...
Most of my components rely on interactions with my apiservice.js class, which uses Axios to handle http requests based on the method called. I understand that this may not be the recommended approach, but in every component, I include the following code: ...
For my Angular 1.4 project, I am utilizing Webpack and Babel to write in ECMA6 syntax. While I prefer using ECMAScript 6 import/export default module syntax, there are instances where I need to employ Webpack loaders like expose to globally expose modules, ...
Recently, I've been working on configuring React with Typescript (for type checking), Babel for code transpilation, Jest for testing, ESLint for code checking, and a few other tools. You can find all the necessary files in the repository linked below. I f ...
I've been attempting to launch an application using React, Webpack, and webpack-dev-server on Windows. My setup includes Node v8.9.4 Npm v5.6.0 Webpack v3.11.0 Webpack-dev-server v2.9.1. The command I use to start the app is: "start": "webpack-dev-server ...
I am currently working on a npm project called moduleA which I plan to publish to the npm registry. This project utilizes javascript along with webpack4 and babel7. While moduleA functions properly on its own, I encountered some issues with babel when atte ...
After successfully building my application in development mode, I encountered an error when attempting a production build. The error appears on the image linked below: https://i.stack.imgur.com/sNr2v.png I suspect that the issue lies within the _document ...
I am currently in the process of developing a React component library using Typescript that I want to import into another Typescript project. Specifically, I want to import an Analytics chart library into a storybook for demonstration and testing purposes. ...
An Error in Jenkins identified within the console.log terminal 13:29:56 A Syntax error has occurred: [BABEL] /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/src/index.js: Unable to locate module '@babel/plugin-proposal-priva ...
My goal is to release a UI library using React, but I am struggling with how to handle styles. When I write code in a project, I typically use webpack and babel to build my code, resulting in the creation of a *.css file. import React from 'react&ap ...
When attempting to start my project, I encountered the following error message (You may need an appropriate loader to handle this file type.) for .eot, .woff, .ttf, and .svg files: ERROR in ./src/styles/fonts/nm/icons/nm-icons.svg?aaf8685e87a6901c76c52d00 ...