pradel / create-react-app-esbuild

Use esbuild in your create-react-app for faster compilation, development and tests
MIT License
561 stars 34 forks source link

JSX syntax extension is not enabled #55

Open ravgeetdhillon opened 2 years ago

ravgeetdhillon commented 2 years ago

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 commented 1 month ago

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,
      },
    },
  ]