Ask questionsError on rendering story (probably related to babel)

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 | | return (


| {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 && 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


  • 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;

Answer questions SilencerWeb

Solved via: and

Github User Rank List