Storybook docs-addon Module parse failed: Unexpected token

Question

I try to use storybook doc-addon but I'm stuck with this error :

ERROR in ./node_modules/react-native/index.js 13:7
Module parse failed: Unexpected token (13:7)
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
| 'use strict';
|

I tried a lot of things but nothing worked, I cannot find the cause of this blockage
here is my main.js in the .storybook folder :

const path = require('path');

module.exports = {
    stories: ['../shared/**/*.stories.tsx'],
    addons: [
        '@storybook/addon-actions',
        '@storybook/addon-links',
        '@storybook/addon-knobs',
        {
            name: '@storybook/addon-docs',
            options: {
                configureJSX: true,
            },
        },
    ],
    typescript: {
        check: false,
        checkOptions: {},
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            propFilter: (prop) =>
                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
        },
    },
  }

my preview.js in the .storybook folder :

import React from 'react'
import { addDecorator, addParameters } from '@storybook/react'
import { ThemeProvider, theme } from '../shared/theme'
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
    docs: {
        container: DocsContainer,
        page: DocsPage,
    },
});

addDecorator(storyFn => {storyFn()});

my webpack.config.js :

module.exports = ({ config }) => {
   
   config.resolve.alias = {
        '@components': path.resolve(__dirname, '..', 'shared/'),
    },
    
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        use: [
            {
                loader: require.resolve('awesome-typescript-loader'),
            },
            
        ],
    })
        
        // config.module.rules.push({
        //    test: /\.(js|jsx)$/,
        //     exclude: /node_modules/,
        //   use: [ {loader: require.resolve('babel-loader')}],
        // })
    config.resolve.extensions.push('.ts', '.tsx')
    return config
}

and my .babelrc if it can be useful :

{
    "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" } }],
        "@babel/preset-react",
        "@babel/preset-typescript",
        "babel-preset-const-enum"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-styled-components",
        "const-enum", 
        "@babel/transform-typescript"
    ]
}

I also put the storybook version in my package.json:

"@storybook/addon-actions": "^6.0.21",
    "@storybook/addon-docs": "^6.0.21",
    "@storybook/addon-knobs": "^6.0.21",
    "@storybook/addon-links": "^6.0.21",
    "@storybook/addons": "^6.0.21",
    "@storybook/core": "^6.0.21",
    "@storybook/preset-create-react-app": "3.1.4",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.0.21",

If you have an idea ?

Storybook docs-addon Module parse failed: Unexpected token

0 Answers