Gatsby fail to compile with flow - reactjs

I have installed Flow in my Gatsby project, by adding the plugin gatsby-plugin-flow.
It has created a .flowconfig file in project root and a "gatsby-plugin-flow": "^1.0.4" dependency in package.json.
When I run gatsby develop, there is an error :
ERROR in ./src/components/layout.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/iqc/project/src/components/layout.js: Unexpected token, expected "," (10:29)
8 | import "./layout.css"
9 |
> 10 | const Layout = ({ children } : Object) => (
| ^
11 | <StaticQuery
12 | query={graphql`
It looks like Babel is failing to compile the project.
Maybe a problem with ES6 in Gatsby ?
I also tried to install Flow with official docs (no plugin), but the same problem occurs.
Thanks !

You have installed gatsby-plugin-flow, but you also need to add it as a plugin in the gatsby-config.js file.
gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-flow'],
}

Related

Unable to resolve module react-number-format

New to react native, but I've seen the "unable to resolve module" error a lot.
This time, I got the error with the react-number-format module after I tried to install react-native-imaged-card-view from this link https://github.com/WrathChaos/react-native-imaged-card-view using npm.
I would like tips on how to troubleshoot this issue and any other unable to resolve issue, because this happens quite frequently.
iOS Bundling failed 20323ms
Unable to resolve module react-number-format from /Users/davidooooo/Documents/redoKoho/NewKoho/node_modules/react-native-star-review/lib/src/components/StarReview.js: react-number-format could not be found within the project or in these directories:
node_modules
../../../node_modules
3 | import styles, { _reviewTextStyle } from "./StarReview.style";
4 | import { View, Text } from "react-native";
> 5 | import NumberFormat from "react-number-format";
| ^
6 | import Icon from "react-native-dynamic-vector-icons";
7 |
8 | const StarReview = props => {

Error: Automatic publicPath is not supported in this browser when i am running my test cases and every thing is fine

Why my test cases are not running and my component is rendering fine?
Test suite failed to run
Automatic publicPath is not supported in this browser
1 | import React from 'react';
> 2 | import { getInputStyleClassName } from '#app-
utility/stylesManager';
| ^
I had the same problem. For me, in my style manager package, I had to put the following in my webpack.config.js.
module.exports = {
output: {
publicPath: '',
...
},
};
You can find more info on this here: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/707
this error is coming because of a silly mistake.
I forgot to mention the public path field in my style manager package.

How to use typescript 4 package in typescript 3 project?

I have a ReactJS project built with create-react-app with typescript template and it is using typescript v3.7.5.
package.json
{
...
"typescript": "3.7.5",
...
}
I added the Jodit editor into my project following this guide.
But I am getting this error when I run the project.
/path/to/project/node_modules/jodit/index.d.ts
TypeScript error in /path/to/project/node_modules/jodit/index.d.ts(7,13):
'=' expected. TS1005
5 | */
6 |
> 7 | import type { IComponent, Nullable } from './src/types';
| ^
8 | import { Jodit as Super } from './src/jodit';
9 |
10 | export * from './src/types';
After getting this error, I did some investigation and found that jodit-react is built with typescript v4.1.3.
"typescript": "^4.1.3",
Maybe we are getting the error because of this typescript version difference. I am not so familiar with typescript and I am not sure if it is correct.
Anyone who has experience in this case, please let me know what I can do to use this package in my project.

How can I fix my test suites failure to run because of the tcomb-form-native library for React Native?

I am trying to perform unit testing and integration testing for a React Native application. When running yarn test --coverage several of my test suites fail to run because of the tcomb-form-native library.
I receive this specific error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import t from "./lib";
SyntaxError: Unexpected identifier
13 | // import { gray } from 'ansi-colors';
14 |
> 15 | import t from 'tcomb-form-native';
| ^
16 |
17 | const Form = t.form.Form;
18 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (screens/ReservationScreen.js:15:1)
I updated the package.json file following the Tests section from the library's GitHub, https://github.com/gcanti/tcomb-form-native, but continue to get the same error.
I'm confused by this line from the tcomb-form-native ReadMe Tests description:
"ios.js" <<<<<<<<<<<< this needs to be defined!
I created the React Native app using Expo so I don't have an ios.js file. The only difference under the "jest": from the example code in the GitHub is that I also have "preset": "jest-expo", defined.
What changes do I need to make to my package.json file or my test suites in order for my test suites to run? (They don't have to pass, just simply run.)
Edit:
I tried adding the following code to package.json based on the top answer from https://github.com/gcanti/tcomb-form-native/issues/443:
"transformIgnorePatterns": [
"node_modules/(?!react-native|tcomb-form-native)"
]`
I added the code without the original suggested edits from the library's GitHub ReadMe and added it IN ADDITION to the suggested edits. I am still receiving SyntaxError: Unexpected identifier when I run tests.
Edit #2:
I changed changed import t from 'tcomb-form-native'; to var t = require('tcomb-form-native'); and I'm still receiving SyntaxError: Unexpected identifier.

React native with haul not working, throwing some loader issue

I have added haul to my react native project to analyze why my release build fails. but I got another problem instead. I have a webpack.haul.js with following config
module.exports = {
entry: './index.js',
};
When i run react-native run-android i see the following error. Can someone help me please.
ERROR Failed to compile.
./node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type.
| */
| export default class StyleProvider extends React.Component {
> static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
# ./node_modules/native-base-shoutem-theme/index.js 3:0-48 7:0-15:2
# ./node_modules/native-base/dist/src/index.js
# ./screens/Academics/HomeWorkScreen.js
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/native-base-shoutem-theme/src/connectStyle.js 116:26
Module parse failed: Unexpected token (116:26)
You may need an appropriate loader to handle this file type.
|
| class StyledComponent extends React.Component {
> static contextTypes = {
| theme: ThemeShape,
| // The style inherited from the parent
# ./node_modules/native-base-shoutem-theme/index.js 1:0-46 7:0-15:2
# ./node_modules/native-base/dist/src/index.js
# ./screens/Academics/HomeWorkScreen.js
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
./node_modules/rn-fetch-blob/index.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type.
| AppState,
| } from 'react-native'
> import type {
| RNFetchBlobNative,
| RNFetchBlobConfig,
# ./screens/Academics/HomeWorkScreen.js 1:603-627
# ./App.js
# ./index.js
# multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:bundleDemshReleaseJsAndAssets'.
> Process 'command 'node'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
Your problem is that somehow or other, babel is not configured correctly to compile the features that exist in the code mentioned in those errors.
The specific problems:
static method properties (you need https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
flow types (you need https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types)
It's hard to say exactly what is wrong with your config, but a faster way to test is to run the babel CLI directly on those files. If you ensure that BABEL_ENV and any other babel cli/env/API flags are set the same way as they are in the webpack build (you might have to do some debugging to find where babel-loader is applied), you can do for example yarn run babel node_modules/native-base-shoutem-theme/src/StyleProvider.js
If you can reproduce the problem like this, you can experiment in a much tigher loop with your babel configuration until you find a solution.
A good starting points is updating babel and all the presets/plugins you have installed.

Resources