Storybook Won't Compile - React Syntax Highlighter Loader Issue

[jasonleibowitz]

Describe the bug
I have a React/Redux application using TypeScript with a custom Webpack config (not CRA). I'm using ts-loader and not babel as the loader for TypeScript.

Following the instructions for both automatic setup, and also manual setup for Storybook v5.3.14, when I run npm run storybook I'm getting a ModuleParseError saying that I don't have an appropriate loader to load react-syntax-highlighter, which Storybook itself is importing. (See the code snippet bellow).

I found some issues (and PRs) that seem to be related. It looks like a fix may have been introduced in a recent alpha build of v6.0.0, 6.0.0-alpha.20. However, even after specifying that version of Storybook I'm still experiencing the same issue.

FWIW, when I downgrade to v5.2.8 I am able to get Storybook to compile properly.

Related Issues

• import react-syntax-highlighter/create-element from cjs #9795
• Changed import of react-syntax-highlighter from esm to cjs #9780
• Syntax Highlighter should import react-syntax-highlighter from CommonJS dist instead of ESModules #9279

To Reproduce
Steps to reproduce the behavior:

1. Set up a TS project not from CRA. Use ts-loader instead of babel to compile the code.
2. Install the latest version of Storybook.
3. Set up the .storybook/main.js file per the code snippet below.
4. Add a storybook command to package.json that is start-storybook -p 6006
5. For the purpose of this test, create the following file in stories/0-Welcome.stories.tsx

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;

ToStorybook.story = {
  name: 'to Storybook',
};

Expected behavior
Storybook should compile properly and open.

Screenshots
See code snippet below instead.

Code snippets

// .storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [{
        loader: require.resolve('ts-loader'),
      }, ],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

WARN force closed preview build

ModuleParseError: Module parse failed: Unexpected token (5:11)
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
| export default createAsyncLoadingHighlighter({
|   loader: function loader() {
>     return import(
|     /* webpackChunkName:"react-syntax-highlighter/lowlight-import" */
|     'lowlight/lib/core').then(function (module) {
    at handleParseError (/filepath/node_modules/webpack/lib/NormalModule.js:450:19)
    at doBuild.err (/filepath/node_modules/webpack/lib/NormalModule.js:484:5)
    at runLoaders (/filepath/node_modules/webpack/lib/NormalModule.js:343:12)
    at /filepath/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at provider (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at /filepath/node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
ModuleParseError: Module parse failed: Unexpected token (5:11)
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
| export default createAsyncLoadingHighlighter({
|   loader: function loader() {
>     return import(
|     /* webpackChunkName:"react-syntax-highlighter/refractor-core-import" */
|     'refractor/core').then(function (module) {
    at handleParseError (/filepath/node_modules/webpack/lib/NormalModule.js:450:19)
    at doBuild.err (/filepath/node_modules/webpack/lib/NormalModule.js:484:5)
    at runLoaders (/filepath/node_modules/webpack/lib/NormalModule.js:343:12)
    at /filepath/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at provider (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at /filepath/node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
ModuleParseError: Module parse failed: Unexpected token (5:11)
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
| export default createAsyncLoadingHighlighter({
|   loader: function loader() {
>     return import(
|     /* webpackChunkName:"react-syntax-highlighter/refractor-import" */
|     'refractor').then(function (module) {
    at handleParseError (/filepath/node_modules/webpack/lib/NormalModule.js:450:19)
    at doBuild.err (/filepath/node_modules/webpack/lib/NormalModule.js:484:5)
    at runLoaders (/filepath/node_modules/webpack/lib/NormalModule.js:343:12)
    at /filepath/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/filepath/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at provider (/filepath/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
    at /filepath/node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

System:

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14
    @storybook/addon-links: ^5.3.14 => 5.3.14
    @storybook/addons: ^5.3.14 => 5.3.14
    @storybook/react: ^5.3.14 => 5.3.14

Additional context
Add any other context about the problem here.

[alexhhn]

+1

[stale]

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!

[amitch6097]

+1

[stale]

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]

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!