Posted in Uncategorized

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

   February 23, 2021  2 Comments on 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.