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
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 => {
I've been using a Mono repo to share react native components with react app. when I was trying to use a react native component from react, it has been showing an error which I couldn't resolve.
I've tried to follow the instructions like adding #babel/preset-flow to presets. But, still no use. Please help me out.
please Look At the error i've been facing:
5 |
6 | /* eslint-disable-next-line */
> 7 | export interface TestingProps {
| ^
8 | }
9 |
10 |
Add #babel/preset-flow (https://github.com/babel/babel/tree/main/packages/babel-preset-flow) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-flow (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-flow) to the 'plugins' section to enable parsing.
at instantiate (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:67:32)
at constructor (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:364:12)
at Parser.raise (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:3365:19)
at Parser.expectOnePlugin (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:3414:18)
at Parser.isExportDefaultSpecifier (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:14261:16)
at Parser.maybeParseExportDefaultSpecifier (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:14158:14)
at Parser.parseExport (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:14088:29)
at Parser.parseStatementContent (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:13073:27)
at Parser.parseStatementLike (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:12952:17)
at Parser.parseModuleItem (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:12933:17)
at Parser.parseBlockOrModuleBlockBody (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:13558:36)
at Parser.parseBlockBody (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:13550:10)
at Parser.parseProgram (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:12842:10)
at Parser.parseTopLevel (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:12832:25)
at Parser.parse (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:14740:10)
at parse (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\parser\lib\index.js:14782:38)
at parser (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\core\lib\parser\index.js:41:34)
at parser.next (<anonymous>)
at normalizeFile (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\core\lib\transformation\normalize-file.js:66:38)
at normalizeFile.next (<anonymous>)
at run (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\core\lib\transformation\index.js:21:50)
at run.next (<anonymous>)
at transform (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\core\lib\transform.js:22:41)
at transform.next (<anonymous>)
at step (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:261:32)
at D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:273:13
at async.call.result.err.err (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:223:11)
at D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:189:28
at D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\#babel\core\lib\gensync-utils\async.js:72:7
at D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:113:33
at step (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:287:14)
at D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:273:13
at async.call.result.err.err (D:\workStation\Stacks\TurboRepoCrossPlatform\master\node_modules\gensync\index.js:223:11)
webpack compiled with 1 error (088b5b6bf6422082)```
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 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.
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