Develop Reference

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/>
}

Could not find a declaration file for module 'bootstrap/dist/js/bootstrap

I'm working on a nextjs application and installed bootstrap. The styles work but when I try to import the bootstrap.bundle.js file I get an error
Could not find a declaration file for module 'bootstrap/dist/js/bootstrap'. 'c:/Users/HP/OneDrive/Documents/webapps/nft-marketplace/node_modules/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type.
This is my pacakage.json
{
"name": "nft-marketplace",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#nomiclabs/hardhat-ethers": "^2.0.2",
"#nomiclabs/hardhat-waffle": "^2.0.1",
"#openzeppelin/contracts": "^4.3.1",
"#popperjs/core": "^2.10.2",
"axios": "^0.21.4",
"bootstrap": "^5.0.0-beta3",
"chai": "^4.3.4",
"dropzone": "^5.9.3",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.4.6",
"hardhat": "^2.6.4",
"ipfs-http-client": "^52.0.3",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"web3modal": "^1.9.4"
},
"devDependencies": {
"#types/bootstrap": "^5.1.6",
"autoprefixer": "^10.3.4",
"eslint": "7.32.0",
"eslint-config-next": "11.1.2",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.10"
}
}
This is my app.js file
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import { useEffect } from "react";
import "../styles/app.css";
function MyApp({ Component, pageProps }) {
useEffect(() => {
import("bootstrap/dist/js/bootstrap");
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
I have searched and tried different solutions. I have also installed #types/bootstrap but still didn't work. What am I doing wrong? I need help this issue has me so confused.

this worked for me
useEffect(() => {
typeof document !== undefined
? require('bootstrap/dist/js/bootstrap')
: null
}, [])

If you use bootstrap 5 try to install propperjs
npm install #popperjs/core --save

Here are a couple fixes that seemed to work for me. Make sure #types/bootstrap is installed.
Option 1: Instead of import("bootstrap/dist/js/bootstrap");, try just import("bootstrap");.
Option 2: You can tell typescript where the types are for the "bootstrap/dist/js/bootstrap" module by using the paths option in tsconfig.json. That would look something like this:
{
...
"compilerOptions": {
"paths": {
"bootstrap/dist/js/bootstrap" : ["./node_modules/types/bootstrap"]
}
},
...
}

If you are using Vue Vite and have already downloaded npm i --save-dev #types/bootstrap.
You will try this next step which is to add a line of code in the env.d.ts folder, add declare module "boostrap"

Test failures during styles file imports

Encountering issues with setting up Jest for React without the use of Create-React-App.
I do not want to use CRA thus sticking with babel and webpack config setup which does work less Jest.
Jest itself is working fine for testing. It only fails when a component has a css/scss file import.
Seen many similar issues here and tried out the solutions but the issue persists.
Could I get some help with what am doing wrong pls? Thanks.
These are some of the solutions I have tried out which is not working for me.
Tried accepted solution and also the other 2 solutions for this:
jest unexpected token when importing css
A Medium Blog with similar solution
https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token
Plus a couple of other examples more related to Vue but similar solution.
The error output as follows:
Jest encountered an unexpected token
Details:
.some-class {
^
This is class being tested:
import React from 'react';
import '../styles/styles.scss' // line causing issue
const App = () => {
const env = process.env.NODE_ENV;
return (
<div>
<h1>sample header</h1>
<p>{`This is in ${env} environment`}</p>
</div>
);
};
export default App;
The Test class
import App from "../../components/App";
import React from "react";
import {shallow} from "enzyme";
it('should get a matching snapshot', () => {
const wrapper = shallow(<App/>)
expect(wrapper.find('h1').text()).toBe('sample header')
expect(wrapper).toMatchSnapshot()
});
Styles file: styles.scss
.some-class {
color: aliceblue;
}
package.json for reference:
{
"name": "tar",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=beta webpack-dev-server",
"build-prod": "cross-env NODE_ENV=production webpack -p",
"build-beta": "cross-env NODE_ENV=beta webpack",
"test": "jest --config=jest.config.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"#types/react": "^16.9.49",
"#types/react-dom": "^16.9.8",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0",
"enzyme-to-json": "^3.0.1",
"file-loader": "^6.1.0",
"html-loader": "^1.3.0",
"html-webpack-plugin": "^4.5.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-cli": "^26.6.3",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"raf": "^3.3.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass-loader": "^10.0.2",
"typescript": "^4.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
"transform": {
"\\.js?x$": "<rootDir>/node_modules/babel-jest"
}
}
}
Inside Webpack.config.js (showing partial)
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
Inside . babelrc file
{
"presets": ["#babel/react", "#babel/env"]
}

Looks like you forget to mock scss file during test despite having already had css|less files there.
To fix that, you have to add scss as part of current style file pattern:
package.json
{
"jest": {
"moduleNameMapper": {
// ...
"\\.(css|less|scss)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
}
}
}
Update
You're currently input jest cli with --config=jest.config.json which is json file which is wrong (it must be js file) that ended up the issue.
The right one should be:
jest --config=jest.config.js // `js` not `json`
But you have 2 config one in jest.config.js and jest area in package.json file. Please try to use one place instead by either remove --config=jest.config.js in CLI or move entire jest block into the config file.

React Native - Jest.mock must be an inline function. Trouble testing component that uses 'withNavigation'

I'm using Jest and Enzyme in my React Native app to test my component and I keep getting this error when testing babel-plugin-jest-hoist: The second argument of 'jest.mock' must be an inline function. I don't really understand what I'm doing wrong because I am passing an inline function.
Here is my code in my test file (search-screen.tests.js):
// All necessary imports here
jest.mock('react-navigation', ({ withNavigation: (component) => component}));
describe("Search screen renders appropriately and function work", () => {
it("renders correctly", () => {
const searchScreen = renderer.create(<SearchScreen />).toJSON();
expect(searchScreen).toMatchSnapshot();
});
});
I used this stack overflow post for reference
The main reason I'm trying to mock react-navigation is because my search screen component is exported using 'withNavigation' (like so: export default withNavigation(SearchScreen)) and it breaks a lot of tests if I don't attempt to do this, is this the right thing to do?
Here is my package.json file as well, just incase.
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"ios-build": "sh scripts/ios/build-ipa.sh",
"test": "jest"
},
"dependencies": {
"axios": "0.18.0",
"prop-types": "15.6.2",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-cookies": "3.3.0",
"react-native-elements": "0.19.1",
"react-native-google-analytics-bridge": "6.0.1",
"react-native-maps": "0.21.0",
"react-native-snackbar": "0.5.1",
"react-native-vector-icons": "4.6.0",
"react-native-version-number": "0.3.4",
"react-navigation": "2.9.1",
"rxjs": "6.2.2"
},
"devDependencies": {
"babel-jest": "23.4.0",
"babel-preset-react-native": "5.0.2",
"#babel/core": "^7.0.0-beta.47",
"#babel/preset-env": "^7.0.0-beta.47",
"#babel/preset-flow": "^7.0.0-beta.47",
"babel-core": "^7.0.0-beta.47",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.5",
"babel-runtime": "^6.26.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"jest": "23.4.0",
"react-dom": "^16.6.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-navigation)"
],
"setupTestFrameworkScriptFile": "./setupTests.js",
"setupFiles": [
"./setupTests.js"
]
}
}
So what can I do to stop getting the react-navigation error with Jest? Let me know if you need more information from me. Any ideas will be helpful.

I'm guessing that the problem is that, for all intents and purposes, you're passing an object as the second parameter to jest.mock. The arrow function is within the object in the withNavigation key.
I believe that you need to pass it an arrow function that returns that same object, like this:
jest.mock('react-navigation', () => ({ withNavigation: (component) => component}));
I hope this helps! Cheers.

jest crash on compile due to json

Backstory on the problem:
Hi I have a react code that npm start works on but npm test doesn't and I have a slight changed version of the same code that my npm test works on but npm start doesn't. I'm now trying to figure out how to get my test to work on the code that npm start works on. I didn't realized the sight difference until after I completed test and now I'm having trouble converting the tests to work for my code that npm start works on. The difference in the codes was that my code that npm start works on state ={/*multiple things*/} was outside the constructor(props){} and all the functions in the react app had to be called with function = (value) => {} on the code that npm test worked on the state ={/*multiple things*/} was inside the constructor(props){} and all the functions in the react app had to be called with function(value){} to work.
The problem:
current error:
error
package.json
{
"private": true,
"version": "0.0.0",
"name": "example-react",
"dependencies": {
"moment": "^2.22.2",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-scripts": "^1.1.4",
"react-snapshot": "^1.3.0",
"react-table": "^6.8.6",
"recharts": "^1.1.0"
},
"devDependencies": {
"babel-jest": "*",
"babel-preset-env": "*",
"babel-preset-react": "*",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"jest": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && react-snapshot",
"test": "jest --verbose",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
.babelrc
{
"presets": ["env", "react"]
}
app.js
import moment from 'moment';
import React from 'react';
class ReactPage extends React.Component {
constructor(props) {
super(props)
this.setTimeMonth = this.setTimeMonth.bind(this)
this.setTimeDay = this.setTimeDay.bind(this)
}
state = {
CUS_KEY: "",
Date1: "",
Date2: "",
Date3: ""
}
setTimeMonth = (time) => {/*code*/}
setTimeDay = (time) => {/*code*/}
//some more functions
render(){
return();
}
}
export default ReactPage;
How do I fix this code so it doesn't crash on compile?