I am trying to use the .jsx file type and have created a custom .babelrc file as per the Next.js documentation (see below). https://github.com/zeit/next.js#customizing-babel-config
{
"plugins": [
["transform-react-jsx", {
"extensions": [".jsx"]
}]
],
"presets": [
"next/babel"
]
}
However with the above .babelrc file I receive the following error:
Can someone point me in the direction as to what I am doing wrong to get jsx files to load properly?
Cheers,
Stefan
Next.js has support for .jsx files out of the box. There should be no need to customize your .babelrc, so you can either use the default one or just delete it altogether.
Make sure you are running the latest version of Next.js, and possibly delete the node_modules and the .next folder in your project directory. Then install the dependencies again & build.
Related
_bg-theme.scss file is installed in node_modules after adding a package in package.json
I am trying to replace node_modules scss file with the scss file(_bg-theme.scss) we added in assets folder bg-theme.scss .
I am using webpack.NormalModuleReplacementPlugin but its not working.
webpack.common.js
plugins: [
new webpack.NormalModuleReplacementPlugin(
/\/node_modules\/#bg-file-menu\/core\/dist\/styles\/mixins\/_bg-theme.scss/,
'../../../src/web/assets/styles/bg-theme.scss',
)
]
What is the correct way to fix this. Any suggestion or solution is appreciated.
The second path (your assets file) is relative to the first. So you'd have to go a few more levels up.
plugins: [
new webpack.NormalModuleReplacementPlugin(
/\/node_modules\/#bg-file-menu\/core\/dist\/styles\/mixins\/_bg-theme.scss/,
'../../../../../../../src/web/assets/styles/bg-theme.scss',
)
]
The code in question is very simple. I have an "app" folder with a server directory inside. I open a terminal. I cd into app. I then type npx create-next-app client. next installs. I change directory to app/client. I run npm run dev.
I get this in console...
Error: Your custom PostCSS configuration must export a plugins key.
I tried with earlier version of create-next-app. Same. Tried with other installation on my machine. Same.
Is there any way to find out what postcss next thinks is being used?
Can i add a config to fix it?
Okay, I found the answer! I added a practically empty postcss.config.json.
{
"plugins": [
]
}
First, I tried using the exact example, "default", from the nextjs docs...
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
That didn't work. Then I erased the json data leaving just an empty plugins array. Worked.
But why...
I'm developing an application using React and eslint. My problem is that inside my projects src folder there is an 'api-client' folder. Inside this folder are auto generated files used for managing connection to back-end. My problem is that every time I run or make changes to the app I see lots of errors inside the console regarding no-unused-vars and similar. Is there a way to ignore this folder completely? I can't move it outside of the src folder. I'm ignoring this folder in .eslintignore file with the line /src/api-client/*. Any help is really appreciated!
You can specifically tell ESLint to ignore specific files type
Ignore the folder /src/folder-name
Ignore the folder and everything inside it /src/folder-name/**
Ignore the folder and everything inside it of special file type /src/folder-name/**/*.js
I could not find a specific solution but this worked for me.
I needed to disable some react-app rules in a specific folder. So I added this in my packages.json and it ignores the folder. Not sure if there was a way to disable all rules maybe "*" but not sure.
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"src/modules/template/*"
],
"rules": {
"no-unused-vars": "off"
}
}
]
},
I want to add the following babel configuration in react-scripts I don't want to eject from cra I want to keep using it without ejecting. I see there is a way to fork the repo and add your custom configuration. But I want to know where exactly I can paste this.
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
There is, in theory, customize-cra, which lets you do things like override Babel plugins.
Here is a list of things you can do.
It doesn't appear to be maintained at time of writing, and for me didn't seem usable if your project is modules-based (ie import) as opposed to require.
CRA itself recommends forking their scripts as an alternative to ejecting, which is a pretty bold statement.
If you wish to override a property of one of the config files of React, you can just create that config file in your project's main directory and just set that single property, this will override that property in React's configuration. For babel you can just add it as a property in package.json like so:
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
If you run npm run-script eject you are going to get a copy of all the config that ReactJS uses for your project in the main directory of your project/config, from there you can edit whatever you like, keep version tracking of your changes and not mess with the react repository.
If you insist on forking it you can fork the main create-react-app repository from here, which contains the react-scripts here
I have a monorepo with the structure like below
babel.config.js
packages/
|---mobile/
|----package.json
|----src/index.js
|---desktop/
|----package.json
|----src/index.js
|---server/
|----package.json
|----src/index.js
So my babel configuration for mobile and desktop packages are same, whereas configuration for serverpackage is different.
Now, how can I have that configuration done? One solution, that I can think of is that to have a babel.config.js at the root of monorepo which would have configurations for mobile and desktop packages and a separate configuration for server package in a babel.config.js at server package level. I am not sure, can we even have multiple babel.config.js.
Yes, you can achieve what you asked by having multiple config files. It is mentioned as File-relative configuration in babel documentation.
Create a .babelrc or .babelrc.js file in each of your directories (mobile, desktop, server)
For more details look at https://babeljs.io/docs/en/next/config-files
Personally, I think using separate files would lead to confusion. Assuming you've set up your system in a way that works already and you're just asking how to specify different configs for different locations, you can use the "overrides" option. For example, your config can do
module.exports = {
overrides: [{
test: [
'./desktop',
'./mobile',
],
// put all your normal babel options for these folders here
}, {
test: [
'./server',
],
// put all your normal babel options for the server here
}],
};