assuncaocharles / create-react-app-parcel Goto Github PK

Create react apps with parcel instead of webpack cos why not

JavaScript 94.42% HTML 3.16% CSS 2.42%

create-react-app-parcel's Introduction

Hey, I'm Charles Assuncao. 🤟

I'm Brazilian 🇧🇷 based in Prague, Czechia 🇨🇿 working as Software Engineer at @Microsoft focused in front-end development to power Microsoft Teams. For long time I had opportunity to share my knowlodge as Microsoft Student Partner so now I am doing my best sharing it trough open source projects and blog posts 😃

🔭 I’m currently working on Fluent UI!
🌱 I’m currently learning about a11y and some other stuff
🙇 I’m looking to collaborate with other content creators
🎯 2020 Goals: Contribute more to Open Source projects
🌚 Fun fact: I worked as magician before development 🧙

📕 Latest Blog Posts

create-react-app-parcel's People

Contributors

Stargazers

Watchers

create-react-app-parcel's Issues

Build size differences when moving from CRA

I was very impressed with parcel's high speed builds and ease of config, so I tried to copy an existing project of mine from CRA to CRAP.

I spent some time fixing some issues with Babel, but basically all i needed to do was copy my src and public folders to a fresh CRAP app, which was very impressive.

However, I was confused to find that the build size of my prod js file has gone from 1.7mb to 4.3mb. Am I misunderstanding how parcel works? Is that file size jump expected?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

CircleCI
Travis CI
Buildkite
CodeShip
Azure Pipelines
TeamCity
Buddy
AppVeyor
But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

img

`cannot find autoprefixer` when building

CRAP doesn't work when yarn build. Although simple Parcel + React setup (without CRAP) works nicely.

λ yarn build
yarn run v1.16.0
$ react-scripts-parcel build
internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module 'autoprefixer'
Require stack:
- /mnt/c/Users/v1rtl/Desktop/Coding/test-stuff/compare-bundlers/parcel-app/node_modules/react-scripts-parcel/config/parcel.config.prod.js
- /mnt/c/Users/v1rtl/Desktop/Coding/test-stuff/compare-bundlers/parcel-app/node_modules/react-scripts-parcel/scripts/build.js

It seems that Autoprefixer is not included into CRAP, please fix.

Add service-worker.js file to write listeners like push/fetch etc

Where we can simply write event listeners like self.addEventListener('push',e=>{})

npm run build throws error "Missing class properties transform"

Without changing any of the initial generated code, running npm run build throws a "Missing class properties transform" error.

jeffbski-mbp-2017:~/working/cra-parcel-ex1 [master]$ npm run build

> [email protected] build /Users/jeff/working/cra-parcel-ex1
> react-scripts-parcel build

Creating an optimized production build...
🚨  /Users/jeff/working/cra-parcel-ex1/src/App.js:6:2: /Users/jeff/working/cra-parcel-ex1/src/App.js: Missing class properties transform.
  4 |
  5 | class App extends Component {
> 6 |   state = { toggle: true };
    |   ^
  7 |   toggleToggle = () => this.setState({ toggle: !this.state.toggle });
  8 |   render() {
  9 |     const { toggle } = this.state;
Compiled successfully.

Using with typescript

it should be possible to use CRAP with typescript since parcel is zero config with typescript. The steps so far:

crap newproject and yarn add @types/react @types/react-dom
(will PR to fix) go into node_modules/react-scripts-parcel/scripts/start and comment out paths.appIndexJs so it isn't required
rename src/index.js and src/App.js to .tsx, and go into public/index.html and change index.js to index.tsx accordingly.
(can PR some sort of tsconfig) declare var require: any at top of App.tsx
yarn start

That should work, however i run into this weird error:

react-dom.development.js:15156 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at react-dom.development.js:15156
    at App.tsx:7
    at Object.parcelRequire.14.react (App.tsx:7)
    at newRequire (src.1eb0206c.js:48)
    at localRequire (src.1eb0206c.js:54)
    at Object.parcelRequire.8.react (react-dom.development.js:15435)
    at newRequire (src.1eb0206c.js:48)
    at parcelRequire.34 (src.1eb0206c.js:75)
    at src.1eb0206c.js:101

so i am not sure how to proceed but i am documenting here for now.

I get a lot of warnings about outdated packages

Please update some packages to remove these warnings.

warning react-scripts-parcel > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other too
ls.
warning react-scripts-parcel > [email protected]: Way too old
warning react-scripts-parcel > babel-preset-react-app > babel-preset-env > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning react-scripts-parcel > eslint > file-entry-cache > flat-cache > [email protected]: CircularJSON is in maintenance only, flatted is its successor.

Browserslist, ESLint, babel-preset-react-app and fs-events should be updated

Content of 'public' folder doesn't get copied to /dist on 'yarn start'

As per the title, is this a wanted behaviour?
The function is called only in the build.js script.

yarn test error missing polyfills.js

When I run yarn test I get the following result:

yarn run v1.7.0
$ react-scripts-parcel test --env=jsdom
● Validation Error:

Module /Users/joshua/Projects/elminda/create-react-app-parcel/node_modules/create-react-app-parcel-typescript/config/polyfills.js inthe setupFiles option was not found.

Configuration Documentation:
https://facebook.github.io/jest/docs/configuration.html

error Command failed with exit code 1.

upgrade to babel 7 - slow first start

hi folks thank you for checking out my dinky little project.

i just did a bit of work upgrading to babel 7 but ran into fundamental issues with parcel 1 - see their repo over here: parcel-bundler/parcel#868

i dont think i'll be able to fix this until the parcel 2 rewrite :(

anyway the new version of CRAP is 0.33, hopefully it works out for everyone - it runs in my tests but the first startup is now 48seconds long. subsequent startups are 3seconds.

add typescript declaration file

When I open src/App.tsx I immediately see an error "[ts] Cannot find module './logo.svg'.". The solution is to add a typescript declaration file with declare module '*.svg'

Please bump all packages versions

Dev server won't start: Cannot read property 'key' of undefined

Development server won't start:

Cannot read property 'key' of undefined

I installed create-react-app-parcel globally with npm v.6.4.0
Then entered crap myapp and the process seemed to run fine.
Then I enter the directory /myapp and type npm install or yarn install
On both Windows 10 and Ubuntu 18.04 LTS I keep getting the same error when trying to start the development server.
Yarn Version: 1.10.1

The Error

warning Pattern ["babel-core@^6.26.3","babel-core@^6.26.0","babel-core@^6.0.0"] 🚨  /home/petercr/Desktop/CRAP test/myapp/src/App.js: Cannot read property 'key' of undefined

    at new PluginPass (/home/petercr/Desktop/CRAP test/myapp/node_modules/babel-core/lib/transformation/plugin-pass.js:37:24)
    at initCloneByTag (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_initCloneByTag.js:60:14)
    at baseClone (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:128:16)
    at /home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:166:30
    at arrayEach (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_arrayEach.js:15:9)
    at baseClone (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:160:3)
    at /home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:166:30
    at arrayEach (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_arrayEach.js:15:9)
    at baseClone (/home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:160:3)
    at /home/petercr/Desktop/CRAP test/myapp/node_modules/lodash/_baseClone.js:166:30

Then it just sits there 😞 😢

I then stop the process by hitting Ctrl + C
I don't know how to fix this error. But here's a screenshot of it if that helps.
Thanks this sounds like a really cool project 😎 👍 😃

Uncaught ReferenceError: Component is not defined

I wanted to try out C.R.A.P but sadly even the minimal boilerplate example I get from running
crap my-app

cd my-app
npm run build or yarn build

The error in the console for the minified js is

Uncaught ReferenceError: Component is not defined

      return mj(t, Component),
        jj(t, [{
            key: "render",
            value: function() {

Any ideas? I actually started working on a site and discovered this when I wanted to try to build and deploy it.

known issue - sometimes segfaults on starts

i dont know how to diagnose this further but it could be related to this Parcel issue parcel-bundler/parcel#1342

add react-error-overlay

Description

Errors are not being handled properly. I created a component and inside the component, I'm using {props.text} instead of {this.props.text} and it renders a blank page and does not show the error.

Steps to Reproduce:

crap myapp
yarn start
create Button.js file with the following:

import React, { Component } from 'react'

class Button extends Component {
  render() {
    return <button>{props.text}</button>
  }
}

export default Button

inside App.js add <Button text="hello"/>
navigate to http://localhost:1234/

Expected:

An error to be shown in the browser/browser console or the terminal

Actual Result:

The app does not render and shows a white screen with nothing in the browser console or the terminal.

Screenshots:

How can I remain all es6/es7 grammer?

I'm excited with create-react-app-parcel. However, I don't need the compatibility for IE and older browsers. My site needs only be opened in the latest Chrome/Edge/Firefox/Safari. So, I want almost all of the es6/es7 feature to be intact after build. Is it possible? If yes, how?

yarn start results in Unexpected token function

Trying to start the app with yarn and receiving the following:

.../node_modules/react-scripts-parcel/scripts/start.js:131
    async function start() {
          ^^^^^^^^
SyntaxError: Unexpected token function
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Parcel by default doesn't watch&rebuild sass/scss, maybe CRAP should?

I don't know how to make CRAP watch sass unless I eject and configure Parcel.
Since it's something quite common could it be added to yarn start?

Error of yarn, crap and eslint

`yarn run v1.19.1
$ react-scripts-parcel start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts-parcel package provided by Create React App requires a dependency:

"eslint": "^4.19.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

D:\react-parcel\node_modules\eslint (version: 4.19.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.
To fix the dependency tree, try following the steps below in the exact order:

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if D:\react-parcel\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts-parcel) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

Error when trying to start crap

Hi I am getting the following error when trying to start crap on Windows 10

Then I also installed:

npm install --save [email protected]

after installing:

No eslint is installed globally

my package.json:

{
  "name": "test3",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "eslint": "^4.19.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-parcel": "0.0.38"
  },
  "scripts": {
    "start": "react-scripts-parcel start",
    "build": "react-scripts-parcel build",
    "test": "react-scripts-parcel test --env=jsdom",
    "eject": "react-scripts-parcel eject"
  },
  "browserslist": {
    "development": [
      "last 2 chrome versions",
      "last 2 firefox versions",
      "last 2 edge versions"
    ],
    "production": [
      ">1%",
      "last 4 versions",
      "Firefox ESR",
      "not ie < 11"
    ]
  }
}

Any help would be appreciated

Choose a build location with react-scripts-parcel (outputs)

Hi there!

How to do something like this?
"build": "react-scripts-parcel build ./public/index.html -d build/ --public-url ./",

I'm using (and work):
"build": "parcel build ./public/index.html -d ./build --public-url ./",
but I'm not sure if it's ok. Trying out Parcel with ElectronJS.

Cheers

SEEKING MAINTAINER

I have no time to upgrade this package to Parcel v2 right now but it is clearly the right move. If you'd like to take it over, I will happily transfer everything to you. Just get in touch.

custom script --scrpits-version issue

I published my own script on npm but when I run
create-react-app-parcel my-app --scripts-version custum-script

this will try to download the script from github iso npm,
so I get an error with result that project is not created.

I ran this command with create-react-app and this works fine .

Any suggestions?

Update to use functional components

I love this project, I was wondering if you'd want a PR to change class-based App to function-based App() (with hooks) to align with current create-react-app?

Error in building after install

Error in building after install!!!!!

Error:There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts-parcel package provided by Create React App requires a dependency:

"eslint": "^4.19.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

Rename manifest.json -> manifest.webmanifest

Steps to reproduce

follow the README to install a new app,
then run yarn start
in the opened browser, inspect in Chrome Dev Tools > Application, and you might spot an error on the webmanifest.

Parcel incorrectly transforms the manifest.json file:

Explanation

Parcel only handle webmanifests when they have the .webmanifest extension.

Also, .webmanifest is the standard extension in the specs.

Proposed fix

IIRC, we should change this extension here:
https://github.com/sw-yx/create-react-app-parcel/blob/458b481ccb91c9c420f93d250f11f8896f43519e/packages/react-scripts-parcel/template/public/index.html#L12

And rename the /packages/react-scripts-parcel/template/public/manifest.json file to /packages/react-scripts-parcel/template/public/manifest.webmanifest.

Here what results in Chrome Dev Tools with the fix applied to a generated project:

The manifest is correctly served: