Can not use other module types(except es6 module) with tree shaking!

Bug report

Ccommonjs modules stop whole project tree shaking!

What is the current behavior?

The babelrc:

["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%%", "ie > 9"]
      },
      "useBuiltIns": "usage"
}]

When i use bebel-preset-env with webpack4, require or import a commonjs module(now many module have no esm)

// a.js
module.exports = {};

// b.js
const a = require('./a'); // or import a from './a';

it throw the errors in the browser:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

When i set the "modules": "commonjs", no error. but becaulse babel transform all the es6 module to commonjs, can get the tree shakings.

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

module.exports is read-only when module: false, but is writable when "modules": "commonjs".

If this is right, so can’t use any other module types in the project when i want use tree shaking ?

What is the expected behavior?

Can use tree shaking with commonjs modules.

maybe need to change the module.exports in harmony-module.js towritable?

Object.defineProperty(module, "exports", {
    enumerable: true,
    writable: true
});

Other relevant information:
webpack version: 4.17.1
Node.js version: 8.9
Operating System: macos
Additional tools: bebel-preset-env, bebel7

Author: Fantashit

2 thoughts on “Can not use other module types(except es6 module) with tree shaking!

  1. same problem

    //babel
    {
      presets:[[require.resolve('@babel/preset-env'), {
                "targets": {
                    "ie": 9,
                    "browsers": browsers
                },
                //useBuiltIns: false,
            }]],
      plugins: [
                 [require.resolve("@babel/plugin-transform-runtime"), {
                    corejs: 2,
                    helpers: true,
                    regenerator: true,
                }]
          ]
    }
    
    //a.js
    class A {}
    module.exports = A;
    
    //index.js
    import A from './a';
    console.log(A);
    
    

    errors in the browser:
    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    dist/app.js

    /***/ "./src/a.js":
    /*!******************!*\
      !*** ./src/a.js ***!
      \******************/
    /*! no exports provided */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
    
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    /* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var _babel_runtime_corejs2_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs2/helpers/classCallCheck */ "./node_modules/@babel/runtime-corejs2/helpers/classCallCheck.js");
    /* harmony import */ var _babel_runtime_corejs2_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs2_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0__);
    
    
    var A = function A() {
      _babel_runtime_corejs2_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, A);
    };
    
    module.exports = A;
    /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/harmony-module.js */ "./node_modules/webpack/buildin/harmony-module.js")(module)))
    
    /***/ })
    

    webpack version: 4.17.1
    Additional tools: bebel-preset-env, bebel7

  2. I have the same problem:

    message.js:17 Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’
    at Module.eval (message.js:17)
    at eval (message.js:51)
    at Module../react/src/js/message.js (bundle.js:3999)
    at webpack_require (bundle.js:20)
    at eval (index.js:6)
    at Module../react/src/js/index.js (bundle.js:3975)
    at webpack_require (bundle.js:20)
    at eval (index.js:2)
    at Object.0 (bundle.js:4033)
    at webpack_require (bundle.js:20)

    This is my webpack.config:

    const path=require('path')
    const ExtractTextPlugin=require('extract-text-webpack-plugin')
    module.exports={
      mode:'development',
      entry:['babel-polyfill',path.resolve(__dirname,'src/js/index.js')],
      output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
      },
      module:{
        rules:[
          {
            test:/\.m?js$/,
            exclude:/(node_modules|bower_components)/,
            use:{
              loader:'babel-loader',
              options:{
                presets: ['@babel/preset-env','@babel/preset-react']
              }
            }
          },
          {
            test:/\.(jpg|png|gif|woff|eot|ttf|svg)$/,
            use:{
              loader:'url-loader',
              options:{
                limit:1000000
              }
            }
          },
          {
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
              use:"css-loader"
            }),
          }
        ]
      },
      plugins:[
        new ExtractTextPlugin("css/[name].css")
      ]
    }
    
    ```I don't know how con I fix this bug 
    
    Please need some help
    

Comments are closed.