Parcel is a zero configuration build tool for the webπŸ“¦πŸš€

Last update: Jun 25, 2022

Parcel

Backers on Open Collective Sponsors on Open Collective Build Status npm package npm package Discord Twitter Follow

Parcel is a zero configuration build tool for the web. It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

Features

  • 😍 Zero config – Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. It has a built-in dev server with hot reloading, beautiful error diagnostics, and much more. No configuration needed!
  • ⚑️ Lighting fast – Parcel's JavaScript compiler is written in Rust for native performance. Your code is built in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
  • πŸš€ Automatic production optimization – Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.
  • 🎯 Ship for any target – Parcel automatically transforms your code for your target environments. From modern and legacy browser support, to zero config JSX and TypeScript compilation, Parcel makes it easy to build for any target – or many!
  • 🌍 Scalable – Parcel requires zero configuration to get started. But as your application grows and your build requirements become more complex, it's possible to extend Parcel in just about every way. A simple configuration format and powerful plugin system that's designed from the ground up for performance means Parcel can support projects of any size.

Getting Started

See the following guides in our documentation on how to get started with Parcel.

Documentation

Read the docs at https://parceljs.org/docs/.

Community

Contributors

This project exists thanks to all the people who contribute. [Contribute]. contributors

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

GitHub

https://github.com/parcel-bundler/parcel
Comments
  • 1. Discuss .babelrc detection, engines field, etc.

    Based on twitter convo:

    https://twitter.com/dan_abramov/status/938090483166924800

    I’d suggest to reconsider this (or at least limit it to compiling with -env preset only). This encourages authors to publish packages with stage 0 proposals, and ultimately makes builds slower for everyone. Also .babelrc won’t be compatible between Babel versions.

    Reviewed by devongovett at 2017-12-05 20:06
  • 2. How do i mark some modules to external?

    Choose one: is this a πŸ› bug report or πŸ™‹ feature request?

    πŸ™‹ feature request

    πŸ€” Expected Behavior

    Don't include external module in bundled file everywhere. Like rollup globals option. https://rollupjs.org/#big-list-of-options

    🌍 Your Environment

    | Software | Version(s) | ---------------- | ---------- | Parcel | 1.0.3 | Node | 9.2.0 | npm/Yarn | Yarn 1.2.1 | Operating System | Windows 10

    Reviewed by garrydzeng at 2017-12-08 15:48
  • 3. Hot Module Reloading not working, dev server not being updated.

    πŸ› bug report

    I followed the steps exactly here: https://parceljs.org/getting_started.html Making changes to either the js or html file does not cause any update to occur at localhost:1234 when parcel index.html is run.

    I also followed the react recipe verbatim with the same issue: http://blog.jakoblind.no/react-parcel/ Saving the file doesn't refresh the dev server.

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    package.json

    {
      "name": "parcel",
      "version": "1.0.0",
      "description": "",
      "main": "index.html",
      "scripts": {
        "start": "parcel index.html"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^16.4.1",
        "react-dom": "^16.4.1"
      },
      "devDependencies": {
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "parcel-bundler": "^1.9.2"
      }
    }
    

    .babelrc

    {
        "presets": [
            "env",
            "react"
        ]
    }
    

    console command

    npm start also tried parcel serve index.html and parcel index.html --no-cache

    πŸ€” Expected Behavior

    Saved changes should cause the dev server to refresh

    😯 Current Behavior

    Content builds correctly when the command is first run however, the dev server is not refreshed when a change is saved, so even refreshing the page doesn't do anything.

    πŸ”¦ Context

    I tried using global parcel-bundler as well as a local installation.

    πŸ’» Code Sample

    Followed the get started guide and react-recipe blog exactly.

    index.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>React starter app</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
    </html>
    

    index.js

    import React from "react";
    import ReactDOM from "react-dom";
    
    class HelloMessage extends React.Component {
      render() {
        return <div>Hlo{this.props.name + this.props.name}</div>;
      }
    }
    
    var mountNode = document.getElementById("app");
    ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
    

    🌍 Your Environment

    Tried in chrome as well as firefox

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 1.9.2 | Node | 8.11.3 | npm/Yarn | 5.6.0 | Operating System | Mac | Firefox Dev edition | 62.0b1 | Chrome | 67.0.3396.87

    Reviewed by vpicone at 2018-06-20 15:28
  • 4. Bundler freezes since 1.8.0

    πŸ› Bug report

    πŸ€” Expected Behavior

    The bundler should finish the process.

    😯 Current Behavior

    Bundler freezes on build and does not finish at all. Previously I had version 1.7.0 and sometimes it was frozen as well but that was only several times and when restarted it mostly worked. After upgrade to version 1.8.1 I tried to build approx. 20 times but it did not finish at all. No changes in project. I tried version 1.8.0 and it did not work either.

    πŸ”¦ Context

    My project is just index.html with references scripts. Typescript is used in project. App based on React and Bootstrap.

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | ^1.8.0 | | Node | 9.11.1 | | npm | 5.6.0 | | Operating System | Windows 10 |

    Reviewed by jpergler at 2018-05-09 11:14
  • 5. Web Extension Transformer

    β†ͺ️ Pull Request

    Adds support for bundling web extensions from a single manifest.json. Supports all standard features, plus a few non-standard but popular ones.

    Rewrite of #3439 Closes #3439 Closes #1039

    I'm not sure how necessary this is in Parcel's core, but I think it would give Parcel a massive advantage over bundlers like Webpack, for which massive amounts of config are required to get web extensions working even with community packages.

    πŸ’» Examples

    manifest.json:

    {
      "manifest_version": 2,
      "name": "Parcel WebExt",
      "version": "1.2.3",
      "default_locale": "en_US",
      "icons": {
        "100": "src/assets/foo.png"
      },
      "background": {
        "scripts": ["./src/background.js"],
        "persistent": true
      },
      "browser_action": {
        "default_icon": {
          "100": "src/assets/foo.png"
        },
        "default_popup": "src/popup.html"
      },
      "content_scripts": [{
        "matches": ["https://v2.parceljs.org/*"],
        "js": ["src/content.js"],
        "css": ["src/content.css"]
      }],
      "dictionaries": {
        "en-US": "./dicts/tmp.dic"
      },
      "devtools_page": "src/devtools.html",
      "web_accessible_resources": [
        "src/assets/**/*.txt"
      ]
    }
    

    If a file named manifest.json is given as an entry point and looks like a web extension manifest, it is validated for cross-browser compatibility, and all URL references are replaced. Assets that should not change location, such as _locales, are added as entry assets to prevent renaming.

    🚨 Test instructions

    Integration tests provided with this PR

    βœ”οΈ PR Todo

    • [x] Added/updated unit tests for this change
    • [x] Filled out test instructions (In case there aren't any unit tests) N/A
    • [x] Included links to related issues/PRs
    Reviewed by 101arrowz at 2020-10-31 19:06
  • 6. Cannot read property 'type' of undefined

    πŸ› bug report

    I have a small VueJS project. I am running "parcel watch index.html --log-level 4 --out-dir wwwroot" from npm. On version 1.11.0 it would stop reacting to file changes after a few saves. I updated to version 1.12.0 and the same thing is happening but now I get an error (see below).

    Note: I downgraded to parcel version 1.10.3 and everything works as expected when watching.

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    {
      "name": "abs-setup",
      "description": "ABS Setup",
      "author": "Wayne Hiller",
      "scripts": {
        "dev": "parcel watch index.html --log-level 4 --out-dir wwwroot",
        "build": "parcel build index.html --out-dir wwwroot",
        "publish": "npm run build && del-cli bin/Release/netcoreapp2.2/publish && dotnet publish -c Release /p:PublishProfile=Properties\\\\PublishProfiles\\\\FolderProfile.pubxml"
      },
      "devDependencies": {
        "@aspnet/signalr": "1.1.2",
        "@babel/core": "7.3.4",
        "@babel/preset-env": "7.3.4",
        "@vue/component-compiler-utils": "^2.6.0",
        "axios": "0.18.0",
        "bootstrap": "4.3.1",
        "bootstrap-vue": "2.0.0-rc.11",
        "less": "^3.9.0",
        "parcel-bundler": "1.12.0",
        "parcel-plugin-clean-easy": "1.0.2",
        "vue": "2.6.7",
        "vue-axios": "2.1.4",
        "vue-template-compiler": "^2.6.7",
        "del-cli": "1.1.0"
      },
      "dependencies": {
        "vue-hot-reload-api": "^2.3.3"
      },
      "parcelCleanPaths": [
        "wwwroot/*.*",
        "wwwroot/debug"
      ]
    }
    

    πŸ€” Expected Behavior

    No error

    😯 Current Behavior

    Error being generated after 5 or 6 saves of the same .vue file.

    [12:13:38 PM]: Γ— Cannot read property 'type' of undefined [12:13:38 PM]: at Bundler.createBundleTree (E:\Development\AIN 2\ABS\Setup\ABS Setup\node_modules\parcel-bundler\src\Bundler.js:652:54) at Bundler.createBundleTree (E:\Development\AIN 2\ABS\Setup\ABS Setup\node_modules\parcel-bundler\src\Bundler.js:719:12) at Bundler.createBundleTree (E:\Development\AIN 2\ABS\Setup\ABS Setup\node_modules\parcel-bundler\src\Bundler.js:719:12) at Bundler.bundle (E:\Development\AIN 2\ABS\Setup\ABS Setup\node_modules\parcel-bundler\src\Bundler.js:298:14) at process._tickCallback (internal/process/next_tick.js:68:7)

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 1.12.0 | Node | 10.15.2 | npm/Yarn | 6.9.0 | Operating System | Win 10 x64

    Reviewed by WayneHiller at 2019-03-08 20:25
  • 7. Add support for Web Extension manifest V3

    β†ͺ️ Pull Request

    Adds support for Manifest V3 to @parcel/transformer-webextension. Closes #6079 Fixes #6494 Fixes #7568 Fixes #7385 Fixes #7835 (mostly) Fixes #7808 Fixes #5865

    HMR is not working due to MV3 restrictions on CSP. Refreshing the page does update the extension though.

    βœ”οΈ PR Todo

    • [x] Added/updated unit tests for this change
    • [x] Included links to related issues/PRs
    Reviewed by 101arrowz at 2021-10-11 00:36
  • 8. "Name already registered with serializer" with [email protected]

    πŸ› bug report

    When I run parcel build I receive a "Name already registered with serializer" error

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    Blank project with yarn2#pnp and [email protected]

    πŸ€” Expected Behavior

    No error while building

    😯 Current Behavior

    /yarnparcel/.yarn/cache/@parcel-core-npm-2.0.0-nightly.65-a3573223f8-1.zip/node_modules/@parcel/core/lib/serializer.js:28
        throw new Error('Name already registered with serializer');
        ^
    
    Error: Name already registered with serializer
        at registerSerializableClass (/yarnparcel/.yarn/cache/@parcel-core-npm-2.0.0-nightly.65-a3573223f8-1.zip/node_modules/@parcel/core/lib/serializer.js:28:11)
        at Object.<anonymous> (/yarnparcel/.yarn/$$virtual/@parcel-package-manager-virtual-dab9d78bc4/0/cache/@parcel-package-manager-npm-2.0.0-nightly.67-6d59c584b3-1.zip/node_modules/@parcel/package-manager/lib/Npm.js:82:37)
        at Module._compile (internal/modules/cjs/loader.js:956:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.module_1.Module._load (/yarnparcel/.pnp.js:24084:14)
        at Module.require (internal/modules/cjs/loader.js:849:19)
        at require (internal/modules/cjs/helpers.js:74:18)
        at Object.<anonymous> (/yarnparcel/.yarn/$$virtual/@parcel-package-manager-virtual-dab9d78bc4/0/cache/@parcel-package-manager-npm-2.0.0-nightly.67-6d59c584b3-1.zip/node_modules/@parcel/package-manager/lib/index.js:19:12)
        at Module._compile (internal/modules/cjs/loader.js:956:30)
    

    πŸ’ Possible Solution

    No Idea, sorry Β―\(ツ)/Β―

    πŸ”¦ Context

    I'm trying to setup a project with bleeding-edge tooling :)

    πŸ’» Code Sample

    This installs [email protected] GLOBALLY, creates a sample project and produces the error

    mkdir yarnparcel
    cd yarnparcel
    npm i -g [email protected]
    yarn init
    yarn add [email protected]
    echo "<h1>Hello</h1>" > index.html
    yarn run parcel build index.html
    

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 2.0.0-alpha.3.2 | Node | 12.13.0 | Yarn | 2.0.0-rc.27 | Operating System | MacOS 10.14

    Reviewed by Xiphe at 2020-01-30 13:30
  • 9. ES Module type=module cause "parcelRequire is not defined" error

    πŸ› bug report

    Using ES Module in main HTML cause "parcelRequire is not defined" error.
    If we use type="module", minimal code in Getting Started (Parcel official) make this error.

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    zero configuration.

    πŸ€” Expected Behavior

    If we write super simple code with ES Module like below,

    <!-- index.html -->
    <html>
    <body>
    <script src="./index.js" type="module"></script>
    </body>
    </html>
    
    // index.js
    console.log("hello parcel");
    

    I hope it is bundled properly and get "hello parcel" in console without error.

    😯 Current Behavior

    In console,

    hello parcel.   index.js 1
    Uncaught ReferenceError: parcelRequire is not defined at test.904c6489.js:10
    

    πŸ’ Possible Solution

    Apparently ES Module cause this error.
    When I removed type="module" from script element, no error observed.

    It suggest that we can avoid error by avoiding type="module" for parcel.
    But I think this approach is not good.
    ES Module (type="module") is generally available (now 2018-05, all popular browsers supported!!), so ES module is straight forward way to import module.

    πŸ”¦ Context

    I do not know what problem is caused by this error.

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | [email protected] | | Node | (problem happen both) 8.9.3 & 9.11.1 | | npm/Yarn | | | Operating System | Windows10 Pro, build 17134 |

    Thank you good library, I hope this project become better and better.

    Reviewed by tarepan at 2018-05-20 13:58
  • 10. πŸ›Uncaught Error: Cannot find module '21'

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    .babelrc:

    {
      "presets": ["env"],
      "plugins": [
        ["babel-plugin-root-import", {
          "rootPathSuffix": "js",
          "rootPathPrefix": "@"
        }]
      ]
    }
    

    package.json:

    {
      "name": "hwm-parcel",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "makmm",
      "license": "MIT",
      "dependencies": {
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.6.1"
      },
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-plugin-root-import": "^5.1.0"
      }
    }
    

    πŸ€” Expected Behavior

    Run $ parcel index.html, go to localhost:1234, change something in the code and the browser should get the new code and load it

    😯 Current Behavior

    Run $ parcel index.html, go to localhost:1234, console shows correct sourcemaps: image

    change something in the code and this error comes up: image

    Refresh, now sourcemaps are broken: image

    πŸ’ Possible Solution

    No idea! <.<

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 1.6.2 | | Node | 9.5.0 | | npm | 5.6.0 | | Operating System | Debian sid |

    Reviewed by ghost at 2018-02-21 15:36
  • 11. Parcel 2: multi entry/target builds

    Split out of #2574.

    For SSR, it would be useful to support multiple targets with different entries simultaneously.

    Three options came up in the previous issue:

    Explicit entries per target

    const parcel = new Parcel({
      entries: {
        browserEntry_page1: '/path/to/browser/entry/of/page1.js',
        browserEntry_page2: '/path/to/browser/entry/of/page2.js',
        serverEntry: '/path/to/server.js',
      },
    
      targets: {
        browserEntry_page1: {
          "browsers": ["> 1%", "not dead"]
        },
        browserEntry_page2: {
          "browsers": ["> 1%", "not dead"]
        },
        serverEntry: {
          "node": ["^8.0.0"]
        },
      }
    });
    

    An array of parcel options

    const parcel = new Parcel([
      {
        entries: ['page1.js', 'page2.js']
        targets: {
          browser: {
            browser: ['>1%', 'not dead']
          }
        }
      },
      {
        entries: ['server.js']
        targets: {
          node: {
            node: ['^8.0.0']
          }
        }
      }
    });
    

    Multiple Parcel instances, sharing a worker farm

    We were thinking of making the worker farm an option anyway, so this might work for free. By sharing a worker farm instance, multiple Parcel instances could run in parallel.

    const workerFarm = new WorkerFarm();
    
    const browserParcel = new Parcel({
      workerFarm,
      entries: ['page1.js', 'page2.js']
      targets: {
        browser: {
          browser: ['>1%', 'not dead']
        }
      }
    });
    
    const serverParcel = new Parcel({
      workerFarm,
      entries: ['server.js']
      targets: {
        node: {
          node: ['^8.0.0']
        }
      }
    });
    

    Thoughts?

    cc. @brillout @padmaia @wbinnssmith

    Reviewed by devongovett at 2019-08-02 03:26
  • 12. Referencing images without moving to modules

    https://github.com/parcel-bundler/parcel/issues/3056#issuecomment-1156703706

    I've run into the same problem. Tricks such as require() don't work because they require the code to be used as a module.

    From the docs: https://parceljs.org/recipes/image/

    This refers to import.meta.url which isn't usable without being in a module either.

    Reviewed by gcp at 2022-06-19 09:40
  • 13. Invalid sourcemaps with runtime

    πŸ› bug report

    The sourcemaps are slightly off when not minified and are completely wrong after subsequent minification.

    πŸ’» Code Sample

    loadData();
    
    function loadData() {
        let url = new URL("../assets/models/cubeFish.glb", import.meta.url);
        console.log(url);
    }
    

    😯 Current Behavior

    I think the last one in particular is breaking Terser:

    Bildschirmfoto 2022-06-19 um 11 33 55 Bildschirmfoto 2022-06-19 um 11 34 04 Bildschirmfoto 2022-06-19 um 11 34 17

    πŸ”¦ Context

    https://github.com/parcel-bundler/parcel/discussions/7803

    After running Terser:

    Bildschirmfoto 2022-06-19 um 11 35 03

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 2.6.1

    Reviewed by mischnic at 2022-06-19 09:35
  • 14. `Failed to construct 'URL': Invalid URL` when using `new URL(..., import.meta.url)`

    πŸ› bug report

    πŸ’» Code Sample

    loadData();
    
    function loadData() {
        let url = new URL("../assets/models/cubeFish.glb", import.meta.url);
        console.log(url);
    }
    

    πŸ€” Expected Behavior

    Works.

    😯 Current Behavior

    Fails with scope hoisting:

    The loadData call jumps over the initialization and causes new URL(undefined) to be run.

    $f436c5e55b77ba71$var$loadData();
    
    var $3c8e5430c897aada$exports = {};
    $3c8e5430c897aada$exports = new URL((parcelRequire("aKzDW")).resolve("lV8gv"), import.meta.url).toString();
    
    function $f436c5e55b77ba71$var$loadData() {
        let url = new URL($3c8e5430c897aada$exports);
        console.log(url);
    }
    

    πŸ”¦ Context

    https://github.com/parcel-bundler/parcel/discussions/7803

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 2.6.1

    Reviewed by mischnic at 2022-06-19 09:30
  • 15. Production build on AntD Menu widget results with error: Invalid attempt to spread non-iterable instance.

    πŸ› bug report

    Using the latest Parcel to deploy an application that uses Ant Design React Components:

    import React from 'react';
    import { Menu } from "antd";
    
    export function App() {
      const items = [
        { label: 'item 1', key: 'item-1' },
      ];
      return <Menu items={items} />;
    }
    

    I am hitting the error:

     Invalid attempt to spread non-iterable instance.
    

    The issue does not happen in development mode (parcel) but does happen in production (parcel build). Removing the items property stops the error from happening as well.

    πŸ€” Expected Behavior

    Production code should work just like development.

    😯 Current Behavior

    The following error happens:

    react-dom.production.min.js:189 TypeError: Invalid attempt to spread non-iterable instance.
    In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
        at F (nonIterableSpread.js:2:9)
        at R (toConsumableArray.js:6:95)
        at PathContext.js:13:47
        at Object.useMemo (react-dom.production.min.js:184:189)
        at Object.T (react.production.min.js:25:208)
        at yt (PathContext.js:12:10)
        at Nt (MenuItem.js:204:26)
        at Li (react-dom.production.min.js:167:137)
        at Ru (react-dom.production.min.js:290:337)
        at Nc (react-dom.production.min.js:280:389)
    

    πŸ’ Possible Solution

    Webpack works fine here, so this seems to not be a Ant Design issue but something Parcel uses?

    πŸ”¦ Context

    πŸ’» Code Sample

    Reproduction: https://github.com/doronrosenberg/parcel-antd-issue

    🌍 Your Environment

    Latest versions, running on an M1 Mac.

    Reviewed by doronrosenberg at 2022-06-17 18:24
  • 16. Build error with version 2.6.0: @parcel/core: Failed to resolve 'buffer' from ...

    πŸ› bug report

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    .babelrc: none

    package.json(Only the relevant parts are listed)

    {
      "packageManager": "[email protected]",
      "engines": {
        "node": ">=16.0.0",
        "pnpm": ">=7.0.0",
        "yarn": ">2 <1",
        "npm": ">2 <1"
      },
      "source": "admin/index.html",
      "browserslist": "> 0.5%, last 2 versions, not dead",
      "scripts": {
        "start": "concurrently -k \"netlify-cms-proxy-server\" \"ws -d admin --static.index index.dev.html -p 5001 -o\"",
        "admin:build-dev": "parcel ./admin/index.html",
        "admin:build": "parcel build ./admin/index.html --dist-dir admin_dist --public-url=/shared",
        "prebuild": "ts-node ./src/prebuild.ts",
        "build": "tsc"
      }
    }
    

    πŸ€” Expected Behavior

    Build should pass.

    😯 Current Behavior

    Details
    ❯ pnpm run admin:build
    
    > @right/[email protected] admin:build /Users/user/Code/example
    > parcel build ./admin/index.html --dist-dir admin_dist --public-url=/shared
    
    [Error: ENOENT: no such file or directory, open '/Users/user/Code/example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/webpack:/NetlifyCmsApp/Users/erezrokah/Code/github/netlify-cms/node_modules/js-base64/base64.mjs'] {
      errno: -2,
      code: 'ENOENT',
      syscall: 'open',
      path: '/Users/user/Code/example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/webpack:/NetlifyCmsApp/Users/erezrokah/Code/github/netlify-cms/node_modules/js-base64/base64.mjs'
    }
    β ‹ Building index.js...
    [Error: ENOENT: no such file or directory, open '/Users/user/Code/example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/webpack:/NetlifyCmsApp/Users/erezrokah/Code/github/netlify-cms/node_modules/js-base64/base64.mjs'] {
      errno: -2,
      code: 'ENOENT',
      syscall: 'open',
      path: '/Users/user/Code/example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/webpack:/NetlifyCmsApp/Users/erezrokah/Code/github/netlify-cms/node_modules/js-base64/base64.mjs'
    🚨 Build failed.
    
    @parcel/core: Failed to resolve 'buffer' from './node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/netlify-cms-app.js'
    
      /Users/user/Code/example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/netlify-cms-app/dist/netlify-cms-app.js:19:27
        18 |  * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
      > 19 |  *
      >    |   ^
        20 |  * Copyright (c) 2014-2017, Jon Schlinkert.
        21 |  * Released under the MIT License.
    
    @parcel/resolver-default: Failed to install buffer: pnpm failed to install modules
    
      Error: Failed to install buffer: pnpm failed to install modules
          at $32ea97b83cf5d752$var$install (/Users/user/Code/example/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@parcel/package-manager/lib/index.js:3688:15)
          at async $b0fd219fea43bcac$export$2e2bcd8739ae039._runFn (/Users/user/Code/example/node_modules/.pnpm/@[email protected]/node_modules/@parcel/utils/lib/index.js:32339:13)
          at async $b0fd219fea43bcac$export$2e2bcd8739ae039._next (/Users/user/Code/example/node_modules/.pnpm/@[email protected]/node_modules/@parcel/utils/lib/index.js:32332:9)
    
     ELIFECYCLE  Command failed with exit code 1.
    

    πŸ’ Possible Solution

    n/a

    πŸ”¦ Context

    Related issue: #7697

    πŸ’» Code Sample

    n/a

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 2.6.0 | | Node | 16.13.2 | | npm/Yarn | [email protected] | | Operating System | [email protected] |

    Reviewed by liby at 2022-06-17 05:00
  • 17. Parcel serve gives HTTP 426 "Upgrade Required"

    πŸ› bug report

    When using parcel serve... I get the subject output response when visiting the started server url

    πŸŽ› Configuration (.babelrc, package.json, cli command)

    "main": "index.js",
      "scripts": {
        "dev": "parcel serve --port 3000 --no-cache --hmr-port 3001 --log-level verbose index.html"
      },
      "license": "MIT",
      "browserslist": [
        "> 1%",
        "last 3 versions"
      ],
      "bugs": {
        "url": "https://github.com/vedees/wcms/issues"
      },
      "dependencies": {
        "axios": "^0.27.2",
        "chart.js": "^2.7.3",
        "codemirror": "^5.42.0",
        "locutus": "^2.0.10",
        "save": "^2.3.3",
        "uimini": "^1.1.3",
        "vue": "^3.0.2",
        "vue-chartjs": "^3.4.0",
        "vuex": "4.0.0"
      },
      "devDependencies": {
        "@parcel/transformer-stylus": "2.6.0",
        "@parcel/transformer-vue": "2.6.0",
        "parcel": "^2.6.0",
        "process": "^0.11.10"
      },
    

    I have no babel configuration

    I run a yarn script yarn dev

    πŸ€” Expected Behavior

    Should see the project at the given url

    😯 Current Behavior

    Get HTTP 426 "Upgrade Required"

    πŸ”¦ Context

    Was simply starting a Vue.js project upgrading from Vue 2.x.x to Vue 3.x.x

    πŸ’» Code Sample

    The project was taken from https://github.com/karneaud/wcms ...though it is initially using webpack I'm converting to parcel for a more simpler tooling approach

    🌍 Your Environment

    | Software | Version(s) | | ---------------- | ---------- | | Parcel | 2.6.0 | Node | v18.3.0 | npm/Yarn | Yarn 1.22.19 | Operating System | Docker

    Reviewed by karneaud at 2022-06-16 21:17
MozaΓ―k is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards
MozaΓ―k is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards

MozaΓ―k is a tool based on nodejs / react / redux / d3 to easily craft beautiful dashboards. See demo Features: Scalable layout Themes support Extendab

Jun 18, 2022
An interactive CLI automation tool πŸ› οΈ for creating react.js and next.js projects most fast and efficiently. βš›οΈ
An interactive CLI automation tool πŸ› οΈ for creating react.js and next.js projects most fast and efficiently. βš›οΈ

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. βš›οΈ

Apr 12, 2022
The ultimate tool for an exceptional resume.
The ultimate tool for an exceptional resume.

Rzume The ultimate tool for an exceptional resume. Create nothing but the best with us. Features ?? Professional templates Pick one from our many attr

Jun 12, 2022
react compile tool - Prefix named Luban, salute the God of craftsman
react  compile tool -  Prefix named Luban, salute the God of craftsman

Prefix named Luban, salute the God of craftsman usage react build tool, Support Typescript yarn add luban-pack --save-dev npm i luban-pack --

Nov 18, 2021
A tool created in react to generate complex box shadows visually

Check out the Tutorial on YouTube Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the

Oct 27, 2021
Opal - A tool for monitoring Microsoft Azure Functions, built with react
Opal - A tool for monitoring Microsoft Azure Functions, built with react

Opal An Azure Functions Monitoring Tool Table of Contents About Opal Prerequisites Getting Started Connecting to Azure Azure Account Access How to Use

Apr 30, 2022
A simple tool to view Facebook Messenger exported JSON files
A simple tool to view Facebook Messenger exported JSON files

Facebook Messenger exported JSON viewer What's this? This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messen

Jun 8, 2022
React-NFT-App - NFT-Web-Application built using Third web , ReactJs and use Crypto Punks with API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Apr 25, 2022
Remove unnecessary React propTypes from the production build. :balloon:

babel-plugin-transform-react-remove-prop-types Remove unnecessary React propTypes from the production build. Installation npm install --save-dev babel

Jun 1, 2022
Build blazing fast, modern apps and websites with React

Gatsby v2 βš›οΈ ?? ?? Fast in every way that matters Gatsby is a free and open source framework based on React that helps developers build blazing fast w

Jun 19, 2022
This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Jun 17, 2022
An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

Jan 13, 2022
Gif Portal build using solana, anchor, web3 and react

Features of the dapp View Popular Dance Moves Gifs Vote for your favorite Gifs Add link of your favorite dance gif on the portal All the data includin

May 14, 2022
A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Nov 27, 2021
A Comments App Build Using React.js
A Comments App Build Using React.js

In this project, let's build a Comments App by applying the concepts we have learned till now. Refer to the image below: Design Files Click to view Ex

Dec 14, 2021
This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.
This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

May 31, 2022
Just a simple react iota prototype to send messages to the tangle through a web app
Just a simple react iota prototype to send messages to the tangle through a web app

REACT IOTA This is a test project of mine to get familiar with the iota.js library. The WebApp is build with react and let you send messages to the ta

Jun 10, 2021
Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application
Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application

Calypso is the new WordPress.com front-end – a beautiful redesign of the WordPress dashboard using a single-page web application, powered by the WordPress.com REST API. Calypso is built for reading, writing, and managing all of your WordPress sites in one place.

Jun 19, 2022
Aplicação web desenvolvida durante a Imersão React #3 da Alura
Aplicação web desenvolvida durante a Imersão React #3 da Alura

Sobre o projeto ?? O Alurakut é uma aplicação web clone do nosso queridíssimo e jÑ falecido Orkut, porém trazendo uma interface mais moderna e utiliza

May 2, 2022