Blitz: Fix `@prisma/client` being included in the client side bundle during development

[flybayer]

The current core and first-demo code runs in production on Zeit now, but it fails during local development:

Failed to compile

/Users/b/c/blitz/node_modules/@prisma/client/runtime/index.js
Module not found: Can't resolve 'child_process' in '/Users/b/c/blitz/node_modules/@prisma/client/runtime'

• Prisma docs on what @prisma/client is and how it works
• A blog post describing what's happening here

This issue is up for grabs!

[toddgeist]

is there going to be a next.config.js in the root of core?

This looks like a fix - https://github.com/zeit/next.js/issues/2069#issuecomment-578267894

[toddgeist]

nevermind - I see what the plan is

[flybayer]

I think Blitz will provide a next.config.js wrapper

[toddgeist]

you already have a next.config.js in the example.

[toddgeist]

I'll take a shot at this.

[toddgeist]

I have some work to do to get up to speed though. haven't used TypeScript in a while, and postgres in years....

So if anyone else wants this issue, have at it. :-)

[flybayer]

You can switch to sqlite. Change to this in prisma/schema.prisma

datasource db {
  provider = "sqlite" // other options are: "mysql" and "sqlite"
  url = "file:./dev.db"
}

[jimthedev]

I have a PR for this incoming.

[flybayer]

@jimthedev yay, thank you!!

[jimthedev]

Ok a couple of things. The webpack docs indicate you should be able to just use

if (!isServer) {
      config.resolve.alias['@prisma/client'] = false
}

Unfortunately the version of webpack being used seems to want a string and will not accept false. It seems that perhaps in the future the right approach may be to use false but that won't work for now.

I also looked into the approach using the IgnorePlugin but was getting some strange errors where webpack was putting a ! into the code for the frontend and saying it could not find the modules '@prisma/client` so in that case it seems that it properly ignored the module but that resulted in an error since we aren't providing the module by other means.

So what can we do? As the article @flybayer mentioned we can resolve to a noop file (an empty file) and everything works well. Effectively it operates as a noop until webpack supports the false value. Happy to have others try to confirm but wanted to share what I'd found.

[flybayer]

I just posted in the Prisma slack. We'll see what they say.