NextJS planetScale Module not found: Can't resolve 'net', 'tls' and 'fs'

[DanielOberlechner]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

https://github.com/mysqljs/mysql/issues/1563 Here is the problem already defined, and the people say its because of a wrong configured webpack configuration.

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I try to access the database and load the localhost website it spits out the title error.

Expected Behavior

It should connect to the database without any errors.

Link to reproduction

https://docs.planetscale.com/tutorials/connect-nodejs-app

To Reproduce

Simply follow the instructions of the link. I did not use express but I use nextjs as server.

The solution would be to add the following changes to the webpack configuration:

node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
  },

[chrisweb]

@DanielOberlechner there are many duplicate tickets for this problem already, like: https://github.com/vercel/next.js/issues/7755

you are probably using getInitialProps, here is what the nextjs getInitialProps documentation page says:

If you are using server-side only modules inside getInitialProps, make sure to import them properly, otherwise it'll slow down your app

so yes what you suggest is how you fix the problem, but this is not a nextjs "bug" and nextjs won't exclude the server modules for you, you need to do it yourself on a per module basis

Another good article about this "problem" can be found here: https://jasonwatmore.com/post/2021/07/30/next-js-webpack-fix-for-modulenotfounderror-module-not-found-error-cant-resolve

if you want modules to be excluded automatically you may want to have a look at getServerSideProps, because the nextjs getServerSideProps documentation says the following:

You can import modules in top-level scope for use in getServerSideProps. Imports used will not be bundled for the client-side. This means you can write server-side code directly in getServerSideProps, including fetching data from your database

If you switch from getInitialProps to getServerSideProps in your code for the reason mentioned above, you should also note that there is another major difference which is that with getInitialProps: "For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating", but getServerSideProps will only run on the server side

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.