Redwood v0.31.0

Announcements Releases and Upgrade Guides
1

v0.31.0 Highlights :tada:

:1st_place_medal: All generators now support typescript

We’re working hard to have full typescript support for 1.0, and this release we’re making it a lot easier for the TS crowd. All Redwood generators now generate typescript — and it even auto-detects if your Redwood project is in TypeScript

:closed_lock_with_key: Built in support for verifiying webhooks

Do you wince whenever you realise you have to actually verify the webhooks your application receives? Fear not, this release Redwood brings you built-in support for checking the webhook signatures, including a plethora of common verification methods — SHA256, JWT, among others.

:package: New deploy provider Render

It’s now super easy to setup a “serverful” deployment, with a database included, thanks to our friends at Render. In typical Redwood fashion, of course, it’s one CLI command to get everything setup.

Fixed

Added

Changed

Dependabot updates
  • Bump @reach/skip-nav from 0.13.2 to 0.15.0 (#2237) 61e0f8e dependabot[bot]
  • Bump core-js from 3.6.5 to 3.10.1 (#2243) 3e0e1eb dependabot[bot]
  • Bump react-refresh from 0.9.0 to 0.10.0 (#2195) 5ce8336 dependabot[bot]
  • Bump mini-css-extract-plugin from 1.3.9 to 1.4.1 (#2240) a0aece0 dependabot[bot]
  • Bump esbuild from 0.9.0 to 0.11.6 (#2241) 1ded37e dependabot[bot]
  • Bump @testing-library/user-event from 12.5.0 to 13.1.2 (#2254) 2722a6c dependabot[bot]
  • Bump prompts from 2.4.0 to 2.4.1 (#2194) 42cb13b dependabot[bot]
  • Bump firebase-admin from 9.5.0 to 9.6.0 (#2185) f98a206 dependabot[bot]
  • Bump @testing-library/user-event from 12.5.0 to 13.1.1 (#2196) b74640f dependabot[bot]
  • Bump eslint-plugin-jest-dom from 3.6.5 to 3.7.0 (#2184) 5c98e1e dependabot[bot]

Breaking :warning:

Surprise! Nothing to see here. If you’ve been keeping up with upgrades for a while, you’ve earned yourself a treat :icecream:

But we have changed the flags on the generator cli. Take a look with yarn redwood generate --help

How to Upgrade

Code Modifications

If you created your project at Redwood v0.30.0, you are most likely missing .gitignore in the root directory. Create the file and copy the contents from this reference template/.gitignore

Upgrade Packages to v0.31 from v0.30.x

Run the following command within your App’s directory:

yarn redwood upgrade

Ensure yarn has installed everything correctly by running

yarn install --force

Upgrading from an earlier version?

Skipping versions when upgrading is not recommended and will likely cause problems. Please follow the “how to upgrade” sections for each newer version here :point_right: Releases · redwoodjs/redwood · GitHub

Upgrading to a version that is not the latest?

The command yarn rw upgrade will always upgrade to the latest (i.e. most recent) Redwood version. If you need to upgrade incrementally to a earlier, specific release, use the --tag option. For example, if you need to upgrade from v0.27.0 to v0.28.4, run the following command:

yarn redwood upgrade --tag 0.28.4

Need help or having trouble upgrading packages?

See this forum topic for manual upgrade instructions and general upgrade help.

Redwood Releases on GitHub

You can see all Redwood release notes and version history on GitHub

3 Likes
2

Got the following error after upgrading from 0.30 to 0.31

api |
api | TypeError: [BABEL] /home/tharshan/Projects/uservitals/api/src/functions/admin-report-email-task-daily.js: _interopRequireDefault is not a function (While processing: "/home/tharshan/Projects/uservitals/node_modules/@redwoodjs/core/config/babel-preset.js")
api |
api |
api | 1 anonymous
api |   /home/tharshan/Projects/uservitals/node_modules/@redwoodjs/core/dist/babelPlugins/babel-plugin-redwood-directory-named-import.js:13
api |
api | 2 Module._compile
api |   /home/tharshan/Projects/uservitals/node_modules/pirates/lib/index.js:99
api |
api | 3 Object.newLoader [as .js]
api |   /home/tharshan/Projects/uservitals/node_modules/pirates/lib/index.js:104
api |
api | 4 module.exports
api |   /home/tharshan/Projects/uservitals/node_modules/@redwoodjs/core/config/babel-preset.js:38
api |
^C

Here is the function in question

import { db } from 'src/lib/db'
import { sendEmailWithTemplate } from 'src/lib/postmark'
import { adminReportEmail } from 'src/services/teams/team'
import { logger } from 'src/lib/logger'

export const handler = async (event, context) => {
  const admins = await db.user.findMany({
    where: {
      role: 'ADMIN',
    },
  })
  logger.debug(`Invoke admin report email task`)
  await Promise.allSettled(
    admins.map(async (admin) => {
      logger.debug({ adminReportSchedule: admin.adminReportSchedule, email: admin.email }, `Looping through all admins`)
      if (admin.adminReportSchedule == 'DAILY') {
        const payload = await adminReportEmail({ userId: admin.id })
        logger.debug(`Sending admin email to ${admin.email} with payload`)
        await sendEmailWithTemplate({
          From: '',
          To: admin.email,
          TemplateAlias: 'admin-activity-report',
          TemplateModel: payload,
        })
      }
    })
  )
}
3

@viperfx

You might try:

yarn install --force

and optionally deleting your app’s node_modules as well as yarn.lock.

I upgraded two apps earlier today w/out seeing this issue – but I have had to yarn install --force in certain cases before.

4

Okay! Still same error using yarn --force, but after removing node_modules and yarn.lock, and doing a yarn install - then its now working! But now getting another error when launching my app

./src/firebase.custom.authClient.ts 41:163
Module parse failed: Unexpected token (41:163)
File was processed with these loaders:
 * ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       var _client$auth$currentU;
| 
>       return ((_client$auth$currentU = client.auth().currentUser) === null || _client$auth$currentU === void 0 ? void 0 : _client$auth$currentU.getIdToken(true)) ?? null;
|     },
|     getUserMetadata: async () => client.auth().currentUser
5

Did the version of your Firebase auth package increment when you did a new yarn?

Perhaps there is an issue with the latest?

firebase - npm saw some upgrades in 8.x.x a few days ago.

6

Nope - my firebase has been pinned to 8.1.2 (on the client)

8

Hi All :wave:

Small patch released for v0.31. Latest version is now v0.31.2

Patch release with the following fixes:

Tip :point_down:

If you’re deploying to Heroku, or using Heroku buildpacks to self host, they have recently upgraded their environment to use Node 16, which is incompatible with Prisma 2.21.x

You can set the version of node to use by changing your package.json like this:

-    "node": ">=14",
+    "node": "14.x",
     "yarn": ">=1.15"
   },
1 Like
9

Thanks for the release! I love the progress.
However, I seem to be experiencing a firebase authentication issue (different than viperfx experienced above). I recently switched over to firebase authentication, and am still learning the ropes of it, but I had some core stuff working in Redwood 0.31 which broke in 0.31.2. I can’t seem to get the currentUser information on the API side now. context.currentUser is null, even when logged in.

I rolled back the auth package to 0.31.0 and it works again. I re-upgraded the auth package to 0.30.2 and it fails. Note, that the firebase packages appear to be the same through all this.

I noticed the following in @redwoodjs/auth/package.json

“version”: “0.30.2-canary.42+76fb8141”

Do we have some versioning issues? As I have time, I’ll keep hunting, but I figured I’d post in case someone else is experiencing the same thing.

Thanks!

10

Hey Curtis, I’ve been running into context.currentUser being null on my API-side as well. I’m using Supabase (technically, custom) for auth. My web-side has no problem getting the currentUser.

However, I don’t think mine was working on 0.31.0; I’ll have to check now that I read your message.

I’m in the same boat now, though: testing to make sure it’s not an issue with something I’m doing.

11

Hi @cjReimer, thanks for a great bug report. I’ve checked and it does seem that some of the packages had not been published correctly to npm.

Update 2021-05-04T20:15:00Z: Packages now correctly published to npm

12

Update 2021-05-04T20:15:00Z
Issue now resolved, latest versions of web, testing, router and prerender have now been published to npm.

We’ve been trying a new release process, that hasn’t quite worked out :see_no_evil:. Thank you all for reporting!

13

Looks good! Thanks for the quick fix @danny !

1 Like
14

I am getting some odd errors after upgrading to 0.31.2. Apologies for the lengthy code blob (and the multiple posts but apparently there is 32,000 word cap which I exceeded by almost 10,000). There was a lot of red on my latest Netlify build…

The main issue seems to be TypeError: Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got "JSXExpressionContainer" src/pages/AboutPage/AboutPage.js and then it causes a cascade of other errors… There were no errors and everything was loading fine right before the upgrade.

To be continued…

15

The build errors on Netlify are HUGE. Over 33,000 words… So, rather than post it all here I will just leave a link.
:grimacing: :grimacing:

I tried deleting node_modules and yarn.lock and running yarn install. After the fresh install yarn rw dev returned this (and did not fix the error):

api | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
api | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
api | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
api | to the "plugins" section of your Babel config.
api | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
api | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
api | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
api | to the "plugins" section of your Babel config.
api | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
api | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
api | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
api | to the "plugins" section of your Babel config.
api | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
api | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
api | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
api | to the "plugins" section of your Babel config.
api | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
api | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
api | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
api | to the "plugins" section of your Babel config.
api | Done. Took 3006ms.
api | POST /graphql 200 32.495 ms - 23073
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.
api | POST /graphql 200 12.801 ms - 23073
api | POST /graphql 200 9.278 ms - 23073
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.
api | POST /graphql 200 4.853 ms - 23073
api | POST /graphql 200 5.482 ms - 23073
api | POST /graphql 200 2.932 ms - 23073
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.
web | Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
web | The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
web | 	["@babel/plugin-proposal-private-methods", { "loose": true }]
web | to the "plugins" section of your Babel config.

When I first attempted to update to 0.31.2 (from 0.30.1) I got this error: error Outdated lockfile. Please run yarn install and try again. So, I ran yarn install --force then yarn rw upgrade Not sure if maybe my outdated lock file caused the issues…

I am more than happy to provide any further information needed. Just let me know if I can help. Again sorry for the lengthy post…

16

Uh oh we broke Netlify

17

Hey @IsaacT8, I also ran into this error after recently upgrading, and this issue helped me out: Unable to read certain svg file · Issue #76 · airbnb/babel-plugin-inline-react-svg · GitHub. In my case I had a bunch of SVGs that had style:enable-background, after removing it the build errors went away. Hopefully that helps!

2 Likes
18

I didn’t get this exact error, but I got the massive wall-of-text you did after having to upgrade my project to do a PR for RW.

alecortega’s solution didn’t work for me, I couldn’t find any instances of that attribute in my or the projects I control’s source/node_modules.

What did work, to remove the messages, was adding loose: true to the “@ babel/preset-env” configuration found in node_modules/@redwoodjs/core/config/babel-preset.js. I had to add them to each side’s “override”, likely so the sides wouldn’t overwrite it themselves.

I’m incredibly doubtful this is the permanent solution. But what do I know, hope it helps x2.

1 Like
19

Interesting, as someone who hasn’t had to dig into Babel too frequently I wasn’t familiar with this and consulted the docs. They point to a blog post by Dr. Axel Rauschmayer. Looks like it may be a discrepancy around the use of Object.defineProperty in ES5 vs ES6?

Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics. Many plugins in Babel have two modes:

  • A normal mode follows the semantics of ECMAScript 6 as closely as possible.
  • A loose mode produces simpler ES5 code.

Normally, it is recommended to not use loose mode. The pros and cons are:

  • Pros: The generated code is potentially faster and more compatible with older engines. It also tends to be cleaner, more “ES5-style”.
  • Con: You risk getting problems later on, when you switch from transpiled ES6 to native ES6. That is rarely a risk worth taking.

In normal mode, the prototype methods of the class are added via Object.defineProperty (line A), to ensure that they are non-enumerable, as required by the ES6 spec.

In loose mode, normal assignment is used to add methods (line A). This style is more like you’d hand-write code in ES5.

Babel’s documentation suggests migrating to the top level assumptions available since Babel 7.13.

By default Babel tries to compile your code so that it matches the native behavior as closely as possible. However, this sometimes means generating more output code, or slower output code, just to support some edge cases you don’t care about.

Since Babel 7.13.0, you can specify an assumptions option in your configuration to tell Babel which assumptions it can make about your code, to better optimize the compilation result. Note: this replaces the various loose options in plugins in favor of top-level options that can apply to multiple plugins (RFC link).

1 Like
20

Thank you for the suggestion. I do have an SVG on both my About and Home page. I am using TailwindCSS though so my code looks like this:

<div className="h-screen flex flex-wrap justify-center content-center bg-indigo-100 js-show-on-scroll">
        <Logo />
 </div>

I removed the entire div and refreshed localhost but the error was still present…

Thanks again for the suggestion :smiley:

21

Thank you @realStandal I checked out the file on the path you suggested. At line 23 was the only instance of loose: true:

['@babel/plugin-proposal-class-properties', { loose: true }],

There were two instances of @babel/preset-env in web & api that looked like this:

 overrides: [
      // ** API **
      {
        test: './api/',
        presets: [
          [
            '@babel/preset-env',
            {
              targets: {
                node: TARGETS_NODE,
              },
              useBuiltIns: 'usage',
              corejs: {
                version: CORE_JS_VERSION,
                // List of supported proposals: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#ecmascript-proposals
                proposals: true,
              },
            },
          ],

I have little experience with babel (other than blindly using it :laughing:) so I am unsure where to add loose: true…So, I added it below proposals: true, on both API and Web but I still got all the same errors. Did I put it in the wrong place or as you suggested perhaps this is not the permanent solution?