I'm unable to import Tone in my Next.js project. I have Tone as a dependency, but when I run import * as Tone from 'tone' Next says it can't find the module node_modules/tone/build/esm/core/Global imported from node_modules/tone/build/esm/index.js. Originally I thought it was a browser thing, where I had to make sure I was importing Tone only in the browser and not in Node, but dynamically importing (as described here) in the useEffect hook (which only runs in the browser), but it still couldn't find the module.
The odd thing is that the browser console prints * Tone.js v14.8.38 *, so clearly Tone exists, but Next can't find it for some reason.
I'm running Next.js version 12, Tone v14.8.38, React 18 and yarn v3.2.0, if that matters. I'd really appreciate any help!
You are on the right track with the dynamic loading, I've got a large project doing it that way. This is how I've done it (although I can't really see what you have done wrong) -
const DynamicComponent = dynamic(
() => import('../components/foobar'),
{ ssr: false }
)
More details can be seen here (although I see you posted that already).
https://nextjs.org/docs/advanced-features/dynamic-import
Inside your component you can import tone objects in the following fashion eg.
import { Clock, Merge, Oscillator, Player, Waveform } from "tone";
I have used useEffect to instantiate tone classes, but I have also done it using JS classes. Both ways worked for me.
Is this different from what you did? Just to check you are doing the dynamic import at the page level right? And how are you importing the tone objects? This depends on your specific code.
I'm using
"next": "^10.0.9",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"tone": "^14.7.77"
Might be worth downgrading to these and trying.
it is currently not possible to run tone in node. You should download tone.js from here and include it as a script in your project.
you could also try using another library like soundfont
Related
Well, this problem is common, but it puzzles me that there isn't a better solution.
In turborepo as well as in other projects, if you have a package with several components, and you want to make it visible to other packages, each component of this package must be exported from a single index.
Like this:
//index.tsx
//Button
export * from "./atoms/Button"
//TextField
export * from "./atoms/TextField"
But let's assume we have thousands of components, we would need to continue exporting from its own declaration, and then import it into the project index, and only then make it visible to other packages.
Alright, the problem is the manual process of doing this, managing which package still exists, removing an export, etc, unnecessary dynamics.
I am able to use the components without using this index file, the problem is that vscode is not able to suggest the components without using the index.
Take a look:
import TextField from '#ui/atoms/TextField'
If I put the right path, the component is imported normally, without errors, but without vscode suggestion.
Is there any alternative solution? Is there any way to automatically generate this index with all exports ?
To simulate this just use turborepo example project, there must be other ways too, it's not turborepo related problem but package management.
npx create-turbo#latest
I also had to change the packge.json of the shared-package.
"scripts": {
"lint": "eslint **/*.tsx"
},
Here is also the code: GitHub - Turborepo Basic
I have a codebase with for example 3 components.
I want to create one file with all svelte files and then export all of them.
so with that, I turned my codebase to become a library, which I can reuse with other codebases.
in javascript I always used export default {func1, func2}
so I can do in another files import func1 from library
and In the docs they suggest to use #svelte.js/package
https://www.npmjs.com/package/#sveltejs/package
which haven't done 0 docs about it, and nothing works.
except for this https://kit.svelte.dev/docs/packaging but don't show the steps to do either.
for more info: I am not using sveltekit, but svelte.js framework.
I writed:
npm i #svelte.js/package
I writed then svelte-package -w
but there is error: command not found
I also when installed the package get this
33 VULNERABILITIES
is this a beta? should not use it?
if yes how to do then this?
another thing I am using vite as bundle if you interested in.
As is stated in the read-me:
This is part of the SvelteKit framework and CLI.
This is meant for packaging output of SvelteKit; if you are not using that, then your output probably will not be compatible/correctly configured.
How to avoid the this kind of warning?
My app is working but it gives warning in terminal like below
Compiled with warnings.
/home/karim/Desktop/React-Native/RN-Complete-Guide/node_modules/react-navigation-header-
buttons/src/overflowMenuPressHandlers.js
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native-web/dist/index'.
It is because of of I imported HeaderButtons and HeaderButton from react-navigation-header-buttons like below
import { HeaderButtons } from "react-navigation-header-buttons";
import { HeaderButton } from "react-navigation-header-buttons";
And I am using react-native 4.x veriosn. is there any way to avoid this warning?
This file in the source for react-navigation-header-buttons imports ActionSheetIOS, which is not supported by React Native web applications. This seems like it's probably an issue with React Native web itself, as even importing the ActionSheetIOS component in your project without actually using it will cause a crash from my past experience.
You probably won't be able to use react-navigation-header-buttons for your solution because of this issue. The authors also go on to say in their README that web support is currently experimental:
Supports iOS and Android, web support is experimental.
I'd suggesting either finding a way to avoid this library or flag an issue on the repo to suggest swapping ActionSheetIOS in with a cross-platform action sheet solution like react-native-action-sheet.
in react-native-web/dist/index.js i exported
export { ActionSheetIOS }; and somehow the warning disappeared
I am using Gatsby and importing jquery.
When I run Gatsby build I get the following error:
WebpackError: jQuery requires a window with a document.
This is due to Gatsby doing server side rendering.
I have read through a number of issues on GitHub (this one being the best one I could find).
My code looks like the following:
import React, { Component } from 'react'
import Link from 'gatsby-link'
import LandingScreen from '../components/LandingScreen'
import $ from 'jquery'
import 'fullpage.js/dist/jquery.fullPage.js'
import 'fullpage.js/dist/jquery.fullpage.css'
class TestPage extends Component {
componentDidMount() {
$('#fullpage').fullpage({
verticalCentered: false
});
}
render(){
return (
<main id="fullpage">
<LandingScreen />
</main>
)
}
}
export default TestPage
This is breaking so I tried the following based on the GitHub thread above, but this also fails:
if (typeof window !== 'undefined') {
import $ from 'jquery'
}
Can anyone advise how to import jquery?
Gatsby's components will run on both Node (no window object there) in order to produce static HTML and on the client's browser as React components. This is why you get this error.
The plugin you are trying to use needs to run only on the client because it needs the actual viewport dimensions to operate. Gatsby has a special API for this that you can use to run the plugin only on client side. A quick solution would be to load jQuery there and initialize your plugin on onClientEntry.
I would also suggest you find a more lightweight plugin that does the same thing without the jQuery dependency. It's a pity to use jQuery in a React stack. Maybe somebody else can recommend one.
Peter, I recently reported this to jQuery maintainers, but they politely told me... well... to kick rocks. Would be good, if you could badger them about this a bit, too.
Currently jquery absolutely requires window object, so it won't work on Node.js as a dependency. (with one exception: if you don't need a global jquery object, but just a local instance in one module, you can manually initialise it with JSDom, but that's probably not your use case)
Your way around this whole problem is that you don't actually have to import jQuery or its plugins on server side. So my approach was to create 2 separate entry point files - app.jsx and server.jsx - for client bundle and server-side bundle respectively and Layout.jsx as a shared root component.
app.jsx and server.jsx are entry points for client-side bundle and server-side bundle respectively, while Layout.jsx contains shared code with html.
I import jquery only in app.jsx bundle, so on client side it is present. On server side it is never imported and not included in server bundle.
You can take a look at my blog's code, how I set up Webpack in it and how do server rendering.
I am new to React Native, I'm following a video tutorial for beginners. I'm developing on windows 10 and using React Native version 0.49.1 . In the tutorial I'm following there are two index files: index.android.js & index.ios.js.
As I understand those file are untied now to index.js file,
I got it from this question that was asked.
Nevertheless, I still want to work with two separate index files, but I don't know how to do so - do I have to delete App.js file and index.js files?
And if so, what should be the content of index.android.js & ios files?
I would appreciate an explanation or a quick guide on how to do it.
Thanks in advance :)
For projects created with react-native init, an index.js file is still generated, and looks something like this initially:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('YourProjectName', () => App);
Manually adding App.ios.js and App.android.js in the same directory will allow you to include unique code for each platform, as it follows the pattern for platform-specific extensions. However, it won't be enough to have either one or the other. You need to include both otherwise the code splitting won't take effect (and will default to whatever is present in App.js).
So to answer your question, yes you need to delete App.js and replace it with android.App.js and ios.App.js. Then restart the React Native packager terminal window for your simulator or device to detect the change.