How to use react-icons from rescript?

1

I installed react-icons library and tried this code

%%raw("import {BsHandsThumbsUp} from 'node_modules/react-icons/ba'")

I saw this in a tutorial on YouTube but that tutorial is just using javascript. I thought I could copy paste the code and just put %%raw on top of it. but it doesn’t work.

Rescript compiles it fine but webpack window immediately says Field 'browser' doesn't contain a valid alias configuration /Users/foo/code/Rescript/meals-app/src/components/react-icons/bs

2

not entirely sure but %%raw seems unlikely…and importing literally from node_modules is suspicious.
maybe:

@module("react-icons") @scope("ba") @react.component external make: () => React.element = " BsHandsThumbsUp"
1 Like
3

Wrote this code and it compiles fine

module BsHandThumbsUpFill = {
    @module("react-icons") @scope("bs") @react.component external make: () => React.element = "BsHandThumbsUpFill"
}

I get an error export 'bs' (imported as 'ReactIcons') was not found in 'react-icons' (possible exports: DefaultContext, GenIcon, IconBase, IconContext, IconsManifest)

I can see that in node modules there is a react-icons directory and that contains a “bs” directory and inside that there is a file called index.js which does have the line

module.exports.BsHandThumbsUpFill = function BsHandThumbsUpFill

but somehow rescript doesn’t find the ‘bs’ export.

Is there a webpack nuance here as well? there are so many different ways to import react icons its confusing javascript - react-icons resolve error with webpack - Stack Overflow

4

I believe you want to do this…

module BsHandThumbsUpFill = {
    @module("react-icons/ba") @react.component external make: () => React.element = "BsHandThumbsUpFill"
}

But I don’t fully understand what the actual package import path should look like. The initial example lists react-icons/ba, but then it turned into react-icons/bs.

A good way to verify the output is by putting the example into the playground: https://rescript-lang.org/try?version=v10.1.2&code=LYewJgrgNgpgBAIQM4AkCGA7MAVAFhYAIyQFUAHAMQEsoo4BeOAbwCg524ABUSWACgBEAJxhoAxgBcAtFTEgMSAPSE0AgJRcR4iQDo5wMvJgYJcGAA8JMIRjR1gaANYwAXHD4b6APjgAlUZI6MLDAxqaMAsjoWHgExOTUtAIsAL4sLLCmaAxwADxRmDj4RKSUNFCKXixAA

1 Like