The code above is ok. You can mix require and export. You can't mix import and module.exports.

@sokra probably in real code I had something more, that caused the issue. Now I've refactored this part to import export and it works fine.

I'll try check it in more clear example. For now I believe the issue can be closed.

This issue was newly affecting me after instructing Babel to not transpile module syntax. As sokra described, it only occurred when trying to use CommonJS style module.exports inside of ES modules. require always works. This can be fixed by simply replacing all module.exports = ... to export default ... where applicable, as this is seemingly equivalent for old Babel-style ES module transpilation. (Note though, that importing this module using require will probably give you an option with a default key rather than the default export itself, so it's probably best you make the switch across the entire codebase at once.)

I find myself also being bitten by this issue since upgrading to 2.2.0. In my case, my hypothesis is a require chain that looks like:

CommonJSModule --requires--> ESModule --requires--> AnotherCommonJSModule

I'm sorry that I can't provide any more details at this time.

I'm not at all familiar with the internals but a quick, manual binary search suggests the regression is here: v2.2.0-rc.4...v2.2.0-rc.5

Attn: @sokra, @TheLarkInn I think this issue should be re-opened.

Taking a quick glance, this is definitely the culprit:

a7a4184

detect harmony modules before parsing
exports is now undefined in ESM
module.exports is now read-only in ESM and returns undefined
define is now undefined in ESM

As it says, module.exports is read-only in ES modules. If you're getting module.exports as read-only in a CommonJS module, THAT would be a bug, but that file is very much not a CommonJS file if it contains any export/import statements. I can confirm that this was the problem in my case and it was fixed by making my ES modules properly use ES exports. As a note require still works just fine inside of any module.

From my PoV it seems like Webpack's new behavior ultimately makes a lot more sense than the old behavior. It is fairly inane to allow mixing of import statements and CommonJS module.exports, and probably was never intended to work that way.

Maybe add this info to migration guide?

I can only speak for myself, but for the situation affecting me the module within which module.exports is read-only does not have any import or export statements. It appears that the heuristic that is identifying the file in question as a 'harmony' model is misfiring in some situations.

@ggoodman are you using babel-runtime?

@sokra here are the relevant config files:

.babelrc:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ],
  "plugins": ["transform-runtime", "syntax-dynamic-import"]
}

webpack.config.js (simplified):

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Path = require('path');
const Webpack = require('webpack');


const config = {
    cache: true,
    devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : false,
    context: Path.join(__dirname),
    output: {
        path: Path.join(__dirname, 'build'),
        filename: '[name].js',
        chunkFilename: '[name].js',
        publicPath: '/static/',
    },
    recordsPath: Path.join(__dirname, 'recordsCache'),
    module: {
        rules: [{
                test: /\js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ng-annotate-loader',
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },
                    {
                        loader: 'string-replace-loader',
                        options: {
                            multiple: [
                                { search: /API_URL/g, replace: process.env['PLUNKER_API_URL'] },
                                { search: /EMBED_URL/g, replace: process.env['PLUNKER_EMBED_URL'] },
                                { search: /RUN_URL/g, replace: process.env['PLUNKER_RUN_URL'] },
                                { search: /SHOT_URL/g, replace: process.env['PLUNKER_SHOT_URL'] },
                                { search: /WWW_URL/g, replace: process.env['PLUNKER_WWW_URL'] },
                            ],
                        },
                    },
                ]
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            disable: false,
            allChunks: true,
        }),
    ],
    resolve: {
        modules: [
            Path.join(__dirname, 'node_modules'),
            Path.join(__dirname, 'src'),
        ],
    },
};

module.exports = config;

Chiming in as I'm getting this error in the browser as well, but neither the requiring module, nor the required module have any import or export statements in them. I am using transform-runtime if that's relevant.

transform-runtime adds import to your files...

@sokra I was not aware that this plugin would add import to my files.

If removing that plugin is a solution, what alternative can we consider so that we don't have babel-runtime stuff like _classCallCheck included for every source file using ES6 features like classes?

The way I see it, there are a few good solutions:

• Make transform-runtime support outputting require statements instead of import statements, as an option. This seems unlikely, because it looks like Babel is already relying on the fact that import is declarative.
• Use transform-es2015-modules-commonjs. This would replace all import statements with require statements. If you are not using any import/export syntax in your app, this solution is probably ideal, because it incurs no extra cost. However, if you are using ES modules, then this will likely impact Webpack 2's ability to perform tree shaking. (I'm sure everyone is aware of this.)
• Use ES modules across the board. I think this is the most correct thing to do. Is there a reason why existing CommonJS exports can't simply be migrated? require does not have to be globally replaced, only module.exports and exports statements.

How i can reproduce module.exports behavior?
I had entry point with name LoginPage, i need to build library with the same name, after that i init it on the page using new LoginPage();
Now i should use new LoginPage.LoginPage() or new LoginPage.default();
How i can resolve this issue?

adding import (by transform-runtime) also means that the file is switched into strict mode, which could break you code. In my opinion transform-runtime should be changed.

I had the following .babelrc

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ],
        "stage-0",
        "react"
    ],
    "plugins": [
        "add-module-exports",
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-object-assign"
    ]
}

And was able to fix this by removing the add-module-exports plugin. TBH, I can't even recall why I had it in there to begin with... but upon removal it started working as expected. Nobody else has mentioned add-module-exports yet so I thought I'd chime in too to point out that it's not just transform-runtime causing this.

M

In my react-native-web case, just use an additional webpack rule, then the TypeError: Cannot assign to read only property 'exports' of object is fixed. Maybe you can ref to it.

npm install --save-dev react-app-rewired

Create a config-overrides.js in your project root

// used by react-app-rewired

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

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    // To let alias like 'react-native/Libraries/Components/StaticRenderer'
    // take effect, must set it before alias 'react-native'
    delete config.resolve.alias['react-native'];
    config.resolve.alias['react-native/Libraries/Components/StaticRenderer'] =
      'react-native-web/dist/vendor/react-native/StaticRenderer';
    config.resolve.alias['react-native'] = path.resolve(
      'web/aliases/react-native',
    );

    // Let's force our code to bundle using the same bundler react native does.
    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: env === 'development',
      }),
    );

    // Need this rule to prevent `Attempted import error: 'SOME' is not exported from` when `react-app-rewired build`
    // Need this rule to prevent `TypeError: Cannot assign to read only property 'exports' of object` when `react-app-rewired start`
    config.module.rules.push({
      test: /\.(js|tsx?)$/,
      // You can exclude the exclude property if you don't want to keep adding individual node_modules
      // just keep an eye on how it effects your build times, for this example it's negligible
      // exclude: /node_modules[/\\](?!@react-navigation|react-native-gesture-handler|react-native-screens)/,
      use: {
        loader: 'babel-loader',
      },
    });

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

Also create a web/aliases/react-native/index.js

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

Now you can just run react-app-rewired start instead of react-scripts start

@flyskywhy thanks a lot, this saved me a day of work!!!! Sending karma your way 👏

Just a remind, see #4039 (comment) to fix this problem

https://babeljs.io/docs/en/options#sourcetype

"script" - Parse the file using the ECMAScript Script grammar. No import/export statements allowed, and files are not in strict mode.
"module" - Parse the file using the ECMAScript Module grammar. Files are automatically strict, and import/export statements are allowed.
"unambiguous" - Consider the file a "module" if import/export statements are present, or else consider it a "script".

Given that the default for sourcetype is "module", I wonder why Babel doesn't treat the presence of module.exports (and the absence of import/export statements) as a signal that the file should be parsed as "script" instead, to avoid throwing this error.

just like this

const Datastore = require("nedb");

function DB(database) {
	let options = {
		filename: database,
		autoload: true,
	};
	this.db = new Datastore(options);
}

DB.prototype.limit = function(offset, limit) {
	this.offset = offset || 0;
	this.limit = limit || 15;
	return this;
};

DB.prototype.sort = function(orderby) {
	this.orderby = orderby;
	return this;
};
/**
 * query: Object类型  查询条件 支持使用比较运算符($lt, $lte, $gt, $gte, $in, $nin, $ne), 逻辑运算符
 * offset: 偏移量 忽略多少条  用于分页
 * limit: 返回条数  用于分页
 * 返回: docs 数组  返回查询到的数据
 * * */
DB.prototype.find = function(query, select) {
	return new Promise((resolve, reject) => {
		let stmt = this.db.find(query || {});
		if (this.orderby !== undefined) {
			stmt.sort(this.orderby);
		}
		if (this.offset !== undefined) {
			stmt.skip(this.offset).limit(this.limit);
		}
		if (select != undefined) {
			stmt.projection(select || {});
		}
		stmt.exec((err, docs) => {
			if (err) {
				return reject(err);
			}
			resolve(docs);
		});
	});
};
/**
 * query: object  查询条件
 * 查找一条
 * 返回: 查到数据
 * * */
DB.prototype.findOne = function(query, select) {
	return new Promise((resolve, reject) => {
		let stmt = this.db.findOne(query || {});
		if (this.sort !== undefined) {
			stmt.sort(this.sort);
		}
		if (select != undefined) {
			stmt.projection(select || {});
		}
		stmt.exec((err, doc) => {
			if (err) {
				return reject(err);
			}
			resolve(doc);
		});
	});
};

/**
 * 插入数据
 * value: 插入的数据
 * 使用array，实现批量插入。一旦其中一个操作失败，所有改变将会回滚。
 * * */
DB.prototype.insert = function(values) {
	return new Promise((resolve, reject) => {
		this.db.insert(values, (err, newDoc) => {
			if (err) {
				return reject(err);
			}
			resolve(newDoc);
		});
	});
};

/**
 * 更新数据
 * query: object  查询的数据
 * values: 更新的数据
 * options : object  muti(默认false)，是否允许修改多条文档；upsert(默认为false)
 * * */
DB.prototype.update = function(query, values, options) {
	return new Promise((resolve, reject) => {
		this.db.update(
			query || {},
			values || {},
			options || {},
			(err, numAffected) => {
				if (err) {
					return reject(err);
				}
				resolve(numAffected);
			}
		);
	});
};

/**
 * 根据options配置删除所有query匹配到的文档集。
 * query: 与find和findOne中query参数的用法一致
 * options: 只有一个可用。muti(默认false)，允许删除多个文档
 * * */
DB.prototype.remove = function(query, options) {
	return new Promise((resolve, reject) => {
		this.db.remove(query || {}, options || {}, (err, numAffected) => {
			if (err) {
				return reject(err);
			}
			resolve(numAffected);
		});
	});
};

// module.exports = (database) => {
// 	return new DB(database);
// };
const nedb = (database='testdb') => {
	return new DB(database);
};
export default nedb

const db = require("./nedb.js").default("testdb");