Describe the bug I have a website on gatsby. One of the components contains such code:

import styled from 'styled-components';
import { Link } from 'gatsby';

export const LegalNavigationLink = styled(Link)`
  line-height: 1;
`;

And because of this code, I get this error:

<details> <summary>Error as text</summary> <br> <pre> ERROR in ./node_modules/gatsby/cache-dir/gatsby-browser-entry.js 25:4 Module parse failed: Unexpected token (25: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 | | return (

<React.Fragment>

| {finalData && render(finalData)} | {!finalData && <div>Loading (StaticQuery)</div>} @ ./src/components/blocks/footer/footer-styles.js 79:0-30 82:40-44 @ ./src/components/blocks/footer/footer-view.js @ ./src/components/blocks/footer/footer.story.js @ ./src sync .story.js$ @ ./.storybook/config.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true Child HtmlWebpackCompiler: Asset Size Chunks Chunk Names __child-HtmlWebpackPlugin_0 29.4 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] 1.75 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error below. WARN You may need to refresh the browser. </pre> </details>

I'm sure that this error is only in storybook environment because when I run website using gatsby develop, everything works fine.

To Reproduce Steps to reproduce the behavior:

1. git clone git@github.com:SilencerWeb/storybook-bug-reproduction.git && cd storybook-bug-reproduction && npm install
2. yarn storybook to run storybook on porn 3001 and yarn develop to run gatsby on porn 3000.

File I was talking about there — src/components/blocks/footer/footer-styles.js

Expected behavior No error

System:

• OS: macOS Mojave 10.14.5
• Device: MacBook Pro 2015 13'
• Browser: Brave
• Framework: react
• Addons: none
• Version: [e.g. 5.1.9]

Additional context I have weback.config.js inside .storybook:

const path = require('path');


module.exports = async ({ config }) => {
  config.resolve.modules = [path.resolve(__dirname, '../src'), 'node_modules'];

  return config;
};

Solved via: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/ and https://github.com/Mathspy/gatsby-storybook-jest-starter/issues/7