Skip to main content

Troubleshooting

My project was working before, and now it isn’t​

You might see a message saying you need to upgrade your MightyMeld npm package. Occasionally we make changes that require a newer version of the package. To upgrade:

npm install -g mightymeld@latest

I cannot select elements​

To work correctly, MightyMeld needs to know where rendered JSX elements come from in your source code. React provides us with file names, and line and column numbers, but sometimes this information is missing in incorrect.

Next.js React Server Components (RSC)​

Many Next.js apps render components on the server. In this case, information about where in your code JSX elements are in your source code are not available. The solution for this problem is to install a plugin that will add the source locations in a way that works more reliably. See our plugin installation guide.

Next.js: only some elements cannot be selected​

  1. If you are using Next.js with SWC on a version lower than 14.0.2, we recommend upgrading to that version or higher. Next.js versions older than 14.0.2 have a bug where the source locations are missing in some cases. The bug was fixed in SWC 1.3.96 which made its way to Next.js in 14.0.2. This issue does not affect Next.js apps that use Babel (for example if you have a .babelrc file).

Check your includes/excludes​

Make sure to check that the elements you are trying to select are in a file that is covered by the include setting. Files that are not included will be ignored by MightyMeld.

I don’t see Tailwind autocomplete in studio​

Tailwind Studio mode has the following requirements:

  • The tailwindcss package must be installed in your project (even if your project loads Tailwind via CDN).
  • Your mightymeld.json file must have the tailwind property set to true.

Try running npx mightymeld tailwind to automate the above.

Also be aware that autocomplete only works on the className attribute.

I cannot sign in to my app​

Some authentication providers are tied to the particular port the app runs on. So for example, if your provider expects your app to be running on port 3000, but in MightyMeld it is running on port 3001 via our proxy, then your authentication provider might refuse to work.

You can solve this by configuring your app to run on a new, unused port just when you are using MightyMeld, so that MightyMeld can use the port your authentication provider expects. Here’s how.

  1. Add a new script to your package.json file that tells your app to run on unused port:
package.json
{
  …
  "scripts": {
    "dev": "next dev",
    "dev:mm": "next dev --port 2999"
    …
  }
  …
}
note

Vite will also accept --port, but you should consult the documentation for other frameworks.

  1. Update your mightymeld.json file to use the new port:
{
  "run": "npm run dev:mm",
  "port": 3000, // Should match the port your authentication provider expects.
  "web_server_url": "http://localhost:2999" // Should match the port from step 1.
  …
}

MightyMeld isn’t talking to my app​

When the "trying to connect" message doesn't disappear within a few seconds of your app appearing, use this checklist to get things working.

I see a blank white page where my app should be​

Your app might be blocked by your browser. Especially if you are using Safari, you might not see the usual warning message but you should still follow the checklist here.

Error occurred while trying to proxy: localhost​

If your web_server_url is http://localhost:3000, MightyMeld will try to proxy your project by using the address localhost. In some situations that address will resolve to ::1 (an IPv6 address) when your server is bound to 127.0.0.1.

You can fix this with the web_server_ip setting or the --web-server-ip command line option.

{
  "run": "npm run dev",
  "include": ["src"],
  "web_server_url": "http://localhost:3000",
  "web_server_ip": "127.0.0.1",
  "tailwind": true
}

Error: spawn UNKNOWN appears in the terminal​

MightyMeld uses Node's built-in spawn command to launch your app and execute other processes such as git commands. If spawn can't launch processes, this error appears.

There are many potential causes for this error. Anti-virus software, broken Node.js installations, and other factors can lead to this error. Please search online for posts such as this one to resolve this issue with your system.

Cannot find module @babel/types​

You might see an error like this:

Error: [BABEL]: Cannot find module '@babel/types'

You can fix this by installing the missing module:

npm install --save-dev @babel/types

SyntaxError: Unexpected token import​

If you get an error about your app using an import statement only when MightyMeld is running your app, you might need to exclude the file mentioned by the error.

mightymeld.json
  "exclude": ["src/file-mentioned-in-error.js"],

Autocomplete doesn't work​

This may happen if MightyMeld Studio cannot establish a connection to the box your web app is running on. If you are not running your app on localhost, use the local_domain option to point MightyMeld to the right location.