I'm trying to use tone.js in a next.js react project.
When I run or build i get this error "ReferenceError: AudioBuffer is not defined"
I have isolated the tone.js code in codesandbox and it's working perfectly.
https://codesandbox.io/s/tonejs-react-pink-noise-generator-pfnl0?file=/src/App.js
But not in the next.js app
ReferenceError: AudioBuffer is not defined
at ki (/node_modules/tone/build/Tone.js:1:117922)```
AudioBuffer is a web browser thing, it does not exist in node.js. The error you are getting is because the code that uses AudioBuffer can't run on the server. You need to instantiate that part of the code only in the browser. That is usually done in useEffect hook, or on the server, you can first check if window object is defined.
Related
I want to import my Git Repository (of my Next.js project) on Vercel but when I click on "import", nothing happens, just a white page on my browser which doesn't do anything...
When I look at the Console, there is an error :
" Uncaught (in promise) TypeError: Cannot read property 'call' of
undefined "
I don't know what to do, I've deployed projects on Vercel in the past and it worked perfectly.
Thank you for your help
We're developing a Next.js app using react-i18next for localization. We're using next export (Static HTML Export). The react-i18next library requires initialization code, and I'm not sure where to call that.
(We're not using next-i18next, as that does not work with next export.)
Right now I have the initialization in a separate module (outside of pages/). If I import that module into pages/_app.tsx and run the build script (next build && next export), the build hangs. When I hit Ctrl-C, I get:
Error: setRawMode EIO
The same thing happens if I try to import it from a custom Document.
My current workaround is to import the initialization module in pages/index.tsx - that works, but feels wrong.
The project uses TypeScript and yarn v1, and was scaffolded with create-next-app (in case any of that is relevant).
A Custom App import does appear to be the correct place for client-side initialization code (inferred based on Custom Polyfills).
The issue is that an _app module will execute when next build && next export is called. Asynchronous calls (i18next-http-backend in my case) can cause the build script to hang.
The fix is to wrap the initialization code in:
if (typeof window !== 'undefined') {
// initialization code - will only run on client side
}
Based on https://flaviocopes.com/nextjs-server-client-code/
This does mean that the initialization code won't run for Jest tests either, but react-i18next can be mocked.
I am new to React and cypress. We are using Cypress script to cover React developed code. I am able to launch application in browser However when we use cy.visit('application url') then script fails with below error message :
ReferenceError: Handlebars is not defined
After getting this error I added handlebars dependency in package.json file and restarted server. This also didn't the problem. Any help on this will be greatly appreciated.
My app uses the latest Meteor 1.4.1.1 with React for UI and use Blaze only for accounts-ui. It ran fine until I 'meteor update' and 'npm update' yesterday. Now the app show blank page because of the exception (TypeError: HTML.Raw is not a function) in template.main.js (below) which Blaze compiled from the simple main.html that provide the root for React.
Template.body.addContent((function() {
var view = this;
return HTML.Raw('<div id="app-root"></div>');
}));
Meteor.startup(Template.body.renderToDocument);
When I looked at the HTML object in console:-
I'm new to Meteor and have no idea what's happening. I guess the Blaze's global HTML object must have the .raw method for use here. But why it is missing?
I have no idea what to do here. Everything was working fine but all of a sudden when I deploy now I get cryptic errors
Uncaught TypeError: Cannot read property 'helpers' of undefined
bf828391c4c2197419ba1631eee96dfda64d3e0a.js:111 Uncaught TypeError: Cannot read property 'ServiceConfiguration' of undefined
memrey.meteor.com/:1 Document was loaded from Application Cache with manifest http://memrey.meteor.com/app.manifest
memrey.meteor.com/:1 Application Cache Checking event
bf828391c4c2197419ba1631eee96dfda64d3e0a.js:3 Exception in callback of async function: TypeError: Cannot read property 'form' of undefined
at x.setState (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:135:16160)
at a.contains.o.route.a.extend.onBeforeAction (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:142:3525)
at p (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:72:4036)
at http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:3:6711
at C (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:82:4631)
at p (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:72:4036)
at http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:3:6711
at b (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:82:4559)
at p (http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:72:4036)
at http://memrey.meteor.com/bf828391c4c2197419ba1631eee96dfda64d3e0a.js:3:6711
memrey.meteor.com/:1 Application Cache NoUpdate event
bf828391c4c2197419ba1631eee96dfda64d3e0a.js:64 Route dispatch never rendered. Did you forget to call this.next() in an onBeforeAction?
The code is working just fine locally. So I am lost. I don't even know where to begin debugging.
I am using iron router with useraccounts template package. I am not sure if it is related to that.
Ok I found out what the issue is.
When I defined a template helper like:
Template.notification.helpers
I misspelled notification
Which caused all the errors. But what is strange is that it worked locally but not when deployed.
Exceptions may be tolerated because they are in seperate files when working in development mode, however when deployed in production they're minified and join so the execution of the js file is stopped.
Source