pradel / create-react-app-swc

Use swc in your create-react-app for faster compilation, development and tests
MIT License
129 stars 11 forks source link

Failed to compile #25

Open Remeic opened 2 years ago

Remeic commented 2 years ago

Hi, i have this issue:

Failed to compile.
./src/index.tsx
TypeError: this.getOptions is not a function

craco-swc version: ^0.5.1 typescript version: ~4.0.8 react version: ^16.14.0 react-app-rewired ^2.1.8 Os: windows

craco config:

const CracoSwcPlugin = require('craco-swc');

module.exports = {
  plugins: [
    {
      plugin: CracoSwcPlugin,
      options: {
        swcLoaderOptions: {
          jsc: {
            externalHelpers: true,
            target: 'es2015',
            parser: {
              syntax: 'ecmascript',
              jsx: true,
              dynamicImport: true,
              exportDefaultFrom: true,
            },
          },
        },
      },
    },
  ],
};

Behaviour: start project in dev mode with craco start

Tell me if i have to add other information to solve the problem

Thanks in advance!

Remeic commented 2 years ago

Maybe this is related or can help? https://github.com/swc-project/swc/issues/4484

slicejacob commented 2 years ago

I'm running into this same issue. I've followed the instructions (to change the version) that was mentioned in https://github.com/swc-project/swc/issues/4484. However that did not work.

Any suggestions are welcome.

min9nim commented 2 years ago

I've had a same error.

Try it like this. it works!

// craco.config.js
const CracoSwcPlugin = require('craco-swc');

module.exports = {
    plugins: [
        {
            plugin: {
                ...CracoSwcPlugin,
                overrideCracoConfig: ({ cracoConfig }) => {
                    if (typeof cracoConfig.eslint.enable !== 'undefined') {
                        cracoConfig.disableEslint = !cracoConfig.eslint.enable;
                    }
                    delete cracoConfig.eslint;
                    return cracoConfig;
                },
                overrideWebpackConfig: ({ webpackConfig, cracoConfig }) => {
                    if (
                        typeof cracoConfig.disableEslint !== 'undefined' &&
                        cracoConfig.disableEslint === true
                    ) {
                        webpackConfig.plugins = webpackConfig.plugins.filter(
                            (instance) => instance.constructor.name !== 'ESLintWebpackPlugin',
                        );
                    }
                    return webpackConfig;
                },
            },
            options: {
                swcLoaderOptions: {
                    jsc: {
                        externalHelpers: true,
                        target: 'es5',
                        parser: {
                            syntax: 'typescript',
                            tsx: true,
                            dynamicImport: true,
                            exportDefaultFrom: true,
                        },
                    },
                },
            },
        },
    ],
};

ref) https://jwchang0206.medium.com/make-create-react-app-faster-with-rust-6c75ffa8fdfd