I'm totally new to npm and node.js so please forgive me if I'm not giving the right detail. I'm writing a plugin for a website that uses an out-of-the-box framework in npm. It was working fine as I coded away happily, but at some point it started trying to compile a file that no longer exists.
I use npm run start to compile my html file (which contains all the javascript code as well) and get this error:
ℹ info Compiler will compile ./src/plugin.html
ℹ info Transpiling with babel
✖ error Error
SyntaxError: unknown: Unexpected token (555:3)
553 |
554 |
> 555 | });
| ^
What breaks my brain is that this simple syntax error is not present in ./src/plugin.html (I've quadruple checked this fact). This obvously pertains to an earlier version of the file.
Does npm have some kind of cache that would cause it to compile an older version of a file? I've noticed that if I remove most of the code, it compiles again, but when I replace the code it breaks again. It seems that if the file is somewhat similar to its cached version, it tries to compile the cached version and not the current version.
I've tried clearing the cache with npm --force cache clear but to no effect.
Any suggestions?
For anyone who has a similar problem with compiling code with npm, I discovered that my problem was indeed a simple syntax error. But it seems that npm became confused about what the compile error actually was. It was pointing to a line of code that did not exist in the file, and I have no idea where it got this from.
The syntax error that was the culprit in this particular case was a missing }; to close a wrapped set of functions.
So it seems that the lesson here is not to put too much trust in npm's ability to understand what syntax errors are inciting a compile error.
the only way I was able to get out of this scenario was:
rename the file
refactor the references to it, so it will compile
npm start
stop it
rename and refactor the file back to its original name
Do you try to use rebuild or something like that or npm cache clean insted of npm --force cache clear?
I had the same problem after a cancelled git rebase. The only way I could fix this was to change something in those files & revert the change after.
I recently faced this issue. If you are using typescript in your project, you may have used a wrong configuration in your tsconfig.json file that may have built the typescript files into their corresponding js files and these js files are the ones that runs every time you run the project.
for me clear catching my browser it works
Fixed by Pressing Ctrl+s !
For me vsc by default doesn't save automatically changed code like PyCharm.
Try to delete .next folder it will delete the catched files
Related
I am unable to npm start my old React projects (created in October and before, ex: https://github.com/DebojyotiRoy15/Calculator-app). When I try to do it, I get the following error:
I have tried various things suggested in stackoverflow to solve this error, like adding a .env file to the root, deleting package-lock, deleting node modules and then installing them. But still this error persists. Please help me to resolve this.
I managed to run your app without any issues, check it out here https://codesandbox.io/s/wizardly-dream-s5w2e. Your error is probably due to some package resolving behavior of Node.JS. Try renaming the C:\Users\Pavilion\node_modules\babel-jest", and if it didn't help then run npm i babel-jest --save-dev and reload your app again.
I've been trying to get the kotlinx.serialization library working with Kotlin/JS using the create-react-kotlin-app
However, I am not so familiar with the huge nodeJS and webpack mess.
I did the following:
1) Downloaded the kotlinx.serialization library from maven repository a located it aside the nodeJS dependencies, because there is so far no any npm module for this.
2) Modified the node_modules/#jetbrains/kotlin-webpack-plugin/plugin.js in order to compile my library, in particular I added this row to the prepareLibraries function:
opts.libraries.push(opts.packagesContents[0]["_where"]+"/lib/kotlinx-serialization-runtime-js/build/classes/main/kotlinx-serialization-runtime-js.js")
3) Modified the last line in node_modules/kotlin-compiler/bin/kotlinc in order to enable the the serialization compiler plugin:
${JAVACMD:=java}" $JAVA_OPTS "${java_args[#]}" -cp "${kotlin_app[#]}" "${kotlin_args[#]}" -Xplugin=$KOTLIN_HOME/lib/kotlinx-serialization-compiler-plugin.jar
The thing is that when I run the dev server using npm start, it compiles and runs as expected, but when I run npm run build, I got the following error:
Creating an optimized production build...
Failed to compile.
warning: flag is not supported by this version of the compiler: -
Xplugin=/home/Project/archetype-frontend-kotlin/node_modules/kotlin-compiler/lib/kotlinx-serialization-compiler-plugin.jar
npm ERR! code ELIFECYCLE
And of course when I remove the -Xplugin argument, the application is throwing exceptions like this:
Can't locate argument-less serializer for class Pu…h as lists, please provide serializer explicitly.
(There is an issue on GH related to this https://github.com/Kotlin/kotlinx.serialization/issues/278)
Thanks for any help
Okay, I think I managed to make it work.
Here are the steps as I remember them:
as suggested in https://youtrack.jetbrains.com/issue/CRKA-84, did npm eject and added plugin: require.resolve('kotlin-compiler/lib/kotlinx-serialization-compiler-plugin.jar'), to webpack-kotlin-*.js files (after new KotlinWebpackPlugin).
downloaded the compiled runtime from maven (https://dl.bintray.com/kotlin/kotlinx/org/jetbrains/kotlinx/kotlinx-serialization-runtime-js/0.9.0/) and unpacked it to node-modules/kotlinx-serialization-runtime-js
hacked kotlin-compiler.js by adding the library path (there must be a better way!):
options.libraries.join(isWindows ? ';' : ':') + ":<absolute_path_to_project>/node_modules/kotlinx-serialization-runtime-js/kotlinx-serialization-runtime-js.meta.js"
copied kotlinx-serialization-runtime-js.js and kotlinx-serialization-runtime-js.js.map to node-modules/.cache/kotlin-webpack.
After this yarn start appears to be able to compile some test code that uses kotlinx-serialization, however, Idea fails to find where kotlinx.serialization module comes from.
I hope this answer inspires someone who is willing to reverse-engieer this build system to make a better fix.
I've tried following these instructions:
https://code.visualstudio.com/Docs/runtimes/nodejs
I am not getting the green/red swiggly lines at all. Is there something I'm missing?
You can also see the same thing in this video:
https://youtu.be/sE8_bTEBlFg?t=1m37s
As far as I know, they're running the default editor. I've tried installing typings and typescript using npm. I've Followed that tutorial to get Javascript intellisense for node.js, but I fail to get either error/warning checking or any type information for node.js modules.
Is there a location the type files should be installed to in order to make them global to every JS project you create in VS Code?
OK, so I managed get get some code suggestions working after reading up online. Without using the whole Typings tools, I acquired node.d.ts (found it on my computer inside C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions) and placed that in my project's directory structure inside the ".vscode" folder. At the top of my .js file I added the following line:
/// <reference path=".vscode/node.d.ts" />
The code seems to be recognized now.
I read up on this tip here: How to Import Intellisense files into vsCode (Visual Studio Code)
If you are using ESLint and you have an .eslint.js file in the project root you also need the eslint dependency installed in the project. Otherwise, if there is a .eslint.js file but the ESLint dependency is not installed Visual Studio Code will report nothing in the editor.
Maybe you didn't use the -g flag to install them globally? Alternately, perhaps it's a missing jsconfig.json file?
So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.
What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.
You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript
Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file
Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager
I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug
I've been looking for some automatic way to generate an angular app. I tried to use the angular generator on YEOMAN, but I didn't like the app structure provided.
I found out this other generator angular-feature(https://github.com/codigo-pl/generator-angular-feature) which seems to solve my problem. But so far I could not make it works. Every time when I try to generate the app(on feature structure) returns me an error:
command: grunt build (even if I try grunt server returns me the same)
C:\Users\xxxxxx\WorkFolders\temp\testGenerator>grunt build Loading
"cdnify.js" tasks...ERROR
Error: Unable to parse C:\Users\xxxxxx\WorkFolders\temp\testGenerator .bowerrc:
Unexpected token v Warning: Task "cdnify" not found. Use --force to
continue.
Aborted due to warnings.
UPDATE:
Inside the file .bowerrc:
{
"directory": "app\vendor/bower_components"
}
My folder after running generator:
testGenerator
--app
----src
------common
--node_modules
There's no bower_components folder in any place in my APP folder.
Has anyone already used this YEOMAN generator and had the same problem?
Is there another YEOMAN generator structured by feature like this one?
Try this command in your project to fix the issue.
npm install --save-dev grunt-google-cdn
I am really not sure why this isn't documented officially anywhere nor why the default Yeoman project generation script builds with errors. I had to execute searches to find out about this command.
Also, make sure you are using a stable version of Node/npm. One of my problems was that I was using the latest version of npm, which is 0.11.12. However, according to Node.js's website, that version is unstable. Instead, I had to use version 0.10.26, their latest stable version.
Links:
https://github.com/yeoman/generator-angular/issues/12
https://groups.google.com/forum/#!topic/yeoman-dev/3LFTPpqRInU
the problem was sorted out and it was facing me all the time.
Problem
{
"directory": "app\vendor/bower_components"
}
Solution
{
"directory": "app/vendor/bower_components"
}
The generator is generating backslash instead slash. But the strange thing it seems be happening only on windows. Ubuntu and Mavericks I don't have this problem.