We had to update some dependencies to switch to Webpack 4 and are getting a warning in webpack and an error in the browser when trying to mix import
and require
within the same project.
We have a very large project (300+ files) with some files using var Pkg = require('./fileName');
and module.exports = MyComponent
while others use import Pkg from './fileName'
and export default MyComponent
and would prefer to not have to go through each one using require/module.exports and update them.
webpack warning:
WARNING in ./index.js 15:17-20
"export 'default' (imported as 'App') was not found in './App.jsx'
browser error:
App.jsx:20 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Module.eval (App.jsx:20)
at eval (App.jsx:21)
at Module../App.jsx (bootstrap:83)
at __webpack_require__ (bootstrap:19)
at eval (index.js:2)
at Module../index.js (bootstrap:83)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
package.json dependency versions:
"@babel/cli": "^7.2.3",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
.babelrc
{
"presets": [
"@babel/preset-react",
"@babel/preset-env"
]
}
.browserlistrc
{
"browserslist": [
">0.25%",
"ie 11",
"not op_mini all"
]
}
webpack configs:
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
babelrc: true
}
}],
},
// some other rules...
]
index.js
import App from './App'
// Expose App to the window so we can utilize
// it from within <script> tags
window.App = App
App.js
import React from 'react'
import ReactDOM from 'react-dom'
var App = (function () {
return {
route: function (route, properties) {
return ReactDOM.render(
<div>component markup</div>, document.getElementById('workspace')
)
}
}
})()
// This works
// export default App
// This breaks
module.exports = App
index.html
<script>
App.route('login', {some: 'props'});
</script>
Technically webpack will bundle (but emit a warning like you see there). However, we at the webpack team suggests that you limit the amount of CommonJS syntax used in your codebase to as small as possible.
Why? Because CommonJS isn't statically analyzable in many edge cases, and therefore "bails out" of optimizations like tree-shaking, and scope-hoisting. This mean's your JavaScript (the most expensive resource on your website to load), will have all sorts of dead/unused code in it.
In our webpack documentation you can observe the listed optimization bailouts and you will notice that one of them is "using CommonJS" or "module" symbols in your code.
Long term this will have significant negative web performance impacts on your application!
If it really is painful to migrate, then I would look into a codemod that will run across your code and transform requires (where possible) to imports!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With