I am getting this error during build time because of Next.js custom document.
So, during the build time I am getting an error saying, Also I have the _document.js in pages/_document.js.
next/document should not be imported outside of pages/_document.js. See https://nextjs.org/docs/messages/no-document-import-in-page.
Please help me!
EDIT
Update next and eslint-config-next to version 11.1.3-canary.7
A known issue that is fixed in #28596
If you don't want to update to the canary versions and still keep working normally just exclude it from your .eslintrc.json rules:
"rules": {
"#next/next/no-document-import-in-page": "off"
}
More info on how to exclude rules here: disabling-rules
This is a known issue from the latest Nextjs update
Quote from Nextjs team:
This is fixed in #28745 and works in 11.1.3-canary.7. Please upgrade to that version if you're experiencing this issue and if you're still seeing the same error, make sure to clear your cache (next lint --no-cache).
Conclude:
You need to update Nextjs and eslint-config-next to 11.1.3-canary.7 and don't forget to clear cache next lint --no-cache
Related
I have a project in Angular 13. I want to use quillJS and I want to add tables so I tried to install quill-better-table in my project.
For some reason the package is not working. I used the web inspector and found this to be the issue:
ERROR TypeError: quill.keyboard.bindings.Backspace is undefined
The problem seems to be located at: quill_better_table_BetterTable quill-better-table.js:2979 and when I check the debugger I can see the line:
let thisBinding = quill.keyboard.bindings['Backspace'].pop();
quill.keyboard.bindings['Backspace'].splice(0, 1, thisBinding); // add Matchers to match and render quill-better-table for initialization
// or pasting
I found a github repo that had this issue fixed:
https://github.com/LosEcher/quill-better-table
The problem I'm running into is I dont know how to get that particular repo into my project. I have tried updating the current package and webpack continues to load the old one. I've tried clearing the npm cache and reinstalling the node packages.
I found this guide: https://whatapalaver.co.uk/npm-dependency which seems to indicate what I should do but I'm not quite npm literate enough to figure it out. Specifically, I dont know that I understand how to create the NPM link.
I'm looking for advice as to how to fix this package. I am going to be reading up on NPM link but I figured if there was another easier way to get this fixed then I would ask. I can load that repo into my node module folder, but I dont know how to make webpack reload the updated module.
Thanks in advance for the help, let me know what details I for got to add.
I'd like to use enzyme to test my React-Native components in Expo managed project.
I follow the docs for jest-expo-enzyme, but now I get:
Test environment found at "/Users/raarts/myproject/node_modules/jest-environment-enzyme/lib/index.js" does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".
My guess from here is that jest-environment-enzyme (last release 2 years ago), somehow needs to be updated for jest 27, but given jest-expo-enzyme was released 2 months ago, I figured I must be doing something wrong. Clueless on how to proceed.
Anybody has any advice?
This is a bug in enzyme. A workaround is provided in this comment.
The solution is to force upgrade jest-environment-jsdom package.
The better way to do it is via resolutions, if you are using Yarn, add this to your package.json:
"resolutions": {
"jest-environment-jsdom": "27.4.6"
},
Check for the latest version of jest-environment-jsdom and change it if necessary.
You can also do this in classic NPM using the npm-force-resolutions package.
Note: you may encounter other problems after fixing this one, if you get a setImmediate error see this comment
I am working on Next js project and using Jest and enzyme for testing, and for me I was able to fix this error by changing
testEnvironment: 'enzyme',
to
testEnvironment: 'jsdom',
in jest.config.js file.
I've found myself in a strange predicament—after a recent upgrade to my local app dependencies, the application breaks whenever I make reference to the node process object. Specifically it throws the following errors:
Babel Error: Cannot find module '#babel/plugin-proposal-logical-assignment-operators'
So far, I've tried to resolve this issue with a yarn add of the missing dependency, without success. Could anyone shed light on the issue at hand, or how I might be able to resolve it?
Thanks for your consideration.
I resolved this issue by deleting node_modules and running yarn install.
I have a problem with my Angular project build, and ultimately deployment to heroku. I'm using an old(ish) npm package called binary parser, which causes the following error on when I build / deploy to heroku:
Module not found: Error: Can't resolve 'console' in '/tmp/build_e75b87f248f44978f9537d83b3172254/node_modules/binary-parser/dist'
The binary-parser.js has a line require("console"); which is used in exactly one place, so local builds succeed and the application works perfectly, if only I remove console from that line altogether. But as, heroku installs node modules when deploying, this only helps when I manually build the prod version.
I have installed typings for binary-parser and for TS, and also included "types": ["node"] in both tsconfig.json and tsconfig.app.json compilerOptions.
As angular these days doesn't really allow for webpack configuration, I've tried adding global.console = global.console || require('console-browserify');
(or)
global.console = global.console || require('console');
to my polyfills, to no avail.
Any ideas on how to solve this? Do I need to configure a custom webpack to circumvent this? I'll gladly post additional information if necessary!
Here's a possible cause, may or may not be what you or others reading this question are experiencing...
My IDE's auto importing added import * as console from "console"; when I typed console.log.
Solution was of course to remove that import statement.
After trying for multiple hours to come up with the right configuration, the only solution I could come up with was forking the repo in question and changing tsconfig target from es5 to es6, which got rid of the console import altogether upon compilation.
I'm getting an error repeatedly when trying to build a new webpack project using vue-cli. I'm following along with the docs on the latest build (3.0.0-beta.11), also tried with an earlier version, which wasn't beta.
When I run yarn serve it attempts to start the dev server and build the project but fails here:
error in ./src/App.vue?vue&type=template&id=7ba5bd90
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:7051:13)
at formatWithCursor (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:10370:12)
at /Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31115:15
at Object.format (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31134:12)
at actuallyCompile (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:93:29)
at compileTemplate (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:26:16)
at Object.module.exports (/Users/cory/Code/chickadee/my-project/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)
# ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-194 1:0-194
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
About my setup
Mac OS
I'm running node v8.5.0
packages are installed with yarn
The Things I've Attempted
Different versions of vue-cli to generate a new project. The projects generate and install modules.
Tried removing the prettier module, but the error still seems to come up.
Tried reinstalling all modules.
What else might I try to get past this error?
Removing the current node_modules folder from the project, adding "prettier": "^1.12.1" to package.json and running npm install solved the issue.
Another option is to run npm install prettier#1.12.1 without removeing the node_modules folder before
Update:
For some users, verion 1.12.1 did not work
#Kivin proposed another solution that can be found here: vue webpack template missing parser
Known issue and it will be fixed in the next version of vue-cli
In prettier 1.13.0, default parser was removed with a minor version(used to be babylon)
Issue: https://github.com/vuejs/component-compiler-utils/issues/14
Issue at prettier repo: https://github.com/prettier/prettier/issues/4567
Sorry, we committed the age-old semver sin- we knew this was a breaking change, but because it would only affect a subset of our users, we didn't bump the major version, because we didn't want to create friction for our users to upgrade.
To get the old behavior, add parser: "babylon". You may also want to lock prettier to a specific version in your package.json.
Running npm install prettier#1.12.1 solved it for me. Thanks lsxliron.
Right now, I tried all the options..downloading and updgrading prettier...but none workied. Until I studied what happened carefully.
Apparently, the prettier team removed the default parser which was babylon and in so doing...broke the internet.
Just kidding.
Issue repo
The simplest solution, according to them would be to simply add the parser back.
This has been picked up by the Vue team and its expected to be shipped with the latest fix release.
If you are using Vue Loader/Yarn, dont even bother to try all the suggestions...I tried them all.
What fixed it for me was...go to
node_modules\vue-loader\lib\template-compiler ...open index.js and look for
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false})
}
and change the lines to:
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' })
}
Thats it!
Then once the issue got fixed, everything will just be rolled back and you will still be fine.
Try this...it will save you countless minutes of searches....
As already pointed out by the various resonses, you may need to rollback the version of the prettier package.
in your package.json file, you may need to force npm to use a version (i.e. remove the hat ^)
mine looks something like this
"devDependencies": {
"prettier": "1.12.1",
"typescript": "^2.6.1",
"vue": "^2.5.16",
"vue-styleguidist": "^1.4.4",
"vue-webpack-loaders": "^1.0.6",
"webpack": "^3.1.0"