Recently, I decided to delve into the world of React and started building a simple app from scratch. However, I have run into an issue that is throwing the following error:
Uncaught TypeError: Cannot assign to read-only property 'exports' of object '#' at Module../src/app/about.js (bundle.js:2081) at webpack_require (bundle.js:724)
about.js
var React = require("react");
var createReactClass = require("create-react-class");
import { Link } from "react-router";
var About = createReactClass({
render: function() {
return(
<Link to={"/"}>Home</Link>
);
}
});
module.exports = About;
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
}
};
package.json
"devDependencies": {
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"create-react-class": "^15.6.3",
"css-loader": "^2.1.1",
"style-loader": "^0.23.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
It seems like the issue may be related to my module.exports
I would greatly appreciate any assistance with this problem.