When I change HTML in template tag in a Vue + Vite project, I'm getting an error:
ReferenceError: can't access lexical declaration 'ComponentName' before
initialization
and
[hmr] Failed to reload /src/views/ComponentName.vue. This could be due
to syntax errors or importing non-existent modules. (see errors above)
This is true only for some components/views and only regards template, the script and style tags don't cause the erorr to happen. I cannot find any regularity in this, like it only affects a random number of components.
Related
How can I use monaco in my electron app? out this example: What's the proper way to do that? i'm open to new suggestions. I throughout into building a micro frontends but it's not that nice in react/electron and in the end i would have to include the final index output file using iframe. I wish I could use something we do with dlls in desktop application. note: i'm new to react and electron, perdon mystakes that seems so simple.
Well, I tried to "merge" as needed both webpack configs. Is this the way to go? so far i couldn't make it. I added:
resolve: {
alias: {
'vscode': require.resolve('#codingame/monaco-languageclient/lib/vscode-compatibility')
}
but it cannot find the vscode module, i'm getting the error:
Module not found: Can't resolve 'vscode' in 'C:\Users\jjj\Desktop\merge\Newton\node_modules\vscode-languageclient\lib\common' even tho the package is installed.
I also tried to add "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js' in the entry section but I got the error:
An unhandled error has occurred inside Forge:
Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915)
Error: Conflict: Multiple chunks emit assets to the same filename index.js (chunks 179 and 915)
I did plan to -- assuming it's the proper way to go ---, once managed to fix this webpackes merge, I'd include the main file with the contents:
require('monaco-editor');
(self as any).MonacoEnvironment = {
getWorkerUrl: () => './editor.worker.bundle.js'
}
require('./client');
then have
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
somewhere to show the editor and the <script src="main.bundle.js"></script> wouldn't be needed due to the fact it would be included in the webscript's output javascript bundle file, used elsewhere by the entire application.
Various errors may occur depending on the bundler configuration, so I made it simple example by referring to codes monaco-editor and monaco-languageclient. Both repositories work after build, so I separated the main process and renderer process folders to avoid overlapping outputs. Maybe this is related to Forge's error.
I created an Electron renderer code using monaco-languageclient's client code, and in the main process, run monaco-languageclient's server. Therefore, both processes must share the same web socket port. You can also erase the following lines and run LanguageServer externally.
Here is an example without the iframe.
I have an issue where a 3rd-party library is using some valid CSS parser features that are not available in JSDOM, and I'd just like to suppress those kinds of errors. But given that I'm using JSDOM through Jest, I'm not quite sure how to do that. I looked at the testEnvironmentOptions in the Jest docs, but I don't know what options to set.
The error message is essentially the following:
Error: Could not parse CSS stylesheet
at exports.createStylesheet (node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:35:21)
at HTMLStyleElementImpl._updateAStyleBlock (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
at HTMLStyleElementImpl._childTextContentChangeSteps (node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:37:12)
at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:225:14)
at HTMLStyleElementImpl.insertBefore (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:202:14)
at HTMLStyleElementImpl.appendChild (node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:327:17)
at HTMLToDOM._parseWithParse5 (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:60:21)
at HTMLToDOM._doParse (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:47:42)
at HTMLToDOM.appendToNode (node_modules/jsdom/lib/jsdom/browser/htmltodom.js:37:17)
at setInnerHTML (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:40:25)
at HTMLStyleElementImpl.set innerHTML [as innerHTML] (node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:211:5)
at HTMLStyleElement.set [as innerHTML] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:874:29)
at node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1
at Object.<anonymous> (node_modules/sweetalert2/dist/sweetalert2.all.js:1978:1)
It also seems that it's related to the SweetAlert2 library.
Jest Docs for testEnvironmentOptions
JSDOM Issue
The story is:
In our firm we're slowly trying to adjust our huge application to use dynamic AMD module loader. We can't do it all at once, this is why we do it in steps: firstly we wish to rewrite all javascript into typescript using AMD requires and 'fake' modularity using almond.js. After we rewrite everything, we'll switch to real dynamic module loader.
Here comes the problem
When we include almond on the page, following error is thrown:
almond.js:414 Uncaught Error: See almond README: incorrect module build, no module name
at define (almond.js:414)
at plotly.js:7
at plotly.js:7
It comes from several libraries, not just plotly. I managed to track it down, and it turns out that almond introduces define() which takes 3 required parameters, while plotly (and some other libraries) calls define() using one or two of them:
Plotly:
if (typeof define==="function" && define.amd ) {
define([],f)
}
Almond:
define = function (name, deps, callback) {
if (typeof name !== 'string') {
throw new Error('See almond README: incorrect module build, no module name');
}
(...)
Question:
Do you have any idea how to approach to solve this problem? We can load almond.js after Plotly.js, but we'd like to find better solution and use Plotly in conjuction with almond. Is that even possible?
As Almond's README states:
Only useful for built/bundled AMD modules, does not do dynamic loading.
Emphasis added. The form of define without a string giving the module name as the first argument is used in files that have not been through a building or bundling process. An AMD bundler will take the define call and add the module name as the first parameter when it does the bundling. The files you refer to have not been included in a bundle, so they lack the module name.
Solution: use an AMD bundler, like r.js to bundle your modules into a single bundle that Almond will use.
I've been using angular2-mdl for a while and it's brilliant, now I want to also use #angular2-mdl-ext on a project using systemjs but am having trouble and get errors indicating mdl-select and mdl-option is not known in component. I did an import of MdlSelectModule on the component but it does not help.
How should I specify this in app.module.ts and and systemjs.config.js, all attempts at getting it to resolve have failed thus far.
I tried import MdlSelectModule in app.module.ts but keep etting a 404 error which tells me systemjs is not configured properly....?
An example indicatig how to specify in systemjs.config.js and app.module.ts would be appreciated.
Thanks,
Resolved this by setting mapping in systemjs as follows
'#angular2-mdl-ext/select': 'npm:#angular2-mdl-ext/select/index.umd.js',
I get the following error when trying to do server-side rendering with components that reference window. For example when I include slick-carousel (https://github.com/kenwheeler/slick) I get the following error:
var Slick = window.Slick || {};
^
ReferenceError: window is not defined
I know its because window is not defined when trying to do SSR, but don't know what the best strategy is to avoid the error.
Basically components should not depend on DOM. Only, some hook methods such as componentDidMount can, where you use .offsetHeight and modify style or whatever. That's why react and react-dom packages are separated.
Instead of passing object by window.XXX, think about using decent dependency solution like require.