Importing shared frontend/backend code into storybook. Unexpected character @, webpack issue

148 Views Asked by At

I have a yarn monorepo with 4 folders.

/frontend - frontend CRA app.
/ui-components - Storybook project, using storybook v6 and webpack5.
/backend - backend Node.JS express app.
/shared - shared code between frontend and backend.

/shared folder contains some models that use decorators, e.g

@Model('user')
class User {
  id: string;
}

I have added /shared code into storybook via link in /ui-components/package.json

  "dependencies": {
    "@lib/shared": "link:../shared",
    ...

But then when rendering and doing const user = new User() in that story I get following error:

nexpected error while loading ./stories/user-avatar.stories.tsx: Module parse failed: Unexpected character '@' (28:0)
File was processed with these loaders:
 * ../../../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| 
> @Model('user')

I've spent days on this and I am completely at loss here whether it's webpack5 or storybook issue.

0

There are 0 best solutions below