Develop Reference

Could not find a declaration file for module for RN npm package

I created a basic npm package component that allow me to put custom loading images at my Image component, but when I tried to use at my example app the component return undefined and this message appeared:
Could not find a declaration file for module 'react-native-default-image'.
After some researchs I find out that it's because the module doesn't provide any typings for TypeScript, but I'm not using TypeScript at all, my component is a .js file. There's some way to pass trought this?
My component file:
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class DefaultImage extends React.Component {
state = { showDefault: true, error: false };
render() {
var image = this.state.showDefault ? this.props.defaultSource : ( this.state.error ? this.props.defaultSource : this.props.source );
return (
<Image style={this.props.style}
source={{uri: image}}
onLoadEnd={() => this.setState({showDefault: false})}
onError={() => this.setState({error: true})}
resizeMode={this.props.resizeMode}/>
);
}
}
My index file:
import { DefaultImage } from "./DefaultImage";
export { DefaultImage };
My package.json file:
{
"name": "react-native-default-image",
"version": "1.0.3",
"type": "module",
"description": "Image component that allow to set up a default image to be shown when the custom image is loading and when the custom image can't be loaded",
"main": "index.js",
"directories": {
"example": "example"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"react-native",
"image",
"default"
],
"author": "anti-duhring <mateusvnlima#gmail.com> (http://example.com)",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/preset-react": "^7.17.12",
"metro-react-native-babel-preset": "^0.71.0"
}
}
All my files:

How can I import Audio into My Create-React-App application?

I am building a music-player application, where basically the user clicks the song they want and it plays the assigned music. However I am getting this error:
ERROR in ./src/components/MusicPlayer.js 7:0-17
Module not found: Error: Can't resolve './music' in '/Users/zpotatlises/Desktop/spotifly/src/components'
I am assuming I am getting this error because i imported the audio incorrectly in my application. This image shows the audio folder in my src file.
(when you open the file) ->
This is my code on MusicPlayer.js:
import React, { Component,audio,useRef } from 'react';
import "./music";
import house1 from './music/house1';
import house2 from './music/house2';
import house3 from './music/house3';
import house4 from './music/house4';
const data = [
{ imgSrc: 'house1.png', audioSrc: house1 },
{ imgSrc: 'house2.png', audioSrc: house2 },
{ imgSrc: 'house3.png', audioSrc: house3 },
{ imgSrc: 'house4.png', audioSrc: house4 },
];
export default class MusicPlayer extends Component {
render() {
return (
<div>
<ol>
{data.map(({ imgSrc, audioSrc }) => (
<MediaComponent imgSrc={imgSrc} audioSrc={audioSrc} />
))}
</ol>
</div>
);
}
}
const MediaComponent = ({ imgSrc, audioSrc }) => {
const audioRef = useRef(null);
const toggleAudio = () =>
audio.ref.current.paused
? audioRef.current.play()
: audioRef.current.pause();
return (
<li>
<img src={imgSrc} onClick={toggleAudio}/>
<audio ref={audioRef} src={audioSrc} />
</li>
);
};
Any idea on how to import audio in my application? How did I do it incorrectly?
(P.s english is my second language, if you need any clarification please let me know)
Best,
-Zpo
Package.json :
{
"name": "spotifly",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"navbar": "^2.1.0",
"react": "^18.0.0",
"react-audio-player": "^0.17.0",
"react-bootstrap": "^2.2.3",
"react-bootstrap-icons": "^1.8.1",
"react-dom": "^18.0.0",
"react-is": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
New Error Messages:
ERROR in ./src/components/MusicPlayer.js 7:0-40
Module not found: Error: Can't resolve './music/house1.mp3' in '/Users/zpotatlises/Desktop/spotifly/src/components'
ERROR in ./src/components/MusicPlayer.js 8:0-40
Module not found: Error: Can't resolve '#/music/house2.mp3' in '/Users/zpotatlises/Desktop/spotifly/src/components'
ERROR in ./src/components/MusicPlayer.js 9:0-48
Module not found: Error: You attempted to import ../../../assets/house3.mp3 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Your syntax is correct, so you've likely got the path wrong.
Be sure to include the file's extension for media assets (.mp3)
Based on your error message, it is looking for ./music inside your components directory, which likely isn't correct.
Delete import "./music"; and then import the specific MP3 files you need
Can't resolve './music' in '/Users/zpotatlises/Desktop/spotifly/src/components'
Take a look at where your asset is in relation to the file that's importing it. If you're able to share more info about your projects directory structure, then I can help further.
Side note, I recommend setting up import aliases, so that you can import files from their absolute location. It will reduce confusion and be easier to manage.
How you do this depends on your type of project, but it's usually something like thin in your tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
You'll then be able to import #/assets/my-tune.mp3 instead of ../../../assets/my-tune.mp3, much simpler :)

Usage:
Just create a file index.js in videos.
import videos from '~/assets/videos';
function App() {
return <video src={videos.video1} width={100} height={100} controls autoPlay/>
}

SyntaxError: Cannot use import statement outside a module: when running Jest-expo tests

The configuration for the project. Currently using jest-expo for testing in this project. The version of jest-expo in the project is 39.0.0. Version of Jest installed globally is 26.6.3
package.json :
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest",
"type": "module"
},
...
"devDependencies": {
"#babel/core": "^7.12.3",
"babel-preset-expo": "^8.3.0",
"jest-expo": "^39.0.0",
"react-test-renderer": "^17.0.1"
},
"jest": {
"preset": "jest-expo"
}
jest.config.js:
module.exports = {
setupFilesAfterEnv: [
'./setup-tests.js',
],
"transformIgnorePatterns": [
"/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/index.js",
"/node_modules/#react-native-community/async-storage/(?!(lib))",
"/node_modules/native-base-shoutem-theme/.*",
"node_modules/native-base/.*",
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|#react-native-community|expo(nent)?|#expo(nent)?/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|#sentry/.*|native-base-*|native-base-shoutem-*)"
],
verbose : true
};
babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['inline-dotenv'],
};
};
I am trying to render a snapshot for a login page that is react-native:
The error is caused by the below import module inside LoginScreen.js
import {
Content,
Container,
H2,
Form,
Item,
Input,
Button,
Text,
View,
} from "native-base";
Test case inside LoginScreen.test.js
import LoginScreen from './LoginScreen';
import React from 'react';
import renderer from 'react-test-renderer';
it('renders LoginScreen correctly', () => {
const tree = renderer.create(<LoginScreen />).toJSON();
expect(tree).toMatchSnapshot();
});
Test case is throwing the error
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle, { clearThemeCache } from "./src/connectStyle";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1258:14)
at Object.<anonymous> (node_modules/native-base/src/index.js:1:1)
I have tried other similar answers available on Stack Overflow. But none of them applied to the current project on which I am working with.
I have added connectStyle to the Jest transformIgnorePatterns but still it is throwing that error.
Current Project :
React native mobile application developed using expo.
Using jest-expo for testing.
Configuration of the project.
Tried uninstalling and re-installing all the npm and expo modules, that didn't help either.

This is an open issue on the Native base end. Further details can be found on this ticket :
https://github.com/GeekyAnts/NativeBase/issues/3105

importing any component from react-bootstrap throws error

I have some weird error everytime when I'm trying to use some component from 'react-bootstrap'. Here is some small example where I'm importing "HelpBlock" component.
import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{validationErrorMessage}</HelpBlock>
}
</div>
</div>
);
};
export default RegisterFormDetails;
but then I'm getting this error
Attempted import error: 'react-bootstrap' does not contain a default export (imported as 'HelpBlock').
my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"bootstrap": "^4.3.1",
"lodash": "^4.17.11",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-bootstrap": "^0.32.1",
"react-bootstrap-sweetalert": "^4.4.1",
"react-dom": "^16.8.3",
"react-scripts": "^2.1.5",
"react-select": "^2.4.1"
}
}
somebody can help me ? I have rechecked the react-bootstrap folder in node_modules and contains the component which I'm trying to import

You can import individual components like:
import HelpBlock from 'react-bootstrap/HelpBlock ';
The first one is importing component directly, The above is a default import. Default imports are exported with export default .... There can be only a single default export. Since 'react-bootstrap' does not contain a default export , you have to import directly.
or import { HelpBlock } from 'react-bootstrap';
Here, only HelpBlock will be imported. Hope it helps.
This article will help you to understand es6 modules.

inline CSS style is not getting rendered [Previously: Component is not rendering its elements - react]

I am learning React. I am trying to render the following component, (contents of index.js)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class d3Dash extends React.Component {
render() {
return (
<div style={{width:200,height:100,border:1,color:"black"}}>Hellow!!</div>
);
}
}
//==============================================================================
ReactDOM.render(
<d3Dash/>, document.getElementById('d3Root')
);
My index.html file is as follows,
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<script async src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="d3Root"></div>
</body>
</html>
I am not able to figure out why, but div doesn't render itself as a rectangular box in the page. Whereas, when I insert the same code inside the body of the html page it does render itself as a black rectangular box. Could someone shed some light on how to debug this? Or is it an issue with JSX syntax?
As an addition, my package.json is,
{
"name": "reactdash",
"version": "0.0.1",
"description": "D3js - react interactive visualization dashboard",
"main": "index.js",
"proxy": "http://'127.0.0.1':3002",
"keywords": [
"d3",
"react"
],
"author": "Russell Bertrand",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"eslint-plugin-flowtype": "^2.35.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"htmltojsx": "^0.2.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "^1.0.10",
"webpack": "^3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

You nailed it. It's an issue with JSX.
In React, any component you define must begin with a capital letter, otherwise it's assumed that they are plain old html dom nodes.
Redefine your component as D3Dash instead.
Edit: Also, be sure you're exporting your component properly. The class definition should read:
export class D3Dash extends React.Component
or
export default class D3Dash extends React.Component
depending on how you are importing this component. If you've declared this component in the same file that you mount it via ReactDOM.render, then disregard.
Edit: Also, the inline styles on that div seem inconsistent with your description. For instance, color is the css property for text color, and border requires more than just a number.
Is it possible that you intended to do this instead:
<div style={{
background: 'black',
color: 'white',
width: '200px',
height: '100px',
border: '1px solid black' }}>Hellow!!</div>
Edit: Your index.html is missing the script tag that brings in your webpack bundle.