[Bug] build storybook failed with library type:module

[YOEL311]

Describe the bug

I have written the library to be used in my company
the library works as well in my react-native app

it also works without any problem in the react-native storybook app,
but when I built an app for the storybook web app the build failed with this error

ModuleNotFoundError: Module not found: Error: Can't resolve './button' in '/Users/#####/node_modules/###/components/lib/src/components'
Did you mean 'index.js'?
BREAKING CHANGE: The request './button' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').

the library import with this Syntax

export * from './button';
or
import ButtonCore from './core';

but the web app needs

export * from './button.js';
or
import ButtonCore from './core.js';

how I can resolve this error without rewriting all library

[dannyhw]

This seems like a classic esm vs commonjs issue but what version of storybook are you running?

If those errors are from ts there are also rules you can add to typescript which allow you to import without the js extension.

[YOEL311]

hey @dannyhw
thanks for your response

my storybook version is 6

in my project that works (import without the js extension)
it works only from my package in the ReactNative app
It happens only in web app

attached my package.json file

{
  "name": "CoreStorybook",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "update-stories": "sb-rn-get-stories --config-path .ondevice",
    "prestart": "yarn update-stories",
    "storybook-watcher": "sb-rn-watcher --config-path .ondevice",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
    "@----/components": "0.0.34",                           //<the component is from this package
    "@---/theme": "1.0.98",
    "@react-native-async-storage/async-storage": "^1.17.3",
    "@react-native-community/datetimepicker": "^6.7.1",
    "@react-native-community/slider": "4.3.3",
    "@react-native-cookies/cookies": "6.2.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.71.4",
    "react-native-gesture-handler": "2.13.4",
    "react-native-linear-gradient": "2.8.3",
    "react-native-reanimated": "2.17.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-svg": "14.0.0",
    "react-native-web": "0.18.10",
    "react-native-web-linear-gradient": "1.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native/eslint-config": "^0.72.1",
    "@react-native/metro-config": "0.73.2",
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-controls": "^6.5.14",
    "@storybook/addon-essentials": "^6.5.14",
    "@storybook/addon-links": "^6.5.14",
    "@storybook/addon-ondevice-actions": "^6.5.1",
    "@storybook/addon-ondevice-backgrounds": "^6.5.1",
    "@storybook/addon-ondevice-controls": "^6.5.1",
    "@storybook/addon-ondevice-notes": "^6.5.1",
    "@storybook/addon-react-native-web": "^0.0.19",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/react": "^6.5.14",
    "@storybook/react-native": "^6.5.1",
    "@storybook/testing-library": "^0.0.13",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.70.6",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "^29.2.1",
    "babel-loader": "^8.2.4",
    "babel-plugin-react-docgen-typescript": "^1.5.1",
    "babel-plugin-react-native-web": "^0.18.10",
    "eslint": "^8.19.0",
    "eslint-import-resolver-custom-alias": "^1.3.2",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-justinanastos": "1.3.1",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.8",
    "prettier": "^2.4.1",
    "react-native-svg-transformer": "1.1.0",
    "react-test-renderer": "18.2.0",
    "storybook-react-context": "0.6.0",
    "typescript": "4.8.4"
  },
  "resolutions": {
    "@leumi/theme": "1.0.98",
    "react": "18.2.0",
    "react-devtools-core": "4.25.0",
    "react-native": "0.71.4",
    "react-native-safe-area-context": "4.4.1",
    "react-native-reanimated": "2.17.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

[dannyhw]

@YOEL311 are you able to make a minimal reproduction in a public repository? I've never really ran into this problem before so I'd have to look closer. Though its sounding like a configuration thing.

You could also try some of the solutions here storybookjs/storybook#11587

[YOEL311]

@dannyhw
I can`t because the library that I use is under a private npm registry

[dannyhw]

@YOEL311 you don't need to use that same library, just setup a project with ESM and see if it has the same issue.

[YOEL311]

@dannyhw
I will work on it
But it might take me some time

Thanks

But I can show it to you in a joint conversation
If you are interested of course

[dannyhw]

@YOEL311 sorry I'm travelling and working right now so my free time is kinda limited. Normally I would but for now I can't really take a call.

[YOEL311]

@dannyhw

ok
this is a public components library
https://github.com/YOEL311/componentsPublic
it also in npm
https://www.npmjs.com/package/test-package-yoel-test

use it in the project

https://github.com/YOEL311/storybookPublic/blob/87c367d2f55b1c7bc37e3a6be184312dcc9b9fd6/components/Buttons/ButtonLess.tsx#L2

this is the storyboard project

https://github.com/YOEL311/storybookPublic

Thanks

to reproduce issue
git clone https://github.com/YOEL311/storybookPublic
cd storybookPublic
yarn
yarn start //work on android or ios
yarn storybook //not work

[dannyhw]

Ok thanks I will take a look soon

[YOEL311]

I try to add the js extension as a manual
I made it in tag 35 in my library
you can see here

https://github.com/YOEL311/componentsPublic/releases/tag/v0.0.35

but now I got another error

ModuleParseError: Module parse failed: Unexpected token (5:4)
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
| function ButtonLess({ text, width }) {
|   return (
>     <ButtonCore {...{ width }} gradientColors={['red', 'green']}>
|       <>
|         <View style={{ marginRight: 10 }} />

I also tried to change the type of library to CommonJS in the package.json and tsconfig.jsonfiles but I got an error with 36 tag

commit
YOEL311/componentsPublic@6477bce
tag
https://github.com/YOEL311/componentsPublic/releases/tag/v0.0.36

ModuleParseError: Module parse failed: Unexpected token (7:12)
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
| const core_1 = tslib_1.__importDefault(require("./core"));
| function ButtonLess({ text, width }) {
>     return (<core_1.default {...{ width }} gradientColors={['red', 'green']}>
|       <>
|         <react_native_1.View style={{ marginRight: 10 }}/>
    at handleParseError (/Users/yoeln/LeumiProjects/storybookPublic/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:982:19)

[dannyhw]

That doesn't look like an issue with esm, its more likely that your componentsPublic isn't transpiled for web, you can add that package to be transpiled.

[dannyhw]

you also have three sets of config for addon-react-native-web, it should only appear once

like this

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-react-native-web',
      options: {
        modulesToAlias: {
          'react-native-linear-gradient': 'react-native-web-linear-gradient',
        },
        modulesToTranspile: ['react-native-reanimated', 'test-package-yoel-test'],
        babelPlugins: [
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-reanimated/plugin',
        ],
      },
    },
  ],

[dannyhw]

having a little bit of trouble getting esm working for you but I'm looking into it

[YOEL311]

@dannyhw
Hi, I solved it by adding Babel before publishing the package, it's strange that for react native it worked without it and you have to add it for the web

You can see the fix in this commit
YOEL311/componentsPublic@2a50faf
now it works on this version

"test-package-yoel-test": "0.0.42"

[dannyhw]

That's actually quite normal, metro will transpile everything whereas with webpack node modules are ignored in transpilation and must be explicity included.