Develop Reference

I don't understand why it is having this error. Even if the directory is correct and also the filename

IMAGE OF THE ERROR
Android Bundling failed 5334ms
Unable to resolve module ../model/weights.bin from
D:\Repos\BANANAFILE\helpers\tensor-helper.js:
None of these files exist:
model\weights.bin(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
model\weights.bin\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
10 |
11 | const modelJson = require('../model/model.json');
12 | const modelWeights = require('../model/weights.bin');

React-native uses es6 imports so do this instead
import modelJson from "../model/model.json"
import modelWeights from "../model/weights.bin"

Multi module projects with create-react-app

I have a project called Frontend-Core-Components which contains my App component.
I have another project (let's just call it Alpha for now) which containsAlphaApiService, which I pass to the App component via its props, I do this in Alpha's index.tsx
Alpha uses Create-react-app, I'm using rescript to modify the Webpack config to add Frontend-core-components as a module, Inside this Webpack configuration, I use resolve.alias to map imports from Alpha index.tsx to the Frontend-Core-Components.
It all seems to work, except when I run the build from Alpha project, I encounter the following.
SyntaxError: /Users/coolguy/project/alpha/src/index.tsx: Unexpected token (9:11)
7 |
8 | window.onload = () => {
> 9 | render(<App apiService={new AlphaApiService()} />,
document.getElementById('root'))
| ^
10 | }
11 |
any ideas?

You need to compile your import module, before importing it.
I would suggest checking out this project to create React component libraries.
https://github.com/KaiHotz/react-rollup-boilerplate

Or you can include the Frontend-Core-Components in your ts-loader(or babel-loader) rule.

How to mock LayoutAnimation when testing React Native with Jest

I am using Jest and react-native-testing-library to test my components.
In one of my components I have the following code:
const handleToggleFilters = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
setPostFiltersActive(!postFiltersActive);
};
However, when testing my component, I get the following error
TypeError: require(...).configureNextLayoutAnimation is not a function
82 |
83 | const handleToggleFilters = () => {
> 84 | LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
| ^
85 | setPostFiltersActive(!postFiltersActive);
86 | };
87 |
I added jest.mock('react-native') to my setup.js file but it then started complaining about other missing entities through the rest of my test suite ... do I have to mock the entire react-native library for this to work?
What is the best way around this?

After looking at certain tests from react-native on github, it looked like they simple mocked the file themselves.
// Libraries/Components/Keyboard/__tests__/Keyboard-test.js
jest.mock('../../../LayoutAnimation/LayoutAnimation');
So in my setup.js file I simply did
jest.mock(
'../node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js',
);
And my tests passed.

"Syntax error: Unexpected keyword" in random places in react-scripts

I've recently updated my Javascript project from Webpack to react-scripts.
My code structure is fairly simple. I have a src folder with an index.js that just renders the DOM like this:
import ReactDOM from 'react-dom';
import Index from './pages/index';
ReactDOM.render(<Index />, document.querySelector('#root'));
and my Index which is just a single page that renders some stuff like this:
/**
* Injected styles for this component
*/
const styles = theme => ({
...
})
class Index extends Component {
...
}
export default withRoot(withStyles(styles)(Index));
in my package.json I use react-scripts to start the app.
When running npm run start the dev-webserver starts.
I can change a single letter, save the file, the dev-webserver restarts, and then I get random syntax errors throughout the code. They look like this:
./src/pages/index.js
Syntax error: Unexpected keyword 'return' (144:7)
142 |
143 | if(!this.state.data){
> 144 | return null;
| ^
145 | }
146 |
147 | return <Grid>
or this
./src/pages/index.js
Syntax error: Unexpected token (76:11)
74 | */
75 | render() {
> 76 | const { classes } = this.props;
| ^
77 |
78 | return (
79 | <div className={classes.root}>
or on any other part of the project. They keep happening until I restart npm.
I've tried to delete code until it doesn't happen anymore. Then I end up with a single React.Component that only renders a div with text.
I've tried to work on another project; the same issue happens there.
The project works fine on other devices.
Things I've tried:
delete node_modules folder
downgrade dependencies
delete project and clone again
use different browser
restart pc
change back to webpack
try to search online for the error
My node version is:
v6.9.1
My npm version is:
v6.8.0

Turns out my node version is very old (2016).
I updated node to the newest version and it stopped happening.

Importing several icons at once using react-icons

I'm trying to import multiple icons from the same pack at once, in this case, font-awesome like this:
import {FaPencilSquare,FaHome} from 'react-icons/fa'
but I'm getting this error:
ERROR in ./node_modules/react-icons/fa/index.js
Module build failed: SyntaxError: Unexpected token, expected { (1:7)
> 1 | export Fa500px from './500px';
| ^
2 | export FaAdjust from './adjust';
3 | export FaAdn from './adn';
4 | export FaAlignCenter from './align-center';
If I import icons separately I don't get any errors,
any ideas what it could be?

Thanks to #bennygenel it seems like there is an open issue with that a workaround is to add the lib folder to your import like this:
import {FaHome,FaPencilSquare} from 'react-icons/lib/fa'