Babel not transpiling `class` in *.mjs files

Given import test from './test.js'; import test2 from './test.mjs'; and test.js and test.mjs both containing class A { test() { console.log('from mjs'); // or console.log('from...

React-redux connect HOC as a class decorator, @connect

I have a component wrapped using the ES+ proposed decorator syntax form of react-redux's connect HOC: import React, { Component } from 'react'; import { connect } from 'react-redux'; import...

NPM Run Build error: "Trace: The node type RestProperty has been renamed to RestElement" with new Babel 7.0.0

We get Trace: The node type RestProperty has been renamed to RestElement warnings in our build. The build succeeds but there a a bunch of these since upgrading to babel 7.0.0 I have tried the...

Why is `unstable_Profiler` not profiling on production mode?

I have an issue with unstable_Profiler on my React-Native project that is ignoring onRender callback, but only in production mode. No errors, everything renders fine. I went by this article:...

How to install plugin-export-default-form to Babel in react project

I have been getting the following error constantly throughout this process SyntaxError: /Users/user1/npmprojects/experiments/test-reactstrap0/src/components/index.js: Support for the experimental...

Using makeStyles - useStyles() globally throws 'Invalid Hook Call' error

I get the 'Invalid hook error' using this example from Material UI's website: https://material-ui.com/styles/advanced/#GlobalCss.js import React from 'react'; import { makeStyles } from...

How to fix the warning when use @babel/plugin-transform-typescript to compile typescript

When I use @babel/plugin-transform-typescript to compile typescript, the warning happens This problem is likely caused by another plugin injecting "_class" without registering it in the scope...

Jest encountered an unexpected token (React, Typescript, Babel, Jest & Webpack setup)

I've setup a project using React, Typescript, Babel, Webpack, with Prettier & EsLint. I set the project up from scratch and had everything working nicely. I've just started to use Jest however and...

Duplicate ReactJS import issue when using npm link to test component before publishing as npm package

I have a simple component like this. import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is:...

How to config webpack to transpile files from other lerna packages (ejected from create-react-app)

I'm trying to build a lerna package with a create-react-app package and a simple component library. My component is as follows: import React, { Component } from "react"; import PropTypes from...

Error no Jest: This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript

I'm trying to run Jest with React, I started the project with --create-react-app, then added --babel and after --jest, but when I run [yarn jest], this error is displayed on screen, can anyone...

How to resolve RollUp Material-ui "withStyles is not defined"

I try to bundle an external component and loading to my app on runtime. But on loading it throws "withStyles is not defined". Has someone an idea whats missing in my rollup.conf.js? This is my...

Webpack does not resolve less loader

I'm getting crazy about the configuration of my React-Typescript-Webpack application. It is built from scratch - no create-react-app - and should work with the UI library "antd" and "storybook" as...

jest issue with typescript react components

I'm currently having an issue with Jest and Typescript inside a Lerna mono repo. Inside the test file, I've imported the component import { Doctor } from '../src'; and the test step is as...

How to enable @ experimentalDecorators in next.config.js or babelrc

Hi if someone would help me, I wanna use @Decorators on my nextjs app, but I get the following error. Hope someone knows what Im doin wrong Error message: Syntax error: Support for the...

React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"

I'm currently building a UI library to simplify maintenance across multiple applications. These currently use Ant Design. All seemed to go fine... I added my peer dependencies in both package.json...

I'm having issues setting up my jest config react native Cannot Import Components

I'm having issues related somehow maybe to babel configs or package.json file... in short i can't import any component from outside the test file here's the error: ...

Babel can't resolve imports in it its own source code

I have upgraded a React project to Webpack 5. The aliases are resolved by Babel. Everything was working fine with Webpack 4. But when launching webpack dev server, Babel makes the build crash...

Webpack: export default class is not defined on index.html

I'm new to Webpack. I have a class that I'm exporting and trying to instantiate on my index.html. (This is an updated version of the original thread) "use strict"; import {TimelineModule} from...

Babel does not compile when using Rollup's TypeScript plugin with Babel

I can't get @rollup/plugin-typescript to work with @rollup/plugin-babel, and the JS generated from TS code is not translated by Babel I looked for solutions to related problems, but they didn't...

Why Eslint don't see global TypeScript types in .vue files (no-undef)

I have a global type in my Vue/TypeScript project. In the .ts files, everything is fine, and Eslint sees it, but in the .vue files, Eslint throws error that the type is not defined. TypeScript...

React Testing Library cannot work when I use useSelector

I have one component with Redux useSelector, when I want to test the render text, it shows error message on useSelector and with the error message: could not find react-redux context value; please...

Problem Bundling React Typescript Project with Rollup

I have a Typescript React Project and bundle it using rollup. My config files are: tsconfig.json { "compilerOptions": { "outDir": "dist", "noImplicitAny": true, "module": "esnext", ...

How can I exclude style-loaders, css-loader source code out of Webpack bundle JS file?

I'm building an simple VueJS application and setup Webpack by my own (not use VueJS default Webpack). The webpack.config.js is as follows: module.exports = { entry: ['./main.js'], module:...

Adding MUI Component to Component Library results in Error "Hooks can only be called inside of the body of a functional component"

I have a component library that exports components // Test.tsx import React from 'react'; const Test = () => <p>Test</p>; export default Test; and // TestB.tsx import React from 'react'; import {...

SyntaxError: Cannot use import statement outside a module webpack-typescript

Here is webpack.config.ts // const path = require("path"); import path from "path"; import HtmlWebpackPlugin from "html-webpack-plugin"; import CopyWebpackPlugin from "copy-webpack-plugin"; import...

ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'

We are maintaining an internal library which is exporting ESM modules using Rollup. We have just recently switched to using CSS modules, which we have set with rollup-plugin-postcss. We want to...

How to configure Storybook to run from a directory other than the project root

I'm trying to configure Storybook to run from a directory that is not the root of the project and I'm having a little trouble. I've setup a mono-rep using...

How to properly setup bootstrap-vue in my Nuxt app?

I am very new to Nuxt.js application and I am trying to create a web application using the Nuxt.js and Vue.js. During the creation of the project using the Nuxt cli I have added the...

Work with web-workers using comlink on a webpack5 project with typescript

I have a project written on Typescript and bundeled using webpack5. I try to use web-workers to off-load some of the code from the min thread. main.worker.ts: import { expose } from...