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...
Related
I am new to Next and React. I have a use case where we have a nextJs application that uses react-native and react-native-web, let's call it A. A is intended to be used either for web and native through different build entry. I have another React app, call it B, that provides a web component to be used by A. Now I can build A and B successfully, but when I start A in web, I got
Module not found: Can't resolve '<B>'.
My IDE can't link this either. When I command click the import, it says nodule not installed even though I did.
I've checked that B's build artifacts do exist in A's node_module, and everything is referenced correctly in package-lock.json. Previously we were using react-native-builder-bob (link) to build B and it was working fine. But react-native-builder-bob is meant for React Native applications and we would like to have better control of the building behavior in the future. My guess is that there is probably some issue with transpiling B that Next is not picking up the dependency.
Here is my .babelrc in B:
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
.bablerc in A:
{
"env": {
"next": {
"presets": ["next/babel"],
"plugins": [["react-native-web", { "commonjs": true }]]
}
},
"presets": ["module:metro-react-native-babel-preset"]
}
I think I've got the same babel configuration that react-native-builder-bob is using. Is there anything I am missing?
Checked node_module folder that build artifacts exist.
Everything is correctly referenced.
Works fine with bob build
The react-native-builder-bob configuration is:
"react-native-builder-bob": {
"source": "src",
"output": "lib",
"targets": [
"commonjs",
"module",
[
"typescript",
{
"project": "tsconfig.json"
}
]
]
},
How should I change the configs to make it work?
I don't know what is going on with my PC but every time I create the NextJS application and run development. It will return this error
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
TypeError: Cannot read property 'config' of undefined
(node:20136) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
wait - compiling /_error (client and server)...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
TypeError: Cannot read property 'config' of undefined
at runMicrotasks (<anonymous>)
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack_' -> 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack'
I can't find any cause of this error on my project because it happened after I run yarn create-next-app and yarn dev. Thank you in advance.
Create a postcss.config.js file in the root directory of my NextJS project, fixed it for me.
Example code
module.exports = {
plugins: {
},
}
I manage to create the nextJS project on Users/ directory and it turns out to fix the error. Before that, I created the project outside of Users/ directory (directly on C: and create folder on there). So maybe it was a permission thing that make the project can't run.
I dont really know why, but I installed postcss-loader, css-loader and also created a config file for postcss, postcss.config.js and then the server ran successfully!!
try out that too, I think postcss.config.js is the problem
I was facing the same problem and i fixed it by restarting the IDE AND IT JUST WORK !!
I got a very similar error while updating Tailwind from v2 to v3: TypeError: Cannot read property 'config' of undefined. This was also caused by the postcss.config.js file, as others have suggested. I needed to remove '#tailwindcss/jit': {} from the plugins section. My working config is now:
module.exports = {
plugins: {
autoprefixer: {},
},
}
Run this command in CLI : npm install postcss-flexbugs-fixes postcss-preset-env --save-exact
in postcss.config.js file , write following code:
module.exports={
"plugins" :[
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
and you are done ... this worked for me.
Need to create a postcss.config.js file in your root directory if it isnt there from init.
"PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more." from postcss Github
postcss.config.js:
module.exports = {
plugins: {
},
}
I followed the instructions of this tutorial (https://youtu.be/KFyRLxiRKAc) and rewatched it several times but somehow it won't work for me. After I reopen the folder in the devcontainer and run npm start, the app is loading for several minutes until the browser opens localhost:3000 and presents the app. Now if I'm editing Code of the app, like changing the text of the create-react-app it won't reload at all. To detect changes I would have to restart the container but even that would take several minutes.
How can I solve the issue?
EDIT: I already tried setting CHOKIDAR_USEPOLLING=true and FAST_REFRESH=false but neither of them makes a difference
.devcontainer/.env
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
.devcontainer/devcontainer.json
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "16-bullseye"
}
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
"forwardPorts": [
3000
],
"postCreateCommand": "npm install && npm start",
"runArgs": [
"--env-file",
".devcontainer/.env"
]
}
.devcontainer/Dockerfile
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
You should do little bit of search in this forum. I'm quoting the answer:
Adding a .env file in the base path of the project and inside add
FAST_REFRESH=false.
This disables fast refresh and returns to hot reload.
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 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.