Parcel setup instructions inconsistent

[onionhammer]

According to the website, step 2 after installing @compiled/react is to install @compiled/parcel-transformer, but according to the repository's README, the next step is to install @compiled/parcel-config.

If I install with parcel-config, following the instructions in the readme, then update the parcelrc as instructed, I get this error:

  1 | {
> 2 |   "extends": ["...", "@compiled/parcel-config"]
>   |                      ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module "@compiled/parcel-config", did you mean "@compiled/parcel-config"?
  3 | }

If I install with parcel-transformer, following the instructions on the website, then update the parcelrc as the README instructs, I get this error:

Support for the experimental syntax 'jsx' isn't currently enabled (8:10):
...
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

Does parcel support actually work? I'm starting with basically a clean slate and cant get it to work

[pancaspe87]

Hi @onionhammer thanks for reporting the issue. We'll try to update the documentation as soon as we have capacity.

Parcel should work. Can you try with the config that you see in the example?

[onionhammer]

@pancaspe87 yeah I've tried the sample, it seems to reference projects in the yarn workspace and doesn't work on its own (outside the context of this repo)

[onionhammer]

@pancaspe87 I've taken the liberty of breaking out the parcel sample from its parent repository and posted it up here

https://github.com/onionhammer/compiled-parcel

@parcel/core: Cannot find extended parcel config

\.parcelrc:2:41
  1 | {
> 2 |   "extends": ["@parcel/config-default", "@compiled/parcel-config"],
>   |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot find module "@compiled/parcel-config", did you mean "@compiled/parcel-config"?
  3 |   "transformers": {
  4 |     "*.customjsx": [

[pancaspe87]

Hi @onionhammer

Apologies for not getting back to you earlier.

I had a quick look at your example and noticed that the dependencies are not getting downloaded as expected.

Expected

Actual

We'll look into it in more details as soon as we have capacity.

Looping in @JakeLane that may have more info.

[JakeLane]

I think this may be an issue with the package.json. I'll raise a PR with the fix and 🤞 that fixes it

[onionhammer]

This should probably remain open until the docs are updated to be consistent with the sample

[JakeLane]

yep good point

[builtbylane]

hi @JakeLane so what's the solution to getting this to work?

[onionhammer]

@builtbylane @JakeLane

I assume there is no solution until packages are published to NPM

[JakeLane]

@builtbylane @onionhammer apologies for this, I've been out sick and didn't get time to follow this up. I've made a release and will raise a update for the docs.

[JakeLane]

Docs PR raised here https://github.com/compiled/website/pull/581

[onionhammer]

@JakeLane hope you're feeling better

I've updated the sample based on the updated docs ( https://github.com/onionhammer/compiled-parcel)

Now I'm seeing:

> @compiled/[email protected] build
> parcel build ./src/index.html

AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof s !== 'string')

    at C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:490:27
    at Array.map (<anonymous>)
    at assertPurePipeline (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:489:19)
    at mergeConfigs (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:469:16)
    at processConfigChain (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:375:18)
    at async resolveParcelConfig (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:194:7)
    at async loadParcelConfig (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\requests\ParcelConfigRequest.js:155:22)
    at async Parcel._init (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\Parcel.js:222:9)
    at async Parcel.run (C:\Development\compiled-parcel\node_modules\@parcel\core\lib\Parcel.js:273:7)
    at async run (C:\Development\compiled-parcel\node_modules\parcel\lib\cli.js:376:7) {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='

[JakeLane]

@onionhammer Thanks for reporting! I raised https://github.com/atlassian-labs/compiled/pull/1243 which should help with that issue.

In that case, it turns out that Parcel cannot handle the ... like I expected so the docs are misleading:

You'd want something like:

{
  "extends": ["@parcel/config-default", "@compiled/parcel-config"]
}

When the above PR is merged, you should be able to use the following Compiled configuration:

{
  "importReact": false,
  "parserBabelPlugins": [
    "typescript",
    "jsx"
  ],
  "transformerBabelPlugins": [
    "@babel/plugin-syntax-jsx",
    ["@babel/plugin-transform-react-jsx", {"runtime": "automatic"}],
    "@babel/plugin-transform-react-display-name",
    "@babel/plugin-transform-react-pure-annotations"
  ],
  "extract": true
}