React-styleguidist: Module not found: Can't resolve 'jquery-mobile'

[mertyesin]

styleguide.config.js:

const path = require('path');
const glob = require('glob');

module.exports = {
    title: 'React Component Documantation',
    components: "components/**/*.tsx",
    resolver: require('react-docgen').resolver.findAllComponentDefinitions,

    //propsParser: require('../../lib/propTypesParser').parse,
    propsParser: require('react-docgen-typescript').parse,

    webpackConfig: {
        entry: {
            bundle: ['./index.ts'],
        },
        context: path.resolve(__dirname),
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'temp')
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        }
    }
};

• Webpack version: 2.3.3
• MacOS, Chrome
• "react-docgen": "^3.0.0"
• "react-docgen-typescript": "0.0.15"
• "react-styleguidist": "^5.0.0"

I don't know it is a bug or not but i stucked here for days. Also adding my import statement of jquery mobile in my component and error:

import * as $ from "jquery";
($ as any).mobile = require("jquery-mobile");

ERROR : Module not found: Can't resolve 'jquery-mobile' in '/Users/mert/Works/data-visualization/trunk/packages/dv-web/components'
@ multi ./~/react-styleguidist/lib/index ./~/react-styleguidist/~/react-dev-utils/webpackHotDevClient.js

[stepancar]

@mertyesin is jquery-mobile installed?

[mertyesin]

@stepancar Yes. Like all other required modules or libraries, jquery-mobile is in node_modules folder under the '/Users/mert/Works/data-visualization/trunk/packages/dv-web/'.

[stepancar]

@mertyesin , did you try looking for something like https://codedump.io/share/GP0jLasiJZqu/1/using-jquery-mobile-with-webpack
?
looks like webpack configuration problem, not React-styleguidist.
Try this https://stackoverflow.com/questions/36357283/using-jquery-mobile-with-webpack
if not help, please, provide full example, and i try to help you with configuration

[mertyesin]

@stepancar You're right! It looks like a webpack problem.
I had tried your suggestions before, i tried one more time now. Nothing changes.

added externals to my styleguide.config.js:

.
.
 webpackConfig: {
        entry: {
            bundle: ['./index.ts'],
        },
        context: path.resolve(__dirname),
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'temp')
        },
        externals: {
            "jquery": "$",
            "jquery-mobile": "$.mobile"
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        }
    }

[sapegin]

externals will be ignored: https://react-styleguidist.js.org/docs/configuration#webpackconfig

[sapegin]

Closing this for now. Feel free to reopen if you still have this issue.

[MarkMurphy]

This is still an issue. I don't see any solutions here.

[gardezii]

same here. It is still an issue