0

I did a slider on mobx and bundle it using webpack 3. I excluded mobx from slider's bundle using "externals". Then I published it as package, created a mobx-sandbox and installed the slider there. In result I'm getting an error because package can't import mobx. But I expecting that slider will find mobx because I imported it on sandbox page.

I also receiving in console:

[mobx] Warning: there are multiple mobx instances active. This might lead to unexpected results.

What am I missing?

slider's webpack.config:

var path = require('path');
var webpack = require('webpack');


module.exports = {
    node: {
        fs: "empty" // https://github.com/josephsavona/valuable/issues/9
    },
    devtool: 'source-map',
    entry: {
        bundle: [ "./src/index.js" ]
    },
    output: {
        path: path.join(__dirname, "lib"),
        filename: "index.js"
    },
    externals: {
         'react': {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        },
         'mobx': {
            root: 'mobx',
            commonjs2: 'mobx',
            commonjs: 'mobx',
            amd: 'mobx'
        },
        'mobx-react': {
            root: 'mobx-react',
            commonjs2: 'mobx-react',
            commonjs: 'mobx-react',
            amd: 'mobx-react'
        }
    },
    stats: {
        colors: true,
        reasons: true
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /\/node_modules\//,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

slider's .babelrc

{
    "presets": ["es2015", "react", "stage-0"],
    "plugins": ["transform-decorators-legacy"]
}

slider repository: https://github.com/andiwilflly/rslider

sandbox repository: https://github.com/SkunSHD/rslider-test-sandbox

Curious
  • 63
  • 6
  • I figured out [here](https://yarnpkg.com/lang/en/docs/dependency-types/) that I need to use `peerDependencies` but it didn't help. So I keep searching... – Curious Jul 15 '17 at 15:00

1 Answers1

0

The problem was with absence of umd's imports in bundle.

This line in output helped to import modules in bundle properly: webpack.config:

module.exports = {
    ... ,
    output: {
        ... ,
        libraryTarget: 'umd'
    }
}
Curious
  • 63
  • 6