Is there a way to load JSX files on Webpack 4?
I tried:
module.exports = {
resolve: {
extensions: [".jsx", ".js"]
}
}
But apparently my src/index.jsx file is loaded but not processed.
What you have here is half of it. resolve.extensions lets you
require('./my-module.jsx')
without having to type in the .jsx portion. ie
require('./my-module')
However, as you noted - the source is not processed in any way so if you have syntax that needs to be transpiled such as jsx, you'll need to take care of that.
Webpack by default won't do this for you, you'll need to use babel-loader with a preset or plugin that will transform the syntax. There's a lot of tutorials how to do that but it would look something like this:
module: {
rules: [{
exclude: /node_modules/, // don't transpile node_modules
test: /\.jsx$/, // do transpile any files ending in .jsx
use: {
loader: 'babel-loader',
options: {
plugins: ['#babel/plugin-transform-react-jsx']
}
}
}]
}
you need to install
npm i #babel/preset-react --save
add this to .babelrc file inside presets array. We use loaders inside module property of the webpack.config object because loaders are effective on one type of files whereas plugins are effective on the entire bundle.
.babelrc
{
"presets": [
["#babel/preset-env", { "targets": { "esmodules": true } }],
"#babel/preset-react"
],
all webpack projects needs #babel/preset-env. you might install that as well.
}
Related
I have used lerna to setup the repo.
This is the error I am getting -
This error is coming in the shared code which I have put in the components directory. Below is my directory structure.
So I have this Button component to be used in both the apps. After seeing the error it seems to me it's not recognizing the jsx syntax and asking for #babel/preset-react . So what I tried is I tried to create .babelrc file inside buttons folder with this content -
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
and then additionaly I also created one webpack.config.js file inside buttons folder with this content -
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
This doesn't helped me!
I also tried to create babel.config.js in the root folder with a few contents copied but it didn't work.
I have separate .babelrc and webpack.config.js files in both the apps inside the apps folder as shown in the snapshot. When I am using buttons as a dependency in package.json in apps and then using it, then this error is coming. I don't know how to resolve this issue. Any help will be greatly appreciated.
This is example repo I have created for reference
One way to get this to work might be to nail the babel config straight into the webpack configuration:
In your case you have to change the babel-loader config so it will look like that:
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-react",
],
}
}
},
I just tried it on your test repo for app2 and it works
In my react project, webpack.config.js brings in proposal-class properties like so:
...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/preset-env'],
plugins: ['#babel/proposal-class-properties']
}
},
}
...
By including #babel/proposal-class-properties I'm able to remove the constructors from my React components, etc.
However, the documentation shows plugin-proposal-class-properties in .babelrc as follows (and doesn't mention webpack.config.js at all):
{
"plugins": ["#babel/plugin-proposal-class-properties"]
}
whereas my .babelrc does not include any plugins at all:
{
"presets": [
["#babel/env", {
"modules": false
},
"#babel/preset-env"]
]
}
Is there any effective difference between including the plugins (such as proposal-class-properties) in webpack.config.js as compared to putting them in .babelrc?
You can configure babel through .babelrc or through the babel-loader configuration in webpack. They both work exactly the same.
However, I recommend only using .babelrc for configuring babel.
That way it can also work when you run your tests, which usually don't go through webpack and will therefore not have the webpack configuration for babel.
.babelrc:
{
"presets": ["#babel/preset-env"]
"plugins": ['#babel/plugin-proposal-class-properties', {'loose': true}]
}
I'm making an electron.js using React. I'm using JSX so need to use Babel to transpile. Many tutorials out there all suggests using Webpack.
Currently, I'm using Webpack 4. Here is my webpack.config.js
const path = require('path')
module.exports = {
entry: "./src/renderer.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "renderer.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
And my .babelrc
{
"presets": ["es2015", "stage-0", "react"]
}
Here I need to start with renderer.js because it contains most of my code and React components, the result is a bundled js file.
But all I want is to transpile all my jsx files to normal js files, something like transpile all JSX files within src to there according JS files in dist folders, and if available, watch and transpile when I edit the files. How to achieve that?
You can simply run babel through the command line:
babel --plugins transform-react-jsx-source script.js
Docs:
https://babeljs.io/docs/plugins/transform-react-jsx-source/
Note the three "Usages" on the page. All of them will get you what you want, none of them use webpack. The .babelrcfile can handle all your plugins/transforms and is the recommended usage. Then you just run babel
Here is an example from Material-UI's package.json:
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
Currently, I have multiple css files under some react components. Those css files are required conditionally. However, css loader and extract text plugin include all the css files which is not required in a js file. Is there any way to exclude files by regex using test config or other way?
test: /\.css$/,
lets say I have css files
bear.css
cat.css
styles.css
colors.css
... multiptle different css files
I edit the regex correctly but still it include all css no matter what which i tested by leaving one comment on css file which should not be included on bundle.css
This is how I require css file
const css = require(`./styles/${config}`)
I will answer myself. Webpack's include exclude used to determine the file need to be transpile or not, which is nothing to do with excluding files from your bundle. For example, you add regex to exclude, it will still be in your bundle. However, it will not be processed or transpiled(depends on your loader you use).
Therefore, you should use something likeignore loader to remove from your bundle.
According to webpack documentation you can include style-loader and css-loader in your webpack.config.js file:
config = {
entry: "./app/Main.js",
output: {
publicPath: "/",
path: path.resolve(__dirname, "app"),
filename: "bundled.js"
},
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", ["#babel/preset-env", { targets: { node: "12" } }]]
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
}
}
After that you could add css directly in your Main.js file
import Example from 'Example';
import './css/bear.css';
import './css/cat.css';
...
As from the title, I don't know where to start configuring anything in order to be able to use .scss files for my components.
I know how to configure loaders in webpack.config.js, but in the boilerplate I have, there is no webpack.(dev|prod).config.js
I've read that I should create a .babelrc, but then I got lost.
Can anyone help me with this?
structure of my project:
structure folders of project
You'll need to install a few loaders with npm:
npm i style-loader css-loader sass-loader --save-dev
Then you'll need to add the loaders to the module section of your webpack config file:
module: {
loaders: [
// Sass
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
// CSS
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
}