Hey I have libA with …

Hey, I have libA with Storybook. From one of the components of this libA I’m trying to import an SVG I have in libB.

But I’m getting this error after I run nx run components:storybook and Webpack starts building:

Module not found: Error: Can't resolve '@myscope/icons/icon-download.svg' in '/Users/w.ghelfi/dev/ui/libs/components/src/lib/button' Both libs are publishable.

any hints? :confused:

Responses:

https://github.com/nrwl/nx/issues/2320 - I’m following this issue and also looking forward to it :slightly_smiling_face:

I had this issue yesterday. Revert the change and regenerate fixed the issue

let me know if you come across a workaround as I’d be curious. what do you mean by regenerate? Is that an angular specific thing (I’m running react)?

I had to add this to webpackFinal in Storybook’s main.js: // Workaround for <https://github.com/nrwl/nx/issues/2320> config.resolve.alias['@myScope/icons'] = path.resolve(__dirname, '../../icons/src/lib/'); and I also had to modify the autogenerated paths entry in the root tsconfig.json: "@myScope/icons/*": ["libs/icons/src/lib/*"]

Then, to actually make SVGR work in Storybook:

``` // Disable default handling of SVGs const svgRuleIndex = config.module.rules.findIndex(rule => { const { test } = rule;

  return test.toString().startsWith('/\\.(svg|ico');
});
config.module.rules[svgRuleIndex].test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;

// Add same SVGR configuration as main Nx
// See: <https://github.com/jaysoo/nx/blob/20885513ae4fe4f03a64bb738d4816d8ed7c77c6/packages/react/plugins/webpack.ts>
config.module.rules.push(
  {
    test: /\.(png|jpe?g|gif|webp)$/,
    loader: 'url-loader',
    options: {
      limit: 10000, // 10kB
      name: '[name].[hash:7].[ext]',
    },
  },
  {
    test: /\.svg$/,
    oneOf: [
      // If coming from JS/TS file, then transform into React component using SVGR.
      {
        issuer: {
          test: /\.[jtm][sd]x?$/,
        },
        use: [
          '@svgr/webpack?-svgo,+titleProp,+ref![path]',
          {
            loader: 'url-loader',
            options: {
              limit: 10000, // 10kB
              name: '[name].[hash:7].[ext]',
            },
          },
        ],
      },
      // Fallback to plain URL loader.
      {
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000, // 10kB
              name: '[name].[hash:7].[ext]',
            },
          },
        ],
      },
    ],
  },
);```