Error switching to vite

Get Help and Help Others
1

Hello Redwood family!

I have been happily building away on a redwood app for about 6 months now. Things have gone pretty smoothly and I have kept an eye on upcoming changes. To try to prep for v6 to be released I recently tried setting up my app to use vite by running yarn rw setup vite

The yarn rw dev command seems to work great and is very snappy (yay!)

I am getting errors with testing and with running a built app.

testing

For testing, I am getting jest ESmodule errors like the following

  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/sglyon/src/jupyteach/jupyteach-rw/node_modules/@jupyterlab/nbformat/lib/index.js:10
    import { JSONExt } from '@lumino/coreutils';

I saw this with webpack and created a custom web/jest.config.js file to handle it

❯ cat web/jest.config.js
// More info at https://redwoodjs.com/docs/project-configuration-dev-test-build

const esModules = [
  'react-dnd',
  'dnd-core',
  '@react-dnd',
  '@lumino/coreutils',
  '@jupyterlab/nbformat',
].join('|')

const config = {
  rootDir: '../',
  preset: '@redwoodjs/testing/config/jest/web',
  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
  transform: {
    [`(${esModules}).+\\.[tj]sx?$`]: [
      'babel-jest',
      { presets: ['@nrwl/react/babel'] },
    ],
  },
}

module.exports = config

It worked great with webpack, but seems to not work under vite

Running built app

Then when I run the built app I get a blank page and the following error in browser dev tools:

index-50f510f8.js:317 Uncaught ReferenceError: require is not defined
    at index-50f510f8.js:317:29232

It seems like something isn’t being bundled properly for the web.

You can see for yourself here: https://jupyteach-staging.fly.dev/

I am new to vite and have not done any vite-specific config since running the yarn rw setup vite command.

Any suggestions on how to resolve either of these things?

Thanks

2

Pretty sure the runtime error for built package is resolved with this codemod: Redwood v6.0.0 RC is now available

(read the docs! :man_facepalming:)

Would still love some tips on the test error though!

3

Hey @sglyon, awesome to hear that you’ve been using Redwood! Mind sharing what your test looks like, or the page being tested? What are you importing from @jupyterlab/nbformat or from @lumino/coreutils?

I tried setting up a minimal example using react-dnd because I know it’s an ES module and know how to use it in an application, and the test passed. Here’s a short video and repo demonstrating:

4

Hey @dom thanks for the super helpful response. I will be out of the office for the rest of this week, but will get back at this on Monday and let you know what find.

Thanks!

1 Like
5

Hey @dom thanks again for the help here

I was able to resolve this by doing an import type from @jupyterlab/nbformat and copy/paste a simple function definition from another package.

The dnd stuff worked great – Thanks!

1 Like