I have a Nextjs app using jest and react-testing-library for the test, I add the .eslintrc file with npx .eslintrc --init command to my project.
whenever I lint my project, I get the following error:
.eslintrc.js:
module.exports = {
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"next",
"next/core-web-vitals"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project":"./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
and error:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Error: Failed to load config "next" to extend from.
Referenced from: D:\web\reactjs\react-testing\react-testing-app\.eslintrc.js
Resolved, after installing this package, the code will run without error:
npm i --save-dev eslint-config-next
For a misterious reason running npm audit fix --force changed my package.json from:
"eslint-config-next": "12.0.1"
to:
"eslint-config-next": "^0.2.4"
I had to change it manually and the error went away.
Related
I've been working on this app locally with Next.js. It deploys and builds fine locally, but I'm having issues getting it to work when deploying it to Fleek and Vercel.
On Fleek, I have configured the deploy and build settings for a Next.js app, but I'm still running into this issue.
When I try to deploy and build to the live server on Fleek, I get the following error.
2:39:21 PM 12/11/2022: Failed to compile.
2:39:21 PM 12/11/2022: ./components/Pool.js
2:39:21 PM 12/11/2022: Module not found: Can't resolve './Withdraw' in '/workspace/components'
2:39:21 PM 12/11/2022: Import trace for requested module:
2:39:21 PM 12/11/2022: ./pages/Stake.js
2:39:21 PM 12/11/2022: > Build failed because of webpack errors
2:39:21 PM 12/11/2022: error Command failed with exit code 1.
The next.config.js file:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
eslint: {
ignoreDuringBuilds: true,
},
resolve: {
extensions: ["", ".js", ".jsx"],
},
}
module.exports = nextConfig
The package.json file:
{
"name": "gwin-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.6.6",
"#heroicons/react": "^1.0.6",
"moralis": "^1.9.0",
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hot-toast": "^2.3.0",
"react-moralis": "^1.4.0",
"tw-elements": "^1.0.0-alpha12",
"web3": "^1.7.5",
"web3uikit": "^0.1.170"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.20.0",
"eslint-config-next": "12.2.2",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6"
}
}
Here is the import in Pool.js
import Withdraw from "./Withdraw"
Withdraw.js looks like this
#imports
const Withdraw = ({
#props
}) => {
#stuff
}
export default Withdraw
I've tried:
ignoring eslint in the next.config.js.
changing the path for Withdraw.js from '../components/Withdraw' to './Withdraw' (Pool.js and Withdraw.js are both in the components folder). I thought maybe a different path would help.
yarn build && yarn start (locally, which works)
Checking that component is "Withdraw" and "Withdraw.js" is the file.
resolving ext. in next.config.js
This is a case sensitivity issue with git and operating systems.
Find more info here https://github.com/vercel/next.js/issues/9482 .
#jamesmosier pointed out the following:
Try changing the name of the file completely and test again. There can be case sensitivity issues with git and operating systems, especially if you commit a file as one case (i.e. componentOne.js) and then change it later (to something like ComponentOne.js). If that works, commit that new file name and then you can change it back to the original filename and commit that again.
This error is very hard to spot, because there is no indication of anything wrong in the IDE, everything appears to be 100% correct, but behind the scenes there are case sensitivity issues.
So do the following:
Rename the module Withdraw.js and all of the references to something
entirely new
Commit the changes
Rename everything back to the desired names and commit/push your changes
After that, the issue is resolved and the app deploys.
This is the error message I got when I first run 'vagrant provision' (after command 'vagrant up' blocked in 'Mounting NFS shared folders...') under the trellis directory:
TASK [wordpress-install : Install Dependencies with Composer] ******************
System info:
Ansible 2.9.11; Vagrant 2.2.9; Linux
Trellis version (per changelog): "Removes ID from Lets Encrypt bundled certificate and make filename stable"
---------------------------------------------------
Composer could not find a composer.json file in /srv/www/example.com/current
To initialize a project, please create a composer.json file
as described in the https://getcomposer.org/ "Getting Started"
section failed: [default] (item=example.com) =>
{
"ansible_loop_var": "item",
"changed": false,
"item": {
"key": "example.com",
"value": {
"admin_email": "admin#example.test",
"cache": {
"enabled": false
},
"local_path": "../site",
"multisite": {
"enabled": false
},
"site_hosts": [
{
"canonical": "example.test",
"redirects": [
"www.example.test"
]
}
],
"ssl": {
"enabled": false,
"provider": "self-signed"
}
}
},
"stdout": "Composer could not find a composer.json file in /srv/www/example.com/current\nTo initialize a project, please create a composer.json file as described in the https://getcomposer.org/ \"Getting Started\" section\n",
"stdout_lines": [
"Composer could not find a composer.json file in /srv/www/example.com/current",
"To initialize a project, please create a composer.json file as described in the https://getcomposer.org/ \"Getting Started\" section"
]
}
PLAY RECAP *********************************************************************
default : ok=125 changed=83 unreachable=0 failed=1 skipped=34 rescued=0 ignored=0
Ansible failed to complete successfully. Any error output should be
visible above. Please fix these errors and try again.
How do I fix this? Where to find the right composer.json for Trellis, Bedrock, and Sage for local development on Linux?
Ubuntu 19.10
I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config.
below is my package.json
{
"name": "feedback-clientlibs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "hkesani",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
and my webpack.config.js is as follows
var path = require('path');
module.export ={
entry : './js/feedback.js',
mode:'none',
output : {
filename:'feedback.js',
path:path.resolve(__dirname,'webpack.modules')
},
module:{
rules:[
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
I have few css imports into the js files as below
import '../css/feedback.css'
import '../css/all.css'
whenever i run a build (i have cssloader installed) below is what i see
$ npm run build
> feedback-clientlibs#1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack
Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./css/feedback.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #feedback {
| height: 5em;
| padding: 10px 22px 8px 22px;
# ./src/index.js 1:0-28
ERROR in ./css/all.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ratings-stars {
| margin-bottom: 15px;
| height: 13px;
# ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log
Any help is appreciated.
Thanks
Have you tried it with style-loader?
npm install --save-dev style-loader
And update your webpack.config.js rules to:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
I also notice you did not supply a production flag for your webpack command I would update that script to run:
webpack --mode production -p
Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.
path: path.resolve(__dirname,'webpack_modules')
I think it's defined [here]enter link description here.
It can also be inspected via node:
const webpack = require('webpack')
new webpack.WebpackOptionsDefaulter()
I have been getting this error for days now and I am not sure how to fix it.
When I run the "dev" package in Node Task Runner Explorer it gives this error.
It seems to be something to do with different versions of node and webpack not getting along. the error message, and my packages.json file are below, as is the link to the article I am working through.
setting-up-a-react-environment-for-aspnet-mvc-44la
Error Message
C:\DevFolder\MyApplication> cmd.exe /c npm run dev --color=always
asp.net#1.0.0 dev C:\DevFolder\MyApplication
webpack --mode development --watch C:\DevFolder\MyApplication\node_modules\webpack\bin\webpack.js:90 let
notify = ^^^ SyntaxError: Block-scoped declarations (let, const,
function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:18)
at node.js:980:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! asp.net#1.0.0 dev: `webpack --mode development --watch` npm ERR!
Exit status 1 npm ERR! npm ERR! Failed at the asp.net#1.0.0 dev
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
package.json
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"build": "webpack",
"dev": "webpack --mode development --watch"
},
"devDependencies": {
"#babel/cli": "^7.7.5",
"#babel/core": "^7.7.5",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/preset-env": "^7.7.6",
"#babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-notifier": "^1.8.0"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"npm": "6.12.1",
"node" : "5.3.0"
}
}
Webpack Config
"use strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
entry: "./Scripts/ApplicationReact/ApplicationReact.js",
output: {
path: path.resolve(__dirname, "./Scripts/"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
Summary
Don't install the Node.js nuget package, it breaks your project and it will remain broken after you have removed it. Just let the general installation of node do the work.
Detail
When in any other directory, if I did "node -v" in the command line and it would return version 12.13.1
When in my project folder if I did "node -v" it would return 5.3.0
When I removed the Node.js nuget package I thought it would default to the system version but instead it just said "cannot find the file or command specified" (or something along those lines).
I had copied the whole of our software to another folder for the purposes of this exercise. I just branched to another folder and this time the "node -v" was coming back with 12.13.1
I carried on with the exercise and the error did not appear. I am not sure how to fix it once you get into this state.
Better answers?
This isn't a great answer and I won't mark it as the answer. If anyone can provide a plausible explanation for what is going on here, and a way to cure your project from the nuget node lurgy, I will mark it as the answer.
After I package an electron app with electron-packager using this commande from npm scripts :
electron-packager . Gestion-ecole-sportive
--overwrite --platform=win32 --arch=ia32 --asar
--icon=assets/image/icons/conApp.ico --prune=true
--out=release-builds --version-string.CompanyName=CE
--version-string.FileDescription=CE
--version-string.ProductName="Gestion d'école sportive"
Knowing that it's the same machine that I build the app on it, and it was working fine in the development process
And when I start the app, it's shows, but I found an error of sqlite3 in the console of the dev tools :
Uncaught Error: Please install sqlite3 package manually
and it's coming from sequelize configuration line code :
sequelize = new Sequelize({
dialect: 'sqlite',
storage: 'config/db/db_ecole.db'
})
devDependencies and dependencies :
"devDependencies": {
"electron": "^5.0.8",
"electron-packager": "^14.0.6",
"electron-rebuild": "^1.8.5",
"node-gyp": "^5.0.3"
},
"dependencies": {
"bootstrap": "^4.3.1",
"datatables.net-bs4": "^1.10.19",
"exceljs": "^2.0.1",
"gijgo": "^1.9.13",
"jquery": "^3.4.1",
"popper": "^1.0.1",
"popper.js": "^1.14.7",
"sequelize": "^5.19.0",
"sqlite3": "^4.0.9"
}
Maybe you can try an electron rebuild? Something along the lines of:
./node_modules/.bin/electron-rebuild -w sqlite3
Hopefully that helps!