No longer runs with updated dependencies

[chelseybaker]

Hello! I've been trying for a couple of days to add Cypress to my Storybook stories, and I've come to the conclusion that this may no longer work without the specific version of dependencies in the yarn.lock.

I came from the blog post

When I update the dependencies in this project, I get this error on MyInput.test.tsx

./cypress/support/index.js
Module not found: Error: You attempted to import ../../.storybook/preview which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
 @ ./cypress/support/index.js 16:0-54 17:16-25
 @ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js
 @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js

I can fix this by creating a symlink in my package.json as the following

"dependencies": {
  // ...existing dependencies
  "storybook-preview-js": "file:.storybook/preview.js",
}

and then running npm install to create the symlinnk, and then updating the cypress/support/index.js to instead import the preview.js like this

import { setGlobalConfig } from "@storybook/testing-react";
import * as sbPreview from "storybook-preview-js";

setGlobalConfig(sbPreview);

However this is where I get stuck. I cannot seem to get around the following error. It seems to have something to do with babel, webpack, and/or react-scripts, but I'm at a loss for a solution. Really hoping someone can find one (or at least by opening an issue I can alert anyone else trying to do this)

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path-to-app/my-app/.storybook/preview.js: Support for the experimental syntax 'jsx' isn't currently enabled (5:5):

We've started using Cypress for some testing but we have a very large collection of stories for our app, so I'd love to be able to reuse all those states with Cypress. If anyone can help, that would be awesome!

[elevatebart]

Hello @chelseybaker

Sorry for this oops. The system we have for CRA integration is a little fragile.

CRA is a little bit of a brat with limiting the compilation to folders within the src directory.
I believe the team meant well and got carried away in their opinions.

I will try and investigate this tonight or tomorrow.

Thank you for bringing this to our attention.

[chelseybaker]

Hey @elevatebart! No worries at all!

Thanks for taking the time to look into it, even if the conclusion is it's no longer feasible, I really appreciate it!

[elevatebart]

I did the update... I believe I was doing things wrong in the first place. check it out ;-)

[chelseybaker]

Awesome, thanks so much @elevatebart! I pulled down your changes and everything works with the updated dependencies. 🤞 I'll be able to integrate in my project, now. I super appreciate your time!!