Open Tordek opened 2 years ago
This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.
Pinging to keep alive.
Having the same issue on mac after I upgraded to Create React App, it's only happening while running the unit tests. But it's not happening because of a dependency, it happens within the app code.
@Tordek @FezVrasta I have the same issue. Did you solve it?
https://github.com/facebook/create-react-app/issues/11928 (includes a workaround I found)
@FezVrasta Same issue on Ubuntu. I started a new project using npx to call Create React App. I tried importing a component from another local React project and got a similar error message.
@Tordek Did you ever resolve this?
No, I had to copy the components into the new project. Very much against DRY principle.
@keithpickering no, the issue remains and can be reproduced as per the steps in the OP.
I have the same issue
i'm not that happy to join this club 🥇
Support for the experimental syntax 'jsx' isn't currently enabled
after creating a TypeScript react project and installing an NPM package with react components created with JavaScript.
If anyone missed it, I provided a workaround for this issue here https://github.com/facebook/create-react-app/issues/11928#issuecomment-1015175497
Hi, is there a working solution for this? The workaround above does not work for me, I am using react-native-maps which uses fragments and triggers the error.
I'm hitting this issue too, I'm however on Linux and am not using toMatchInlineSnapshot()
which others have reported as being the issue.
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { Button } from "./Button";
describe("Button", () => {
it("matches snapshot", () => {
render(<Button onClick={function () {}} />);
expect(screen.getByText("Click Me")).toBeInTheDocument();
});
});
This is from a sample project https://github.com/IPWright83/pnpm-monorepo. I don't understand why this is happening now however, as it wasn't an issue when I set the project up originally. It's easy to reproduce in there by running:
npm install -g pnpm
pnpm install
pnpm test
I have managed to workaround it, but it's not nice. I have to, add the .babelrc
file from https://github.com/facebook/create-react-app/issues/11928#issuecomment-1015175497 and I also need to add the following at the top of every test file:
/**
* @jest-environment jsdom
*/
bump, same for Mac.
@FezVrasta it wasn't viable for me.
Same issue happening for me when I try to add a folder with few components from "Project B" to my "Project A" as soft links using "mklink" command. None of the components in this folder has any dependency outside the folder. So their is no possibility that it is trying to refer something from "Project B" which is not available in "Project A" solution
I tried creating .babelrc and babal.config.js in different different formats and none worked. Finally I had to copy paste the files itself directly after which it is working.
bump, still haven't been able to resolve this
I'm having the same issue as well. I did create the create-react-app using typescript template, though.
Same issue. create-react-app
using typescript template.
I am having the same issue (on Ubuntu) and @space-cadett 's answer I don't think is the solution because this is not about class properties.
I fixed it by adding
@babel/plugin-proposal-class-properties
into webpack config plugin. The module section of my webpack.config.js looks like thismodule: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/react',{ 'plugins': ['@babel/plugin-proposal-class-properties']}] } }, ], },
What has Class properties do with file extension ?
Actually... that helped me. Odd.
Getting the same error while importing files from a dependency package where files have the extension .js
.
Same error. Any update ?
I'm also having this same issue. the workaround didn't work for me. Can someone who's a contributor please address this issue and offer example code solution
I am also hitting the same problem with gatsby. Any help is appreciated.
Compiled with problems:
ERROR in ./node_modules/gatsby/cache-dir/head/head-export-handler-for-browser.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/stathis/src/anarres-frontend-v2/node_modules/gatsby/cache-dir/head/head-export-handler-for-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (113:9):
111 | // Note: In dev, we call onHeadRendered twice( in FireCallbackInEffect and after mutualution observer dectects initail render into hiddenRoot) this is for hot reloading
112 | // In Prod we only call onHeadRendered in FireCallbackInEffect to render to head
> 113 | <FireCallbackInEffect callback={onHeadRendered}>
| ^
114 | <StaticQueryContext.Provider value={staticQueryResults}>
115 | <LocationProvider>
116 | <Head {...filterHeadProps(pageComponentProps)} />
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
at instantiate (/home/stathis/src/anarres-frontend-v2/node_modules/@babel/parser/lib/index.js:72:32)
...
The JSX syntax extension is not currently enabled
script:/Users/vitou/My-doc/Vue/ecommerce/src/layouts/HeaderLayout.vue?id=0:7:8:
7 │ icon: <tamplate>hi</tamplate>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
const routes = [{
id: 1,
name: "Home",
slu: "/",
icon:
Still waiting for a solution on this issue
Also experiencing the same issue
Also having this problem.
having the same problem with another React package linked in cra
I had the same issue.
First check out that you have rendered correctly to an index.js
file in a /dist
folder, and then check that in the package.json
file your main
attribute is pointing to the right /dist file, for example:
{
"name": "react-floating-mailbox",
"version": "1.0.3",
"description": "...",
"main": "dist/index.js", // "dist/index.js" not just "index.js"
}
Same issue occur after trying so many solutions no result found
I have resolved this issue you can see my code from github https://github.com/Uttam146/uttam_rawat-popups/tree/master/src/package
Also having the same issue with another package.
@Uttam146 This worked until babel couldn't parse a css file being imported. I added "type": "module" to package.json but still cannot parse.
I am having this issue too. I cannot get google-map-react to work after two days of messing around with typescript configs and babel configs
Same issue persists here. All this time and not anything definitive from CRA?
solved by following jest docs
npm install --save-dev react-test-renderer
after which the Jest Runner
VS Code plugin shown the functional Debug Test
The
npm run test
is functional as well.
I solved the problem with a custom transformer -> https://jestjs.io/docs/tutorial-react#custom-transformers
Steps to reproduce:
.js
extension but usesjsx
syntax.Result:
However the offered solution does not work because
react-scripts/options/webpack.config.js
disables thebabelrc
option.On the other hand, this problem only seems to exist on Windows; it works fine in Linux.