My goal is to create a simple app and output one js standalone file and one css standalone file without using create-react-app.
I have two functional components like
const Card = () => {
return(
<div>test</div>
)
}
export default Card;
My app.js file
import ReactDOM from 'react-dom';
import Card from './Card';
ReactDOM.render(<Card />, document.getElementById('root'));
It looks like I need web pack so this is my web pack config file
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.js"
},
resolve: {
extensions: [".js"]
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
};
I installed the following packages
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"eslint-config-google": "^0.14.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
Running nix babel src/app.js throws an error
Unexpected token
|
> 7 | ReactDOM.render(<Card />, document.getElementById('root'))
| ^
8 | }
The goal here to generate one JS file and one CSS file and that is why I didn't use the create-react-app.
Searching on the inter web shows a lot of results like using react and babel from a CDN which I do not want to do.
how do I compile JSK to pure JS into one JS minify file?
Edit
I did follow the other questions and this is the error I get
Error: Plugin/Preset files are not allowed to export objects, only functions.
.babelrc file
{
"presets": ["es2015", "stage-1", "react"]
}
web pack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
query:
{
presets:['es2015', 'react']
}
}]
},
};
