What is the appropriate webpack loader to use static keywords? - reactjs

Question

I have the following error when I try to start my react-styleguidist documentation:
./node_modules/react-native-gesture-handler/touchables/TouchableHighlight.js 10:22
Module parse failed: Unexpected token (10:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| export default class TouchableHighlight extends Component {
> static defaultProps = {
| ...GenericTouchable.defaultProps,
| activeOpacity: 0.85,
# ./node_modules/react-native-gesture-handler/touchables/index.js 6:0-69 6:0-69
# ./node_modules/react-native-gesture-handler/index.js
My webpack.config.js look like this:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
return config;
};
My babel.config.js look like this:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
env: {
development: {
plugins: [
'#babel/plugin-transform-react-jsx-source',
],
},
},
};
};
Reproduction:
git clone https://github.com/kopax/expo-bug-reports.git
cd expo-bug-reports
git checkout react-styleguidist
npm i
npm run styleguide
What is the appropriate Webpack loader to use the static keyword?

Answer 1

If you use webpack for build your project, then you need to add the babel-loader to webpack.
module: {
rules: [{
test: /\.(j|t)sx?$/,
exclude: [/node_modules/],
use: [{
loader: "babel-loader",
options: {
presets: ['babel-preset-expo'],
env: {
development: {
plugins: [
'#babel/plugin-transform-react-jsx-source',
],
},
},
}
}]
},
}