Error on yarn rw web build

Get Help and Help Others
1

I recently did a livestream where I messed around a bit with Redwood. The code can be found here: GitHub - AryanJ-NYC/redwood-with-sanity-example: An example of how to use Redwood.js with Sanity.

Unfortunately, I’m unable to build the web side successfully. Does anyone have an idea where I messed up?

The error I get is:

Command failed with exit code 1: yarn webpack --config ../node_modules/@redwoodjs/core/config/webpack.production.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'optimization'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           optimization: ...
         }
       })
     ]
error Command failed with exit code 1.
$ /Users/aryanjabbari/Documents/practice/movie-list/node_modules/.bin/webpack --config ../node_modules/@redwoodjs/core/config/webpack.production.js
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Steps to reproduce:

  1. git clone https://github.com/AryanJ-NYC/redwood-with-sanity-example.git
  2. yarn install
  3. yarn rw build
2

Hi @AryanJ-NYC! Great to hear from you. And this is a cool project – I spent some time playing with this to see if I could get it working. I’m very interested in supporting applications using different combos of the architecture, e.g. API and Web with no DB. There are a few things going on here to sort out. I didn’t figure it all out, but I hope this helps with progress.

NOTE: I created a PR with steps to reproduce the topics below → ideas to handle no Prisma layer by thedavidprice · Pull Request #1 · AryanJ-NYC/redwood-with-sanity-example · GitHub

Remove Prisma (DB)

A part of the problem is that Prisma is not being used but the build expects to generate a client. In the PR above:

  • deleted Prisma directory
  • removed db.js and any related imports

Running the Dev Server

You’ll also need to specific there’s no DB when you run the dev server. To do so, just target API and Web:

  • yarn rw dev api web

Build

API Build

Unfortunately, when your build target includes API, it’s going to automatically assume Prisma is included and will try to generate the Prisma Client. I handled this in two ways:

  • Near-term: created a custom script, build:api in package.json to target API without generating Prisma Client. (Used the code from here).
  • Long-term solution: I opened this PR to only generate the Prisma Client if the directory api/prisma/exists. So in the next release you’ll be able to run yarn rw build api specifically.

Currently you can build the API with yarn build:api

NOTE: there’s also a new script yarn build that includes running yarn rw build web. But that’s the part that’s not working.

And there’s a current build:web that is a test targeting the “development” env. :warning:I just want to make sure you see that the script build does not include the script build:web.

Web Build

This is a peculiar one indeed. Looping in @peterp for some help on the Webpack side of things. Here’s what I do know.

  • The “development” Webpack settings work just fine for both dev-server and build → I tested this with manually building via NODE_ENV=development yarn babel src --out-dir dist. (Note: this is the custom script I created build:web in package.json.)
  • The “production” Webpack settings fail with the error message in the comment above. I tried to track down possible issues related to this line from the error output: configuration has an unknown property 'optimization'.

I tried overriding the “optimization”-specific config locally within the App but couldn’t get it to work (likely was doing something wrong).

More importantly, I have no idea why this setup (including Sanity) would have a conflict with how Webpack is handling chunks → unless there’s something in Sanity that’s fighting with Redwood base config… ?

Router Redirect?!?

Last thing → wait a minute, does the Redwood Router support page redirects (link to your Router.js) but not have anything about that in the Router docs?

I was just talking to Rob about this the other day. We’ll need to update the docs!

3

Haha @ “wait a minute, does the Redwood Router support page redirects…”

I had the saaaaaaaame reaction.

1 Like
4

Also, thanks for all the help. Just to be explicit, this isn’t a blocker by any means. I was just having some fun with Redwood and Sanity to build a toy app to see if I can get the two working together. It mostly worked until, well, deployment.

5

Ok, turns out the docs could use some help :rofl:

6

It may help developers learn GDD: guess driven development.

1 Like
7

Yeah, understood. Happy to help here. And being able to create and deploy an app without a DB is something we need to support. (And thought we did, mostly.)

Last thought --> you might show the related Redwood Webpack config to the Sanity folks and see if they have any ideas about whether or not there’s potential conflict.

Last last thought --> did you ever distribute that livestream? Somehow I missed it. Would :heart:if you wanted to post here in the Forums especially with and tips/guidance for others to get Sanity CMS working :rocket:

8

I’m very down to post. Is Show & Tell an appropriate place?

9

Hmm, I was thinking the “How To” with strong keywords in the title. But I didn’t go through the entire video – wasn’t sure if you were done with the implementation.

Up to you! :wink:Huge thanks either way.