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>