I’ve a Create React App project and I’m trying to use useSignal as per this docs, but the values of signals are not rendering. (Like x.value does not render).
I’ve run:
<code>npm i @preact/signals-react
npm i --save-dev @ preact/signals-react-transform
</code>
<code>npm i @preact/signals-react
npm i --save-dev @ preact/signals-react-transform
</code>
npm i @preact/signals-react
npm i --save-dev @ preact/signals-react-transform
And have added a babel.config.js file in the root:
<code>module.exports = {
plugins: [["module:@preact/signals-react-transform"]],
}
</code>
<code>module.exports = {
plugins: [["module:@preact/signals-react-transform"]],
}
</code>
module.exports = {
plugins: [["module:@preact/signals-react-transform"]],
}
CRA doesn’t allow customizing the Babel configuration without ejecting. You may rather use react-app-rewired.
Here’s the detailed steps:
Install the react-app-rewired as dev dependency along with customize-cra and the required babel plugin (@preact/signals-react-transform):
<code>npm i react-app-rewired customize-cra @preact/signals-react-transform -D
</code>
<code>npm i react-app-rewired customize-cra @preact/signals-react-transform -D
</code>
npm i react-app-rewired customize-cra @preact/signals-react-transform -D
Replace react-scripts with react-app-rewired from scripts in package.json
<code>"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
</code>
<code>"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
</code>
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
Create a config-overrides.js file:
<code>const { addBabelPlugins, override } = require('customize-cra')
module.exports = override(...addBabelPlugins('module:@preact/signals-react-transform'))
</code>
<code>const { addBabelPlugins, override } = require('customize-cra')
module.exports = override(...addBabelPlugins('module:@preact/signals-react-transform'))
</code>
const { addBabelPlugins, override } = require('customize-cra')
module.exports = override(...addBabelPlugins('module:@preact/signals-react-transform'))
Run your app with npm start. 🥳