Newly created next app won't run

[kpldvnpne]

Version

0.1.10

Platform

Linux Laptop-PC 5.10.102.1-microsoft-standard-WSL2 #1 SMP Wed Mar 2 00:30:59 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

What steps will reproduce the bug?

Follow the instructions from README.md's Using bun with Next.js:

bun create next ./app
cd app
bun dev # start dev server

How often does it reproduce? Is there a required condition?

How often does it reproduce? Always Is there a required condition? As far as I know, no. However, I have only tried creating the next app within WSL's ubuntu distro.

What is the expected behavior?

Visiting https://localhost:3000 should show a newly created NextJS app.

What do you see instead?

I see This site can't be reached error:

Additional information

This is the output in console:

[0.06ms] "node_modules.bun" - 74 modules, 6 packages
[8.00ms] bun!! v0.1.10 (fe7180bc)


  Link: http://localhost:3000


[3.19ms] "node_modules.server.bun" - 48 modules, 6 packages
Possibly incompatible Next.js version:  12.2.3 . Please upgrade to Next.js 11.1.2 or Next.js 12.0.2+.

[117.91ms] Next.js ready! (powered by bun)
[158.68ms] / - 2 transpiled, 4 imports

[kpldvnpne]

I have to mention that the other issues like #755 and #723 focus on bun dev not working on existing NextJS projects. This issue is to draw attention that it's also not working on newly created NextJS projects.

[Jarred-Sumner]

hm if you try

bun dev --origin=http://localhsot:3001 --port=3001 does it by chance work? Wondering if there's an issue with port 3000.

[kpldvnpne]

Unfortunately, it didn't work.

Also, to really know if there is an issue with the port, I have created a new NextJS app using the command npx create-next-app@latest and it worked flawlessly. So, it seems that the problem is localized to Bun.

[Temez1]

Having a similar problem, WSL2 also bun -v 0.1.11

bun dev didn't work for my project (bun+trpc). Same "error" as above, can't reach the page.

So I tried to create a blank project bun c blank, copy-pasted the

export default {
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
};

but this time instead of crashing it renders

import {
__HMRClient as Bun
} from "http://localhost:3000/bun:wrap";
Bun.activate(false);
import {
__HMRModule as HMR
} from "http://localhost:3000/bun:wrap";
var hmr = new HMR(1891995559, "src/index.js"), exports = hmr.exports;
(hmr._load = function() {
  var src_default = {
    port: 3000,
    fetch() {
      return new Response("Welcome to Bun!");
    }
  };
  hmr.exportAll({
    default: () => src_default
  });
})();
var $$hmr_default = hmr.exports.default;
hmr._update = function(exports) {
  $$hmr_default = exports.default;
};

export {
  $$hmr_default as default
};

//# sourceMappingURL=http://localhost:3000/.map

Hopefully, this helps.

[KyorCode]

Same issue, fresh nextJs app and it won't load the stylesheets. It will also try to load the index.entry.tsx...

[KyorCode]

hm if you try

bun dev --origin=http://localhsot:3001 --port=3001 does it by chance work? Wondering if there's an issue with port 3000.

This actually fixed it for me. I had an other app running on port 3000 and I noticed that the next js app is trying to load the files from port 3000 instead of the newly used port determined by next/bun itself ( in my case 3002 ).

So possible solution is to use relative pathing for the output of your head sources or if bun/next changes the used port, it should be reflected in the output as wel.

you could use bunfig.toml to reflect the new port settings:

framework = "next"
port=4040
origin="http://localhost:4040"

[Electroid]

bun dev was changed in Bun v1.0, it will now run the "dev" script in your package.json. Because of that, this issue is no longer applicable.