Parcel v2 with Purescript

Help
#1

I’m trying to migrate to parcel v2 and I’m having trouble with that. My index.html contains:

  <body>
    <script src="./index.js"></script>
  </body>

and running parcel serve dev/index.html then gives me:

@parcel/transformer-js: Browser scripts cannot have imports or exports.

frontend/dev/index.js:3:1
    2 | //require("echarts");
  > 3 | require("../output/Main/index.js").main();
  >   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 |

When I change the script code to:

<script type="module" src="./index.js"></script>

I get:

@parcel/core: Failed to resolve 'xhr2' from './output/Affjax/foreign.js'

output/Affjax/foreign.js:10:32
     9 |     platformSpecific.newXHR = function () {
  > 10 |       var XHR = module.require("xhr2");
  >    |                                ^^^^^^
    11 |       return new XHR();
    12 |     };

I’m not set on using parcel at all, so if you have anything else to bundle and serve easily, I’m happy to switch.

Edit: I’ve now tried npm i xhr2 which fixed the problem. But is that “proper”? Or is it a bug in affjax?

1 Like
#2

It’s pretty common for PureScript libraries to have npm dependencies. It’s typically listed in the spago docs. For example, the affjax docs state that the npm install is required:

image
image1031×476 22.6 KB

(though I’m confused why the affjax docs say that’s only needed for a Node.js environment and you’re trying to do this in the browser).

You may also be interested in the discussion on spago’s site about why spago doesn’t handle npm dependencies for you.

1 Like
#3

The need for xhr2 seems to be a recent thing - it happened to me only after I did a npm audit fix - sadly I did not find the time to figure out why.

#4

The xhr2 dependency is only needed for Affjax when it is used on Node, so I’m not sure why Parcel would be asking for it here. Perhaps it’s picking up a code path in the FFI that isn’t hit in the browser?

1 Like
#5

I wonder if it’s that parcel is not actually running anything or trying to follow code-paths at all - it’s just looking for require and co. to collect dependencies - would IMHO make sense.

#6

That sounds likely, though I don’t know what changed about it from Parcel 1 to Parcel 2 if this error didn’t exist before :woman_shrugging:

#7

I have the same problem. I checked it with parcel v1 and it was the same.

Here is what I was was doing:

[aove215:~/projects/drum/jan/browser]$ npm --version
8.1.3
[aove215:~/projects/drum/jan/browser]$ npm ls
browser@ /Users/aove215/projects/drum/jan/browser
├── parcel@2.0.1
├── purescript@0.14.5
├── spago@0.20.3
└── ua-parser-js@0.7.31

[aove215:~/projects/drum/jan/browser]$ cat spago.dhall
{-
Welcome to a Spago project!
You can edit this file as you like.
-}
{ name = "browser"
, dependencies =
  [ "aff"
  , "affjax"
  , "argonaut"
  , "argonaut-codecs"
  , "argonaut-core"
  , "argonaut-generic"
  , "arrays"
  , "avar"
  , "console"
  , "effect"
  , "either"
  , "exceptions"
  , "foldable-traversable"
  , "integers"
  , "lists"
  , "math"
  , "maybe"
  , "nullable"
  , "partial"
  , "prelude"
  , "psci-support"
  , "strings"
  , "transformers"
  , "unsafe-coerce"
  , "web-dom"
  , "web-events"
  , "web-html"
  , "web-storage"
  , "web-touchevents"
  , "web-uievents"
  ]
, packages = ./packages.dhall
, sources = [ "src/**/*.purs" ]
}
[aove215:~/projects/drum/jan/browser]$ cat packages.dhall
{-
Welcome to your new Dhall package-set!

Below are instructions for how to edit this file for most use
cases, so that you don't need to know Dhall to use it.

## Warning: Don't Move This Top-Level Comment!

Due to how `dhall format` currently works, this comment's
instructions cannot appear near corresponding sections below
because `dhall format` will delete the comment. However,
it will not delete a top-level comment like this one.

## Use Cases

Most will want to do one or both of these options:
1. Override/Patch a package's dependency
2. Add a package not already in the default package set

This file will continue to work whether you use one or both options.
Instructions for each option are explained below.

### Overriding/Patching a package

Purpose:
- Change a package's dependency to a newer/older release than the
    default package set's release
- Use your own modified version of some dependency that may
    include new API, changed API, removed API by
    using your custom git repo of the library rather than
    the package set's repo

Syntax:
where `entityName` is one of the following:
- dependencies
- repo
- version
-------------------------------
let upstream = --
in  upstream
  with packageName.entityName = "new value"
-------------------------------

Example:
-------------------------------
let upstream = --
in  upstream
  with halogen.version = "master"
  with halogen.repo = "https://example.com/path/to/git/repo.git"

  with halogen-vdom.version = "v4.0.0"
-------------------------------

### Additions

Purpose:
- Add packages that aren't already included in the default package set

Syntax:
where `<version>` is:
- a tag (i.e. "v4.0.0")
- a branch (i.e. "master")
- commit hash (i.e. "701f3e44aafb1a6459281714858fadf2c4c2a977")
-------------------------------
let upstream = --
in  upstream
  with new-package-name =
    { dependencies =
       [ "dependency1"
       , "dependency2"
       ]
    , repo =
       "https://example.com/path/to/git/repo.git"
    , version =
        "<version>"
    }
-------------------------------

Example:
-------------------------------
let upstream = --
in  upstream
  with benchotron =
      { dependencies =
          [ "arrays"
          , "exists"
          , "profunctor"
          , "strings"
          , "quickcheck"
          , "lcg"
          , "transformers"
          , "foldable-traversable"
          , "exceptions"
          , "node-fs"
          , "node-buffer"
          , "node-readline"
          , "datetime"
          , "now"
          ]
      , repo =
          "https://github.com/hdgarrood/purescript-benchotron.git"
      , version =
          "v7.0.0"
      }
-------------------------------
-}
let upstream =
      https://github.com/purescript/package-sets/releases/download/psc-0.14.5/packages.dhall sha256:7ed6350fe897a93926d16298e37d2324aabbe5eca99810204719dc3632fb555f

in  upstream
[aove215:~/projects/drum/jan/browser]$ cat assets/drum.html
<!DOCTYPE html>
<html>
  <body>
    <script src="app.js"></script>
  </body>
</html>
[aove215:~/projects/drum/jan/browser]$ spago bundle-app -m Browser -s --to assets/app.js
[info] Bundle succeeded and output file to assets/app.js
[aove215:~/projects/drum/jan/browser]$ parcel build assets/drum.html --no-optimize --no-source-maps
🚨 Build failed.

@parcel/transformer-js: Browser scripts cannot have imports or exports.

  /Users/aove215/projects/drum/jan/browser/assets/app.js:13:19
    12 |       platformSpecific.newXHR = function () {
  > 13 |         var XHR = module.require("xhr2");
  >    |                   ^^^^^^^^^^^^^^^^^^^^^^
    14 |         return new XHR();
    15 |       };
  
  /Users/aove215/projects/drum/jan/browser/assets/drum.html:4:5
    3 |   <body>
  > 4 |     <script src="app.js"></script>
  >   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
    5 |   </body>
    6 | </html>

  💡 Add the type="module" attribute to the <script> tag.
  📝 Learn more: https://parceljs.org/languages/javascript/#classic-scripts

[aove215:~/projects/drum/jan/browser]$

My fix is to add type=“module” to the html file, make sure I have installed xhr2 and then the parcel build completes - but I have a pesky reference to module.require in my final .js file. I post-process the file using sed and change module.require to false

1 Like
#8

I upgraded to parcel v2 today and encountered this issue too. Looks like there’s a simpler solution from the doc by setting shim "alias" in package.json

{
  "alias": {
    "xhr2": false
  }
}

which works for me.

1 Like