Steps to reference styled-ppx via Melange 2
trite opened this issue · 6 comments
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
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)
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
Right, forgot to mention that emotion should be installed (npm install @emotion/css)
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
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!