Module parse failed: The keyword 'interface' is reserved

[uncut yew]

I'm trying to import a typescript component via a published npm package.
I've created a storybook repo. When I import the published storybook package and run: pnpm run dev or pnpm run build I get the following error message:

Module parse failed: The keyword 'interface' is reserved (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import classes from './index.module.scss'
| 
> interface ButtonProps {
   ...
}

Versions:

• [email protected]
• [email protected] - using the Next.js Compiler rather than babel

I'm not sure if this is a storybook or nextjs issue, anyone have any ideas?

My next.config.js file looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: 'standalone',
  generateBuildId: async () => {
    if (process.env.BUILD_ID) {
      return process.env.BUILD_ID;
    } else {
      return `${new Date().getTime()}`;
    }
  },
  experimental: {
    appDir: true
  }
}
module.exports = nextConfig

[weak flicker]

Can you please run npx storybook@latest babelrc to generate a babel config file that Storybook can reference?

https://storybook.js.org/docs/angular/configure/babel#generate-a-babelrc

[uncut yew]

@weak flicker thanks for your response, I've just added a babelrc.json, looks like its made no impact. I wasn't sure babel was required as my consumer uses NextJS' compiler - is that not an option or NextJS projects? Any other ideas? Happy to share more code if helpful

what was installed:
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@\storybook/nextjs": "7.0.9", (and others)

[weak flicker]

my consumer uses NextJS' compiler - is that not an option or NextJS projects?

Storybook's dependency on babel is unfortunately quite tightly tethered. (We're working on improving that.) So even though your Next app uses SWC, Storybook still needs babel. The Next.js framework does its best to mimic the SWC config in babel.

At this point, I'll need to tag in a more knowledgeable maintainer, @small heath.

[small heath]

I assume that we don't transpile Typescript files from node_modules per default. Components from node_modules should rather come pre-transpiled and shouldn't have any Typescript types in them but generate a separate d.ts file instead. Can you tell me which npm package you are talking about?

[uncut yew]

Thanks for your help Kyle!

@small heath the NPM package I'm referring to is a boilerplate TS storybook nextjs that I've run pnpm build && pnpm publish on. It contains one new button, with a typescript interface (and a story).

So I suppose my question can be reduced to:
How can I publish and consume the react components created from a boilerplate storybook lib? The docs I've read largely refer to publishing storybook for serving the storybook app

[small heath]

Got it. I think this is something, which Storybook doesn't give guidance upon. There are several ways, how to publish React libraries and make them consumable properly. They can be bundled with rollup or tsup, which converts your components properly and make them accessible when used as a node packages.

Internally, we use https://github.com/egoist/tsup to bundle our dependencies. But you could also use rollup or anything else for the job. There are plenty ways of solving this problem.

[uncut yew]

Thanks for your response. It might be helpful to have some documentation/a blog on this, even if it's as simple as "Storybook doesn't give guidance on publishing bundles, but...".

I'm not using anything to bundle the dependencies at present, i'll investigate both of these suggestions, thanks!

[naive elm]

@verbal cradle did you came up with the solution?