Steps to reference styled-ppx via Melange 2

[trite]

Trying to figure out how to reference styled-ppx from a Melange 2.1.0 project. Here's the steps that I've tried so far, still asking questions in the ReasonML discord but documenting here as well.

First I tried installing via NPM, but it was suggested in the discord to use OPAM instead. Here's the error when trying to use npm:

$ make build
opam exec -- dune build @react @node # @react and @node are dune aliases: https://dune.readthedocs.io/en/stable/overview.html#term-alias
File "node_modules/@davesnx/styled-ppx/css/Std.ml", line 14, characters 16-24:
14 |     run strings {js||js}
                     ^^^^^^^^
Warning 108 [melange-uninterpreted-delimiters]: Uninterpreted delimiters js
File "packages/css/native/shared/Css_AtomicTypes.ml", line 14, characters 18-33:
Warning 108 [melange-uninterpreted-delimiters]: Uninterpreted delimiters js

... similar warnings for a while ...

File "packages/css/native/shared/Css_AtomicTypes.ml", line 2333, characters 43-52:
Warning 108 [melange-uninterpreted-delimiters]: Uninterpreted delimiters js

File "packages/css/native/shared/Css_AtomicTypes.ml", lines 1535-1536, characters 42-53:
Error: This expression is expected to have an uncurried function
make: *** [Makefile:30: build] Error 1

For opam I started by just adding a dependency for "styled-ppx" but the opam install command fails since the package isn't published in opam yet.

Next tried pinning the git repo by adding [ "styled-ppx.dev" "git+https://github.com/davesnx/styled-ppx.git" ] to the pin-depends section of the opam file in my project. The install command then works, but dune couldn't seem to find the library when I referenced it like so:

(melange.emit
 (target output)
 (alias react)
 (libraries reason-react world melange.belt styled-ppx)
 (modules :standard \ hello)
 (preprocess
  (pps melange.ppx reason-react-ppx))
 (module_systems es6))

Next up was pinning a specific branch for styled-ppx, as well as adding a pin for server-reason-react:

 pin-depends: [
  [ "styled-ppx.dev" "https://github.com/davesnx/styled-ppx.git#4686dd24b1eba7e15b02a52d68767fee93650d96" ]
  [ "server-reason-react.dev" "https://github.com/ml-in-barcelona/server-reason-react.git#0e12e234ffbd845917891ecd4a366df86c8b0371"]
]

And then updating the src/dune file in the project:

(melange.emit
 (target output)
 (alias react)
 (libraries
  reason-react
  world
  melange.belt
  styled-ppx.bs-css
  styled-ppx.bs-css-emotion)
 (modules :standard \ hello)
 (preprocess
  (pps melange.ppx reason-react-ppx styled-ppx.lib))
 (module_systems es6))

This will go through the install process fine, but will fail to build with:

File "src/dune", line 42, characters 2-27:
42 |   styled-ppx.bs-css-emotion)
       ^^^^^^^^^^^^^^^^^^^^^^^^^
Error: Library "styled-ppx.bs-css-emotion" not found.
-> required by alias src/react

[davesnx]

The current steps to have styled-ppx working in melange now (will be different/simpler/better when #365 gets fixed) are:

• opam pin server-reason-react.dev "https://github.com/ml-in-barcelona/server-reason-react.git#0e12e234ffbd845917891ecd4a366df86c8b0371"
• opam pin styled-ppx.dev "https://github.com/davesnx/styled-ppx.git#4686dd24b1eba7e15b02a52d68767fee93650d96"
• Add (preprocess (pps styled-ppx.lib))
• Add (libraries styled-ppx.lib)

Opam doesn't update the opam files when you update them, and running the install after adding pin-depends might not run the pinning. (I believe you should re-install)

[trite]

The preprocess and libraries stanzas that you mention - is styled-ppx.lib meant literally or is it a placeholder for things like styled-ppx.bs-css?

Running both opam pin commands yielded this error with the following dune config:

(melange.emit
 (target output)
 (alias react)
 (libraries
  reason-react
  world
  melange.belt
  styled-ppx.lib
  styled-ppx.bs-css
  styled-ppx.bs-css-emotion)
 (modules :standard \ hello)
 (preprocess
  (pps melange.ppx reason-react-ppx styled-ppx.lib))
 (module_systems es6))

The error:

opam exec -- dune build @react @node # @react and @node are dune aliases: https://dune.readthedocs.io/en/stable/overview.html#term-alias
Error: The library seq was not compiled with Dune or it was compiled with
Dune but published with a META template. Such libraries are not compatible
with melange support
-> required by alias src/react
Error: The library str was not compiled with Dune or it was compiled with
Dune but published with a META template. Such libraries are not compatible
with melange support
-> required by alias src/react
Error: The library compiler-libs was not compiled with Dune or it was
compiled with Dune but published with a META template. Such libraries are not
compatible with melange support
-> required by alias src/react
Error: The library compiler-libs.common was not compiled with Dune or it was
compiled with Dune but published with a META template. Such libraries are not
compatible with melange support
-> required by alias src/react
Error: The library ppx_deriving.runtime was not compiled with Dune or it was
compiled with Dune but published with a META template. Such libraries are not
compatible with melange support
-> required by alias src/react

At this point I tried tweaking things a few different ways in the dune file, and this finally got things to build (removed styled-ppx.lib from the libraries stanza):

(melange.emit
 (target output)
 (alias react)
 (libraries
  reason-react
  world
  melange.belt
  styled-ppx.bs-css
  styled-ppx.bs-css-emotion)
 (modules :standard \ hello)
 (preprocess
  (pps melange.ppx reason-react-ppx styled-ppx.lib))
 (module_systems es6))

Unfortunately at that point when I try to use styled-ppx like this it fails with the following error:

let testStyle = [%cx "color: red"];

module App = {
  // This sample forces an import of Belt.*, so that CI builds can ensure that
  // Melange has been installed correctly for JS bundlers to be able to find it.
  [@react.component]
  let make = () =>
    [
      "Hello " ++ World.name ++ "!",
      "This is React with ReasonML via Melange!",
      "testStyle: " ++ testStyle,
    ]
    ->Belt.List.map(greeting => <h1> greeting->React.string </h1>)
    ->Belt.List.toArray
    ->React.array;
};

ReactDOM.querySelector("#root")
->(
    fun
    | Some(root) => ReactDOM.render(<App />, root)
    | None =>
      Js.Console.error(
        "Failed to start React: couldn't find the #root element",
      )
  );

The error:

Compiled with problems:
ERROR
Cannot find module '@emotion/css'
webpackMissingModule@webpack:///./_build/default/src/output/node_modules/styled-ppx.bs-css-emotion/CssJs.js?:697:50
@webpack:///./_build/default/src/output/node_modules/styled-ppx.bs-css-emotion/CssJs.js?:697:137
./_build/default/src/output/node_modules/styled-ppx.bs-css-emotion/CssJs.js@http://localhost:8080/main.js:415:1
__webpack_require__@http://localhost:8080/main.js:912:33
fn@http://localhost:8080/main.js:1111:21
@webpack:///./_build/default/src/output/src/ReactApp.js?:7:111
./_build/default/src/output/src/ReactApp.js@http://localhost:8080/main.js:470:1
__webpack_require__@http://localhost:8080/main.js:912:33
@http://localhost:8080/main.js:1984:56
@http://localhost:8080/main.js:1986:12
ERROR in ./_build/default/src/output/node_modules/styled-ppx.bs-css-emotion/CssJs.js 3:0-36
Module not found: Error: Can't resolve '@emotion/css' in '/home/trite/git/example-melange-project/_build/default/src/output/node_modules/styled-ppx.bs-css-emotion'

Current repo state: https://github.com/trite/example-melange-project/tree/80c35ed8852632539d5cd24a4d635e0a4853df3e

[davesnx]

Right, forgot to mention that emotion should be installed (npm install @emotion/css)

[davesnx]

The preprocess and libraries stanzas that you mention - is styled-ppx.lib meant literally or is it a placeholder for things like styled-ppx.bs-css?

styled-ppx.lib is indeed not the lib (this is part of the naming issues I mention on the #365 issue) and it's the ppx. styled-ppx.ppx it's probably the name it should be or styled-ppx directly

[trite]

Installing the emotion npm package was indeed the fix at that point.

From your last message I wasn't quite sure if that meant changing the preprocess stanza, but it fails with styled-ppx.ppx and styled-ppx, so it seems like styled-ppx.lib is right for that part right now.

I'll try using styled-ppx some more to make sure it's fully working when I can, but for a simple test it seems like it is working now.

Thank you for the help!

[davesnx]

I will close this issue and feel free to subscribe to https://github.com/davesnx/styled-ppx/issues/365.

Where instructions will be pushed into the website. Thanks for trying it out early <3