pradel / create-react-app-swc Goto Github PK

View Code? Open in Web Editor NEW

128.0 3.0 11.0 2.9 MB

Use swc in your create-react-app for faster compilation, development and tests

License: MIT License

JavaScript 98.23% Shell 1.77%

create-react-app-swc's Introduction

🚀 create-react-app-swc 🚀

Use swc in your create-react-app for faster compilation, development and tests.

Features

javascript / typescript support
Replace babel-loader with swc during development
Replace babel-loader with swc for faster build time
Replace babel with swc when running jest tests

Getting started

Follow the guide to setup your project.

FAQ

Why is it faster?

Internally create-react-app use babel to compile the javascript / typescript files of your application. By using craco-swc, you use the swc compiler to compile your app instead of babel. swc is a super fast javascript / typescript compiler written in Rust.

What is craco and why do I need it?

craco (Create React App Configuration Override) is an easy and comprehensible configuration layer for create-react-app. By using craco you can customise the create-react-app configuration without ejecting.

What are the differences with create-react-app?

Since babel is not used, you won't be able to use the babel plugins (eg: babel-plugin-macros, babel-plugin-transform-react-remove-prop-types, ...).
No flow support

License

MIT © Léo Pradel

create-react-app-swc's People

Contributors

Stargazers

Watchers

Forkers

bglgwyng lyhourchhen loutsoi852 dwat3r amnats luislozad ianldgs sekkmer oleglustenko saschati space87

create-react-app-swc's Issues

Failed to install on a fresh CRA setup

npm version: 8.13.2
Node version: v16.15.1

What i've done:

npx create-react-app . --template typescript
npm install --save-dev craco-swc @craco/craco

What i've got:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR!   peer react-scripts@"^5" from [email protected]
npm ERR!   node_modules/craco-swc
npm ERR!     dev craco-swc@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   dev @craco/craco@"*" from the root project
npm ERR!   peer @craco/craco@"^6 || ^7" from [email protected]
npm ERR!   node_modules/craco-swc
npm ERR!     dev craco-swc@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\MYUSER\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MYUSER\AppData\Local\npm-cache\_logs\2022-07-27T22_27_20_702Z-debug-0.log

Incompatible dependency versions

Hi!

The version of craco that this library requires is 6, and react-scripts 5.
However, craco 6 doesn't support react-scripts 5. Only craco 7, which is in alpha, supports react scripts 5.
That's why I asked you to put "@craco/craco": "^6 || ^7" here: https://github.com/pradel/create-react-app-swc/pull/13/files/b33d44c555614a5e5a337c681cbbd95ce96ca18f#r837358369

Now with npm 8.6.0, I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   dev @craco/craco@"^7.0.0-alpha.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^6.0.0" from [email protected]
npm ERR! node_modules/craco-swc
npm ERR!   dev craco-swc@"^0.5.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   peer @craco/craco@"^6.0.0" from [email protected]
npm ERR!   node_modules/craco-swc
npm ERR!     dev craco-swc@"^0.5.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

People trying to do npm i -D @craco/craco craco-swc are likely having the same problems.

Why make a new repo?

I haven't really looked through this repo, but I just was wondering why you decided to make a new repo for this rather than trying to make a PR for https://github.com/facebook/create-react-app to create an option to create a React app using swc. If you were able to get it in there would probably be more adoption. But I also realize I might not see the whole picture so I'm curious if you've thought of this and maybe had particular reasons not to pursue it.

Failed to compile

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!

Craco 7.0.0-alpha.3

Hi,

Is there a way to install this package with Craco version 7.0.0-alpha.3?

SVG import not working

Same as pradel/create-react-app-esbuild#6, but for this plugin

Maybe CRA 4 uses SVGR babel plugin and since these plugins remove the babel-loader, it breaks things?

Trying to use with React Typescript

./src/index.tsx
Error: Argument at `2` is not JsBuffer

Caused by:
    unknown field `jsx`, expected one of `tsx`, `decorators`, `dynamicImport`, `importAssertions` at line 1 column 318
    at Generator.next (<anonymous>)
    at new Promise (<anonymous>)

`craco-swc` is set and builded successfully, but build time is not improved

There was many error and hard things for setting. But I finally applied craco-swc.

Build is successfully, but build time is same with the before.

Is this builded with SWC right?


$ CI=false craco build
Creating an optimized production build...
Compiled with warnings.

src/ui-component/svgs/ClearIcon.tsx
  Line 1:11:  'IProps' is defined but never used  no-unused-vars
  Line 1:11:  'IProps' is defined but never used  @typescript-eslint/no-unused-vars

src/views/basic/channels/MediaTitleSection.tsx
  Line 16:21:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/views/basic/extract/ExtractData/Methods.tsx
  Line 6:13:  'methods' is assigned a value but never used  no-unused-vars
  Line 6:13:  'methods' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 6:22:  'set' is assigned a value but never used      no-unused-vars
  Line 6:22:  'set' is assigned a value but never used      @typescript-eslint/no-unused-vars

src/views/basic/extract/ExtractData/SelectMethod.tsx
  Line 9:13:  'fileFormat' is assigned a value but never used  no-unused-vars
  Line 9:13:  'fileFormat' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 9:25:  'cronExp' is assigned a value but never used     no-unused-vars
  Line 9:25:  'cronExp' is assigned a value but never used     @typescript-eslint/no-unused-vars
  Line 9:51:  'set' is assigned a value but never used         no-unused-vars
  Line 9:51:  'set' is assigned a value but never used         @typescript-eslint/no-unused-vars

src/views/basic/extract/ExtractStatus.tsx
  Line 18:9:  Expected { after 'if' condition  curly

src/views/basic/settings/manage-member/DialogAllowRequest.tsx
  Line 7:8:  'NoticeIcon' is defined but never used  no-unused-vars
  Line 7:8:  'NoticeIcon' is defined but never used  @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  365.42 kB  build/static/js/main.c22e64ac.js
  130.82 kB  build/static/js/735.db0611e8.chunk.js
  33.18 kB   build/static/js/886.c26cd2e9.chunk.js
  20.05 kB   build/static/js/678.1f9547b2.chunk.js
  13.41 kB   build/static/js/344.505da510.chunk.js
  10.17 kB   build/static/js/555.3e14bb8d.chunk.js
  9.17 kB    build/static/js/87.dffa06c0.chunk.js
  7.98 kB    build/static/js/493.99df19b2.chunk.js
  7.62 kB    build/static/js/36.c2de9bbb.chunk.js
  7.09 kB    build/static/js/294.4c0b979f.chunk.js
  6.93 kB    build/static/js/857.e85c113b.chunk.js
  6.06 kB    build/static/js/17.2e43309d.chunk.js
  5.77 kB    build/static/js/197.e7058c6e.chunk.js
  5.68 kB    build/static/js/244.582fe0f6.chunk.js
  4.99 kB    build/static/js/792.8f22dbde.chunk.js
  4.92 kB    build/static/js/234.d3cbfd63.chunk.js
  4.38 kB    build/static/js/523.0d685f5f.chunk.js
  4.24 kB    build/static/js/728.5cf0ee71.chunk.js
  3.74 kB    build/static/js/313.01f92276.chunk.js
  3.46 kB    build/static/js/131.0759c005.chunk.js
  3.45 kB    build/static/js/165.56692534.chunk.js
  3.23 kB    build/static/js/667.15df853b.chunk.js
  3.06 kB    build/static/js/641.b42e0f10.chunk.js
  2.85 kB    build/static/js/170.8ee6c5a2.chunk.js
  2.68 kB    build/static/js/469.2d7ebb8e.chunk.js
  2.43 kB    build/static/js/966.4e58be79.chunk.js
  2.33 kB    build/static/js/867.d65eb47c.chunk.js
  2.01 kB    build/static/js/182.722a9efa.chunk.js
  2.01 kB    build/static/js/319.ea761dd3.chunk.js
  1.91 kB    build/static/js/592.cb7bb8c6.chunk.js
  1.8 kB     build/static/js/720.e1880a9b.chunk.js
  1.78 kB    build/static/js/787.88e3aee4.chunk.js
  1.66 kB    build/static/js/517.ae9dd1c9.chunk.js
  1.41 kB    build/static/js/584.ecef28f0.chunk.js
  1.33 kB    build/static/js/74.035de2b8.chunk.js
  1.23 kB    build/static/css/main.8ae4e198.css
  1.23 kB    build/static/js/80.2178ad19.chunk.js
  509 B      build/static/js/773.22552805.chunk.js
  308 B      build/static/js/683.2c3de2c4.chunk.js
  304 B      build/static/js/581.ff1bd043.chunk.js
  303 B      build/static/js/809.7651cc27.chunk.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

✨  Done in 71.14s.

Process finished with exit code 0

How do I confirm whether swc is used or not on build?

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

module.exports = {
    plugins: [
        {
            plugin: CracoSwcPlugin,
            options: {
                swcLoaderOptions: {
                    jsc: {
                        externalHelpers: true,
                        target: 'es5',
                        parser: {
                            syntax: 'typescript',
                            tsx: true,
                            dynamicImport: true,
                            exportDefaultFrom: true,
                        },
                    },
                },
            },
        },
    ],
}

../common/store/users/in-flight-activity-slice.js 12:37
Module parse failed: Unexpected token (12:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   reducers: {
|     addInFlightActivity: (state, action) => {
>       const addedId = action.payload?.id;
|

Here's my .swcrc file.

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": true,
      "exportDefaultFrom": true,
      "decorators": true,
      "decoratorsBeforeExport": true
    },
    "transform": {
      "legacyDecorator": true
    },
    "target": "es5",
    "externalHelpers": true
  }
}

It seems swc should have no problem with optional chaining but haven't had any success here. 😄