Question

123

How to load library source maps using webpack?

rated 0 times [ 127] [ 4] / answers: 1 / hits: 19863 / 9 Years ago, mon, september 21, 2015, 12:00:00

I'm building two projects with webpack; one is a library for the other.

Is it possible to consume the sourcemaps from my library project when building my wrapper project? I would like the ability to debug my library code from my wrapper UI.

My build works correctly in that the library is built in. The only issue is sourcemaps. The JavaScript I see in the browser debugger is uglified, because sourcemaps are unavailable.

Snippet of my project structure:

+-- my-ui/

    +-- dist/

        +-- my-ui.js

        +-- my-ui.js.map

    +-- node_modules/

        +-- my-lib/

            +-- dist/

                +-- bundle.js

                +-- bundle.js.map

Snippet from webpack.config.js:

module.exports = {

    entry: './src/js/main.jsx',

    output: {

        path: path.join(__dirname, 'dist'),

        filename: 'my-ui.js',

        library: 'my-ui',

        libraryTarget: 'umd'

    },

    devtool: 'source-map',

    module: {

        loaders: [

            {test: /.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')}

        ]

    },

    plugins: [

        new Clean('dist'),

        new HtmlWebpackPlugin({

            template: 'src/index.html',

            inject: true

        })

    ]

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 9 Years ago julian · Accepted Answer

I finally figured out my issue...

Thanks to @BinaryMuse for the tip on source-map-loader. This indeed was the right way to go, though it wasn't working for me initially.

What I eventually realized is that I need to enable the source-map-loader for webpack in both my-lib and my-ui. Without source-map-loader in my-lib webpack config, the source-map-loader inside my-ui errors (with a warning message sadly) because it cannot locate source maps for transitive dependencies of my-lib. Apparently the source maps are so good that source-map-loader is able to peek at all aspects of the dependency tree.

Also of note, I ran into an issue using source-map-loader in conjunction with react-hot-loader. See, react-hot-loader does not include source maps. When source-map-loader tries to find them (because it's just scanning everything), it cannot and aborts everything.

Ultimately, I'd like source-map-loader to be more fault tolerant, but when set up correctly, it does work!

devtool: 'source-map',

module: {

    preLoaders: [

        {test: /.jsx?$/, loader: 'eslint', exclude: /node_modules/},

        {test: /.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/}

    ],

    loaders: [

        {test: /.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/}

    ]

}