I was trying to compile a react program, which includes react-beautiful-dnd. However, I got the following error:
SyntaxError: (path)\node_modules\react-beautiful-dnd\src\state\auto-scroller\can-scroll.js: Unexpected token, expected "," (2:14)
1 | // #flow
> 2 | import { type Position } from 'css-box-model';
| ^
3 | import { add, apply, isEqual, origin } from '../position';
4 | import type { DroppableDimension, Viewport, Scrollable } from '../../types';
5 |
This file is part of the dependency, and it was working perfectly fine until about 30 minutes ago. I have tried reinstalling the package and the error still shows up.
Related
When I follow the Custom Tailwind Config insctructions found here https://electron-react-boilerplate.js.org/docs/styling#without-custom-tailwind-config the app breaks.
I get this error
ERROR in ./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/tailwindcss/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) C:\Users\User\leona_repo\SP\tw_bp\your-project-name\node_modules\tailwindcss\tailwind.css Unknown word
1 |
> 2 | import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
# ./node_modules/tailwindcss/tailwind.css 8:6-255 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-225 83:0-225 84:22-29 84:33-47 84:50-64 61:4-74:5
# ./src/renderer/App.tsx 5:0-34
# ./src/renderer/index.tsx 5:0-24 8:17-20
They said they fixed it in this issue thread but does not work for me
https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/3067
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 => {
I'm trying to create sound player in my react native app, but I was trying to install a lot of various sound packages, and all of them are giving me pretty same issues, like this:
Without them, project compiles and runs fine.
UPD:
Added arrors as text:
ERROR in ./node_modules/react-native-sound/sound.js
Module not found: Error: Can't resolve 'react-native/Libraries/Image/resolveAssetSource' in '/mnt/c/users/user/desktop/adalo/audio_player/my-component/node_modules/react-native-sound'
# ./node_modules/react-native-sound/sound.js 7:25-83
# ./src/components/CustomAudioPlayer/index.js
# ./index.js
# ./dist/input/runtime.js
ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/users/user/desktop/adalo/audio_player/my-component/node_modules/react-native/Libraries/Image/resolveAssetSource.js: Unexpected token, expected "from" (19:12)
17 | const {pickScale} = require('./AssetUtils');
18 |
> 19 | import type {ResolvedAssetSource} from './AssetSourceResolver';
| ^
20 |
21 | let _customSourceTransformer, _serverURL, _scriptURL;
22 |
UPD2:
Running command react-native info
I am working to migrate a React app to the latest v17.x version (from 16.13.0).
However I am getting parsing errors on the typescript files when I upgrade React (the app uses javascript mostly, but some files were later added in typescript).
e.g.
src\components\data\Assets\FYAsset.ts
Line 2:11: Parsing error: Unexpected token
1 | export class FYAsset {
> 2 | private apiData: Object | undefined; // the res data, as received from the API
| ^
3 |
4 | private id: number | undefined;
5 | private providerId: number | undefined;
src\components\data\Users\FYUser.ts
Line 5:19: Parsing error: Unexpected token
3 |
4 | export class FYUserConstants {
> 5 | static readonly USERGROUPID_ADMIN = 1;
| ^
6 | static readonly USERGROUPLABEL_ADMIN = "ADMIN";
7 | //
8 | static readonly USERGROUPID_EXPERT = 2;
The old app uses the following versions (which work fine):
react-scripts v3.4.0
react/react-dom v16.13.0
typescript v3.8.3
For the migration, the errors appear when I move over to react-scripts v4.0.1 and react v17.0.1. I tried upgrading typescript to v4.1.3 but that didn't change anything.
Again, everything works fine in the previous branch. Could you suspect what causes the issues?
Thanks
The problem was solved by deleting the .eslintcache file that was carried over from the legacy project.
The following tests pass with just import Icon from 'react-native-vector-icons/Ionicons';, but when I add Icon.loadFont(); to load the font, the following error appears. How would I add types to that function call or is that unrelated.
Code:
import Icon from 'react-native-vector-icons/Ionicons';
Icon.loadFont(); // Error here
Error (From npm test):
RNVectorIconsManager not available, did you add
the library to your project and link with libRNVecto
rIcons.a? Try running `react-native link react-nativ
e-vector-icons` and recompiling.
6 | import moment from 'moment';
7 | import Icon from 'react-native-vector-icons/Ionicons'; > 8 | Icon.loadFont();
| ^ 9 |
10 | // Screen Dimensions
11 | const { height, width } = Dimensions.get(
'window');
at ensureNativeModuleAvailable (node_modules/r
eact-native-vector-icons/lib/ensure-native-module-av
ailable.js:13:11)
at Function.loadFont (node_modules/react-nativ
e-vector-icons/lib/create-icon-set.js:148:7)
at Object.<anonymous> (src/TimePicker.tsx:8:6) at Object.<anonymous> (src/index.js:4:1)
I've already tried the recommended npm command in the error:
react-native link react-native-vector-icons