Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX syntax extension is not enabled #55

Open
ravgeetdhillon opened this issue Mar 17, 2022 · 1 comment
Open

JSX syntax extension is not enabled #55

ravgeetdhillon opened this issue Mar 17, 2022 · 1 comment

Comments

@ravgeetdhillon
Copy link

When I run craco test "--watchAll=false", I get the following error in one of my tests:

<stdin>:69:11: ERROR: The JSX syntax extension is not currently enabled

Here's how my craco.config.js looks like:

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        esbuildLoaderOptions: {
          loader: "tsx", // Set the value to 'tsx' if you use typescript
          target: "es2015",
        },
        esbuildMinimizerOptions: {
          target: "es2015",
          css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
        },
        skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
        esbuildJestOptions: {
          loaders: {
            ".ts": "ts",
            ".tsx": "tsx",
          },
        },
      },
    },
  ],
  webpack: {
    configure: (webpackConfig, { env }) => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin",
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);

      if (env === "development") {
        const fileLoader = {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|webp)$/i,
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 256000,
              },
            },
          ],
        };
        addBeforeLoader(webpackConfig, loaderByName("url-loader"), fileLoader);
      }

      return env === "development" ? webpackConfig : smp.wrap(webpackConfig);
    },
  },
  babel: {
    plugins: [
      [
        "@simbathesailor/babel-plugin-use-what-changed",
        {
          active: process.env.NODE_ENV === "development", // boolean
        },
      ],
    ],
  },
};

If I set skipEsbuildJest to true, then all the tests pass.

Can you tell me if I'm doing something wrong or if it's a bug in the package?

@kaiofelipejs
Copy link

I remove the esbuildJestOptions config and works with default configuration

  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        esbuildLoaderOptions: {
          // Optional. Defaults to auto-detect loader.
          loader: 'jsx', // Set the value to 'tsx' if you use typescript
          target: 'es2015',
        },
        esbuildMinimizerOptions: {
          // Optional. Defaults to:
          target: 'es2015',
          css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
        },
        skipEsbuildJest: false, // Optional. Set to true if you want to use babel for jest tests,
      },
    },
  ] 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants