Update 1 : Updated the latest working solution to #Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
Parsing error: Cannot find module 'next/babel'
Require stack:
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\config-array-factory.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.
In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.
TL;DR - see this answer which points to this blog. This fixed it for me.
Some Details
For example, if I have:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
But then I get the same error you're experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.
If that's the case for you as well, then what you need (as described in the links above) is to:
Create a workspace config
Specify folders where you need ESLint to run
You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
Note: You don't need to create extra .babelrc file
In your NextJS Project you have this file , named .eslintrc.json,
In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note: If you only replace with
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.
For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.
{
"extends": ["next/core-web-vitals", "prettier"]
}
In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.
{
"eslint.packageManager": "pnpm"
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p and search for ESLint: Restart ESLint Server.
It worked for me by just adding prettier in .eslintrc file.
{
"extends": ["next", "prettier"]
}
Try updating the .eslintrc.json file to
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already
npm install eslint-plugin-prettier#latest --save-dev
Don't have to include .babelrc file as it will replace Nextjs SWC compiler
S
I had this same problem - Close the IDE and reopen it with the project folder !!
My Problem
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.
My Solution
add this into the ESLint config file:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.
Upgrade React version to latest
Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.
To upgrade you can run the following command:
npm install react#latest react-dom#latest
Or using yarn:
yarn add react#latest react-dom#latest
Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:
npm install next#latest
or
yarn add next#latest
Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.
Add prettier to your project
yarn add --dev eslint-config-prettier
Update your eslint config as follows
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.
ctrl + shift + p
TypeScript: Restart TS server
Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO
In my project, i just run yarn add #babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
it works, and npm run lint works fine too.
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue's gone.
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.
Here is my grunt-sass declaration.
sass: {
site: {
options: {
implementation: 'dart-sass',
style: 'compressed',
noCache: true
},
dist: {
files: {
'dist/css/jk.css' : 'src/sass/jk.scss'
}
}
}
},
When I run grunt, or grunt triggers on the watch clause, I get this output.
Running "sass:site" (sass) task
The file "dist/css/jk.css" is never created. I get no other output from Grunt. If I run sass from the command line, the file completes without any trouble.
I'm not sure why it's failing, as it's failing silently. If nothing else, I'd love to know how to enable verbose failures.
UPDATE. Tried running grunt with -v, this is the output.
Running "sass:site" (sass) task
Verifying property sass.site exists in config...OK
File: [no files]
Options: precision=10, implementation="dart-sass", style="compressed", noCache
undefined
It looks like I'm not declaring the files correctly. I'm quite certain the paths are correct. If I run sass from the command line with the same paths it succeeds as expected.
Adding -v or --verbose has returned errors. I'm still not able to compile sass, but the issue of the missing errors is resolved.
Below is my gruntfile.js . I can run the protractor tests on UI using 'grunt protractor:run command.
However, when i try running command ' grunt protractor-xvfb' so that i can run my tests in headless mode, the browser still launches and tests execute in the same way as using grunt protractor:run command.
What i am expecting is that the tests run in background.
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
protractor: {
options: {
keepAlive: true,
configFile: "../spike-protractor/app/Conf/conf.js",
noColor: false,
args: {
baseUrl: 'https://xxx/xxx/'
}
},
run: {}
},
shell: {
xvfb: {
command: 'Xvfb :99 -ac -screen 0 1600x1200x24',
options: {
async: true
}
}
},
env: {
xvfb: {
DISPLAY: ':99'
}
}
});
grunt.loadNpmTasks('grunt-protractor-runner');
grunt.loadNpmTasks('grunt-shell-spawn');
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-protractor-webdriver');
grunt.registerTask('protractor-chrome', ['protractor:chrome']);
grunt.registerTask('protractor-xvfb', [
'shell:xvfb',
'env:xvfb',
'protractor:run',
'shell:xvfb:kill'
]);
}
I tried commenting out line code 'protractor:run'from grunt.registerTask and running grunt protractor-xvfb gives me the below output which is correct as per code. This executes so fast as if nothing happened. i think there is something that i am missing in config/code to achieve headless testing .
Running "shell:xvfb" (shell) task
Running "env:xvfb" (env) task
Running "shell:xvfb:kill" (shell) task
Done.
how do i actually proceed on doing headless testing using xvfb + grunt+ protractor ?
Is probably more practical for your use case to go with Zalenium if you want headless Chrome or Firefox testing, video recording, VNC live preview, local dashboard.html among other features.
You can get started with the one-liner:
curl -sSL https://raw.githubusercontent.com/dosel/t/i/p | bash -s start
And/or also watch the presentation:
https://www.youtube.com/watch?v=W5qMsVrob6I
You did not specify to run your conf.js properly.
Remove the part
grunt.registerTask('protractor-chrome', ['protractor:chrome']);
from your gruntfile.js specified in your question.
Edit your gruntfile.js and add below:
grunt.registerTask('protractor-xvfb', [
'shell:xvfb',
'env:xvfb',
'protractor:run',
'shell:xvfb:kill'
]);
Once you add it if you want to run without xvfb use command "grunt protractor:run".
If you want to run using xvfb then use command "grunt protractor-xvfb"
I found a workaround for this to use the below command and specify conf.js -
xvfb-run --server-args='-screen 0, 1600x1200x24' protractor app/Conf/conf.js
Doing this allows to me run my tests in headless mode.
Even if you are not using Grunt in your project, you can directly do npm install xvfb and use this command... pass it to teamcity command line parameters and it will work there as well.
Here's an example GruntFile for a "clean" task (using the grunt-contrib-clean plugin):
clean: {
dry: {
src: ["build/css"],
options: {
'no-write': true
}
}
}
Running grunt clean:dry would output:
Running "clean:dry" (clean) task
>> 2 paths cleaned.
Done, without errors.
Using grunt clean:dry -v, gives me what I want:
Running "clean:dry" (clean) task
Not actually cleaning live/css...
Not actually cleaning live/js...
...but it also displays a bunch of configuration logs that have nothing to do with the current task. Can I use the --verbose flag (or something else) to show the full output of a task without having to scroll through all of the non-related config logs?
PS: My other plugins suffer from the same problem, displaying only a single line of output when their documentation indicates that I should expect more.
(Related questions: Logging from grunt-contrib-jasmine and How can I force JSHint running in grunt to always use the --verbose flag do not answer this question).
There are some insights into this.
grunt.initConfig({
verbosity: {
default: {
options: { mode: 'dot' }, // normal, oneline, dot, hidden
tasks: ['groundskeeper', 'requirejs']
}
}
grunt.registerTask( '_start', ['verbosity:default', 'projectInfo'] );
I faced a trouble attempting to clean distributive directory on remote file server.
I have a folder and access it via double slash notation like
//foldername/projectname/subfolder/
I've configured my Gruntfile.js for grunt-contrib-clean task like this:
clean: {
files: [
{
src: ['//foldername/projectname/subfolder/']
}
]
}
In my tasks list I also have a grunt-contrib-copy task which launches after grunt-contrib-clean to load distributive and this task uses the same src path to folder on network.
So when i launch the grunt - "clean" task actually doesn't clean the subfolder but the "copy" succesfully copies files.
When I try to launch grunt with --verbose command i have a next log:
Running "clean" (clean) task
Verifying property clean exists in config...OK
Files: [no src]
Options: force=false, no-write=false
Options: force=false, no-write=false
So it seems that task can't find the files but the reason is undefined.
Access to server is authorized and i'm enter credentials via default Windows prompt. And I have credentials for changing/deleting folder.
Can anybody help me and answer why the clean task doesn't find my directory.
Thanks!
It does. Here is an example:
dev: {
options: {
'force': true
},
expand: true,
cwd: '//someserver/someshare/somepath',
src: '{,*/}*'
},
Use force=true to go clean the subfolder:
force
Type: Boolean
Default: false
This overrides this task from blocking deletion of folders outside current working dir (CWD). Use with caution.
and no-write=true to get verbose output.
Also, check the version to see if the Windows bug has been fixed:
2013-07-15 v0.5.0 Use rimraf directly, version 2.2.1 to fix issue on Windows. Add no-write option to mimic grunt.file.delete behavior.
References
npmjs: grunt-contrib-clean
grunt-contrib-clean: Failing on Windows 8