Module parse failed external package

[adrianjacob]

I have storybook set up as a package in a monorepo. One of the other packages is a simple icon system which utilises SVGR CLI. This in turn outputs your 'usual' kind of ES6 code (see below)

index.js export { default as IcClose } from './IcClose' IcClose.js

import * as React from 'react'

function SvgIcClose(props) {
  return (
    <svg viewBox="0 0 24 24" {...props}>
      <g fill="none" fillRule="evenodd">
        <path d="M0 24h24V0H0z" />
        <path
          d="M13.432 12.02l5.302-5.285a1 1 0 10-1.412-1.416l-5.301 5.284-5.285-5.3A1 1 0 105.32 6.715l5.284 5.301-5.301 5.285a1 1 0 101.412 1.416l5.3-5.285 5.286 5.301a.995.995 0 00.708.294 1 1 0 00.708-1.706l-5.285-5.301z"
          fill="#6B6C72"
        />
      </g>
    </svg>
  )
}

export default SvgIcClose

This package is now being imported into /src/molecules/tooltip/tooltip.js into the storybook package as below

import { IcClose } from '@qbmds/icons'

Yet on build I get the following error:

ERROR in ./node_modules/@qbmds/icons/IcClose.js 5:4
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 SvgIcClose(props) {
|   return (
>     <svg viewBox="0 0 24 24" {...props}>
|       <g fill="none" fillRule="evenodd">
|         <path d="M0 24h24V0H0z" />
 @ ./node_modules/@qbmds/icons/index.js 1:0-46 1:0-46
 @ ./src/2-Molecules/tooltip/tooltip.js
 @ ./src/2-Molecules/tooltip/index.js
 @ ./src/2-Molecules/tooltip/tooltip.stories.mdx
 @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|mdx))$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.35 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.14 KiB {HtmlWebpackPlugin_0} [built]

Its a simple js component I am trying to import, you get the same error if you change the

Hello

My guess is it is something to do with .storybook/main.js so for ref here it is

module.exports = {
  stories: ['../src/**/*.stories.(js|jsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    // Removed to due bug: https://github.com/storybookjs/storybook/issues/10204
    // '@storybook/addon-viewport',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true
      }
    },
    '@storybook/addon-a11y',
    '@storybook/addon-knobs',
    '@storybook/addon-jest',
    'storybook-addon-jsx',
    '@storybook/addon-actions'
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
      loader: require.resolve('file-loader'),
      query: {
        name: 'static/media/[name].[hash:8].[ext]',
      },
    },
    {
      test: /\.(eot|otf|ttf|woff|woff2)(\?.*)?$/,
      loader: require.resolve('file-loader'),
      query: {
        name: '[name].[ext]',
      },
    },
    {
      test: /\.module\.s(a|c)ss$/,
      use: [
        `style-loader`,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            modules: {
              localIdentName: "[local]___[hash:base64:5]",
            }
          }
        },
        'postcss-loader',
        'sass-loader'
      ]
    })

    return config
  }
}

I have been pulling my hair out as it doesn't make sense (to me)

Cheers

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!