We're attempting to upgrade to angular 11 and are finding that Quill.import results in errors:
An error occurred during the build:
Error: The target entry-point "#project/project-pattern-lib" has missing dependencies:
- core/module
- blots/block/embed
- modules/clipboard
- delta
- formats/link
at TargetedEntryPointFinder.findEntryPoints (D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
at D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
r.js:28:29)
at SyncLocker.lock (D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\src\locking\sync_locker.js:34:24)
at SingleProcessExecutorSync.execute (D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:27)
at Object.mainNgcc (D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\src\main.js:74:25)
at Object.process (D:\Dev\Git_project\project\node_modules\#angular\compiler-cli\ngcc\index.js:29:23)
at NgccProcessor.processModule (D:\Dev\Git_project\project\node_modules\#ngtools\webpack\src\ngcc_processor.js:163:16)
at D:\Dev\Git_project\project\node_modules\#ngtools\webpack\src\ivy\host.js:109:18
at D:\Dev\Git_project\project\node_modules\#ngtools\webpack\src\ivy\host.js:39:24
at Array.map (<anonymous>)
at Object.host.resolveModuleNames (D:\Dev\Git_project\project\node_modules\#ngtools\webpack\src\ivy\host.js:37:32)
at actualResolveModuleNamesWorker (D:\Dev\Git_project\project\node_modules\typescript\lib\typescript.js:102904:133)
at resolveModuleNamesWorker (D:\Dev\Git_project\project\node_modules\typescript\lib\typescript.js:103126:26)
at resolveModuleNamesReusingOldState (D:\Dev\Git_project\project\node_modules\typescript\lib\typescript.js:103200:24)
- core/module
- blots/block/embed
- modules/clipboard
- delta
- formats/link
See "C:\Users\Name\AppData\Local\Temp\ng-nIGMuY\angular-errors.log" for further details.
We can't seem to find anything in terms of a fix out there. All of these "missing dependencies" are referenced in the code like:
import Quill from "quill";
const BlockEmbed = Quill.import(
"blots/block/embed"
) as typeof Parchment.default.Embed;
Figured out there is a weird syntax issue here and the following solves it:
const blockPath = 'blots/block/embed';
const BlockEmbed = Quill.import(blockPath);
Don't know why this fixes it.
Related
10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.
I'm following the howtographql + React tutorial right now. I'm currently at the beginning of the tutorial when I have to define my queries, mutation and stuff in my schema.graphql. But according to the tutorial, I have to import prisma.graphql from the generatedfolder by writing the following line :
# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"
I indeed generated the serverfolder which contains everything except this file that is supposed to be generated as well I guess.
Apparently, I should be able to run the server using yarn startbut when I'm doing so, I have this message :
Error: Cannot find module './generated/prisma.graphql'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:609:15)
at resolveFileName (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:29:39)
at resolveFrom (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:43:9)
at module.exports (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/resolve-from/index.js:46:41)
at resolveModuleFilePath (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:150:24)
at /Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:187:30
at Array.forEach (<anonymous>)
at collectDefinitions (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:185:16)
at Object.importSchema (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-import/dist/index.js:73:14)
at mergeTypeDefs (/Users/hamza/tfeScreen/reactapp/react-apollo/server/node_modules/graphql-yoga/dist/index.js:412:37)
I don't understand what I'm doing wrong...
Do you guys have any idea ?
I have a simple NodeJS file named index.js includes the following lines:
const {Auth0Lock} = require('auth0-lock');
var lock = new Auth0Lock( MyClientId, MyDomain);
lock.show();
I used npm install auth0-lock to install auth0lock and have the proper package.json file. When I run this piece of code by node index.js, I get the following error:
C:\Users\....\node_modules\auth0-lock\lib\utils\url_utils.js:6
var parser = global.document.createElement('a');
^
TypeError: Cannot read property 'createElement' of undefined
Also, when I change const {Auth0Lock} = require('auth0-lock') to const Auth0Lock = require('auth0-lock'), I get the following error:
var lock = new Auth0Lock(
^
TypeError: Auth0Lock is not a constructor
Would you please help me to fix this error and have an auth0lock authentication dialog?
If you are using auth0-lock with NodeJS you need to use a bundler like webpack or browserify.
Please refer to this repo: for setup configuration with webpack.
Alternativel
I just started working on a project that was developed by another developer (reactjs project) , however when I try to start the project I get this error in the browser console :
Uncaught ReferenceError: Popper is not defined
The error is pointing to a specific line of course which is in the file :
node_modules/bootstrap/dist/js/bootstrap.js
the error in the last line of the following :
var bootstrap = (function (exports,$,Popper) {
'use strict';
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
// a lot of generated code
}({},$,Popper));
As I said earlier the error shows up pointing to the last line with the error mentioned before
Note : I have searched all other possible answers here in stack overflow but with no luck , including this answer Bootstrap 4: Uncaught ReferenceError: Popper is not defined so please it is not a duplicate
The problem was not in the code , the problem was that I had an old version of nodejs and npm on my machine I thought this might help someone in the future.
I am trying to use the angular binding feature available in Apache Zeppelin in the following code:
val ab10 = z.sqlContext.sql("select "+ z.angular("selectVari0") + " from MyDF")
ab10.toDF.registerTempTable("ab0")
z.angularBind("abb0", ab10)
val selvar = z.getInterpreterContext()
z.angularUnwatch("abb0")
z.angularWatch("abb0", (before:Object, after:Object) => {
z.run(15, selvar)
})
I get the following error:
ab10: org.apache.spark.sql.DataFrame = [BMI: double]
warning: there was one deprecation warning; re-run with -deprecation for details
selvar: org.apache.zeppelin.interpreter.InterpreterContext = org.apache.zeppelin.interpreter.InterpreterContext#216b8218
<console>:31: error: overloaded method value run with alternatives:
(x$1: java.util.List[Object],x$2: org.apache.zeppelin.interpreter.InterpreterContext)Unit <and>
(x$1: String,x$2: String)Unit
cannot be applied to (Int, org.apache.zeppelin.interpreter.InterpreterContext)
z.run(15, selvar)
^
I tried anther example from here. I got similar errors. I was not able to find any documentation to fix this error.
As stated in error message, you have to overloaded .run methods, with following signatures:
(x$1: java.util.List[Object],x$2: org.apache.zeppelin.interpreter.InterpreterContext)Unit <and>
(x$1: String,x$2: String)Unit
Please, try to call it like this:
import collection.JavaConverters._
z.run(List(15).asJava, selvar)