webpack: [Webpack 5 bug, works in 4] exported library in an empty object

Bug report

What is the current behavior?

Exported library is an empty object.

If the current behavior is a bug, please provide the steps to reproduce.

// src/Main.tsx
export default { foo: 1 }

// webpack.config.js
const path = require('path')

module.exports = {
  devtool: 'inline-source-map',
  entry: {
    Main: './src/Main.tsx',
  },
  output: {
    filename: '[name]-[hash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://0.0.0.0:8080/', 
    library: '[name]',
    libraryExport: 'default',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts'],
  }
}

// in the web page
console.log('Main'); // --> {}

What is the expected behavior?

// in the web page, using Webpack 4.44.2 we get the expected:
console.log('Main'); // --> {foo: 1}

Other relevant information: webpack version: 5.3.2 Node.js version: 12.4.0 Operating System: OSX 10.15.7 Additional tools:

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 26 (7 by maintainers)

Most upvoted comments

Please do not ignore If the current behavior is a bug, please provide the steps to reproduce., for webpack-dev-server it is known issues, I will reopen if after you fix it

alexander-akait on Oct 31, 2020

Works when updating to "webpack-dev-server": "^4.0.0-beta.0"

When you change webpack-dev-server 3.x -> 4.x, Don’t forget to replace publicPath with static

devServer: {
        static: path.join(__dirname, 'build'),
},

ivictbor on Feb 4, 2021

contentbase was renamed to static: './public' disablehostcheck was renamed to firewall: false

alexander-akait on Jan 19, 2021

@sapolio put this in package.json (i.e. { devDependencies: { "webpack-dev-server": "^4.0.0-beta.0" } })

alexander-akait on Jan 19, 2021

I test it on “webpack”: “^5.38.1”, “webpack-cli”: “^4.7.0”, “webpack-dev-server”: “4.0.0-beta.x” (0-3) it’s not works 😦

dgaenko on Jun 8, 2021

It’s working fine now

    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "4.0.0-beta.0",

yansenlei on Jun 3, 2021

@ivictbor , Thank you for your help. My problems are still there. My export configuration doesn’t have a library

{
  ...
  output: {
    path: env.production ? path.resolve(__dirname, '../dist') : path.join(pluginHomeDir, 'dist'),
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'testPlugin.min.js',
    publicPath: '/dist/'
  },
  devServer: {
    hot: true,
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    host: 'localhost',
    port: 9000,
    injectClient: true,
    writeToDisk: (filePath) => {
      return writeIndex++ <= 1
    },
    headers: {
      "Access-Control-Allow-Origin": "*",
      https: true
    }
  }
}

I expect to work normally in DevServer, and WebPack4 can work

    "webpack": "^4.29.4",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",

in browser

Module{object}

After upgraded webpack

    "webpack": "^5.38.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.11.2",

in browser

{}

What is your entry point? What do you export from source code, and also your package.json please. I would also recommend to create minimal reproducible project like I did. Then it will be easier for you to understand the difference and for us to find an issue

ivictbor on Jun 2, 2021

the same issue, Is there any solution?

Maybe this one would help: https://hinty.io/devforth/fix-webpack-imported-module-is-not-a-function-for-webpack5/

ivictbor on Jun 2, 2021

Didn’t try bundle file alone yet. OK I’ll make a repo a bit later.

sapolio on Jan 18, 2021

What certain parts of setup do i need to expose? This is how it works on webpack@4 via DevServer.

  entry: path.resolve(__dirname, 'src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'filename.js',
    library: 'libraryName',
    libraryExport: 'default',
  },

The default export of main.js is an object literal.

export default {
  ...ClapprCore,
  ClickToPause,
  andSoOn
}

And i see it in browsers window object as libraryName

Now i will reinstall webpack to version 5 and start it…

+ webpack@5.15.0 webpack 5.15.0 compiled successfully in 5144 ms ℹ ｢wdm｣: Compiled successfully.

Now my libraryName is undefined. Then i comment out libraryExport: 'default', line. After that my libraryName becomes an empty object.

sapolio on Jan 18, 2021