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
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 => {
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.
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.
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.
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.