score:0
i try this just to get a look :
class app extends component {
render() { return ( {midiconvert.load('./zelda.mid',function(midi) {
console.log(midi)
tone.transport.bpm.value = midi.bpm
tone.transport.timesignature = midi.timesignature
midi.tracks.foreach(function(track) {
var w = width / 127
track.notes.foreach(function(note) {
var x = (note.midi / 127) * width
var y = keyboard + note.time * scale
var h = note.duration * scale
graphics.drawrect(x, y, w, h)
})
new tone.part(playnote, track.notes).start(0)
})
tone.transport.start()
})}
{update()}
<p classname="app-intro">
to get started, edit <code>src/app.js</code> and save to reload.
</p>
</div>
);
} }
but there is this error :
uncaught error: objects are not valid as a react child (found: [object promise]). if you meant to render a collection of children, use an array instead.
in div (at app.js:58)
in app (at index.js:7)
at invariant (invariant.js:42)
at throwoninvalidobjecttype (react-dom.development.js:11898)
at createchild (react-dom.development.js:12109)
at reconcilechildrenarray (react-dom.development.js:12341)
at reconcilechildfibers (react-dom.development.js:12655)
at reconcilechildrenatexpirationtime (react-dom.development.js:13015)
at reconcilechildren (react-dom.development.js:13006)
at updatehostcomponent (react-dom.development.js:13340)
at beginwork (react-dom.development.js:13828)
at performunitofwork (react-dom.development.js:15863)
at workloop (react-dom.development.js:15902)
at htmlunknownelement.callcallback (react-dom.development.js:100)
at object.invokeguardedcallbackdev (react-dom.development.js:138)
at invokeguardedcallback (react-dom.development.js:187)
at replayunitofwork (react-dom.development.js:15310)
at renderroot (react-dom.development.js:15962)
at performworkonroot (react-dom.development.js:16560)
at performwork (react-dom.development.js:16482)
at performsyncwork (react-dom.development.js:16454)
at requestwork (react-dom.development.js:16354)
at schedulework$1 (react-dom.development.js:16218)
at schedulerootupdate (react-dom.development.js:16785)
at updatecontaineratexpirationtime (react-dom.development.js:16812)
at updatecontainer (react-dom.development.js:16839)
at reactroot../node_modules/react-dom/cjs/react-dom.development.js.reactroot.render (react-dom.development.js:17122)
at react-dom.development.js:17262
at unbatchedupdates (react-dom.development.js:16679)
at legacyrendersubtreeintocontainer (react-dom.development.js:17258)
at object.render (react-dom.development.js:17317)
at object../src/index.js (index.js:7)
at __webpack_require__ (bootstrap 650f6cadcfbff24b1408:678)
at fn (bootstrap 650f6cadcfbff24b1408:88)
at object.0 (registerserviceworker.js:117)
at __webpack_require__ (bootstrap 650f6cadcfbff24b1408:678)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 650f6cadcfbff24b1408:724)
at bootstrap 650f6cadcfbff24b1408:724
score:1
the file might be okay but it is possible that the react dev server (or another server) is not serving the correct file from the url. it is possible that the server is just returning an html in its place.
- look into the network tab in the browser dev tools.
- locate the midi file in the list
- right-click and try to open the file using the link.
Source: stackoverflow.com
Related Query
- Visualise midi file with midiConvert and Tonejs
- How can I enable react-i18n translation file to be used in the unit tests done with react-testing-library and jest?
- react native post form data with object and file in it using axios
- React with NextJS and Next-CSS: You may need an appropriate loader to handle this file type
- Typescript and React with File Upload (typing)
- Validating file size and format with YUP
- File upload with ASP.Net Core 2.0 Web API and React.js
- file upload with Reactjs and Flask
- Package.json complicated start script with "sh -ac" and .env file for Firebase
- ReactJS + D3: Parse local CSV file and passing it to state with d3-request
- Loop through array of file urls and download each one with React
- Storybook throws unexpected default export without title with Docs addon and .mdx file
- Uploading a file with reactjs and dealing with C:/fakepath/file
- Rollup image import with only file copy and preserve import
- How to select file on fs with react and electron?
- How to load a typings file as text with Webpack and React?
- How to uploading file with ReactJS and Axios
- React with NodeJS and Webpack - bundled js big file size
- CLI upload main.js file size limited when building with react and threejs
- How can I format an excel file with empty rows to have nested arrays and match a JSON object that I need to render?
- How to Download a Large CSV file with node.js and react.js
- Download and manipulate svg file with Axios and React
- How to only compile one typescript file with webpack 5 and exclude everything else?
- How to transpile and minify single file with webpack?
- Validating a child input type file with react-hook-form and Yup
- How to update a function with useEffect (like componentDidUpdate) and use .map function to display from JSON file ReactJS
- How to upload multiple file with react/node and multer
- React ajax request with multipart file and json data
- “You may need an appropriate loader to handle this file type” with Webpack and Babel
- Finding values or objects in a json file with nested objects and passing the result object to child in Javascript and react
More Query from same tag
- How can I fix "Cannot read property 'document' of undefined" when directly accessing the url? Next.js and apexcharts lib
- redux state doesn't have updated value in InterSectionObserver callback function
- How to access JSON in a React Component?
- How to Use SVG with React and ReasonML?
- Getting frameless React/Electron app title bar to not disappear during scroll
- How to perform a side effect after another side effect rendered a react component
- React Javascript, universal Header remove for Dashboard Site
- Passing Props to New Component - ReactJS
- Why does useState() duplicate websocket events?
- Why am I getting old value of state in the setState callback in react.js
- How to change the color of an icon when radio input is selected?
- How to use generic types correctly in HOC components?
- React Drag n Drop PUT request after props
- Broken icon displayed instead of Image with alt text - React
- Simple “Hello World” in ReactJS not working
- Redux Keep Session
- How to get list content from json without jsx in reactjs?
- Strange IE11 behavior with "Object doesn't support property or method 'includes'"
- ReactJS: Single onChange handler for multiple form inputs
- How to update the Material table in react js after CRUD operations?
- Execute a function after Props change
- Getting ERR! missing script: start on <npm start> command
- How to use PropTypes with Typescript in React
- Cannot update product quantity stored in MongoDB, using Node.js and React.js
- How to use MUI in Redwood JS?
- How i can use PHP Session in React?
- Warning: Failed prop type: Invalid prop `xs` supplied to `ForwardRef(Grid)` - Error in Material UI Grid
- My NodeJS server crashes after 6 Axios post request
- Redux data updating without dispatching
- How to show websocket data in front end?