I downloaded my-timer files from Lit playground (https://lit.dev/playground/#sample=docs/what-is-lit)
what I found when I unzip the folder:
my-timer.ts
icons.ts
index.html
package.json
downloaded package.json contains below dependencies:
{ "dependencies": { "lit": "^2.0.0", "#lit/reactive-element": "^1.0.0", "lit-element": "^3.0.0", "lit-html": "^2.0.0" } }
I removed the above package.json and added another package.json file suggested by (https://codelabs.developers.google.com/codelabs/the-lit-path#1) VS Code setup section.
here is my new package.json file (https://gist.github.com/e111077/c9d4512dcc35f483abbebf95da24609b)
also added tsconfig.json file as I am getting errors for typescript.
and also added web-dev-server as suggested.
after doing all the above step I run the below command npm run serve, but nothing is on http://localhost:8000/
I don't know what am I missing?
my latest code is here (https://github.com/abhijeet-shelhalkar/my-timer-lit).
please guide me through the right steps.
and what is wrong in my code?
Related
I have run into this issue multiple times. Everytime I try to import something from github and adding it usign the yarn package manager I am shown with the error below. This time I have been working on a Solidity contract and wanted to import something from the chianlink repository. One workaround I discovered was copying the required files and including them on the project directly but I do not want to do that. So, I wanted a solution to fix this rather than working around it.
I am using the following:
VsCode
WSL 2.0
Hardhat Framework
Yarn Package Manager
So the issue is while I am trying to import:
import "#chainlink/contracts/src/v0.8/VRFV2WrapperConsumerBase.sol";
I am shown:
Source "#chainlink/contracts/src/v0.8/VRFV2WrapperConsumerBase.sol" file outside of allowed directories.
I have already done:
yarn add --dev #chainlink/contracts
Here is my package.json file contents:
{
"devDependencies": {
"#chainlink/contracts": "^0.5.1",
"#nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers",
"#nomiclabs/hardhat-etherscan": "^3.1.0",
"#nomiclabs/hardhat-waffle": "^2.0.3",
"chai": "^4.3.6",
"dotenv": "^16.0.3",
"ethereum-waffle": "^3.4.4",
"ethers": "^5.7.1",
"hardhat": "^2.11.2",
"hardhat-contract-sizer": "^2.6.1",
"hardhat-deploy": "^0.11.18",
"hardhat-gas-reporter": "^1.0.9",
"prettier": "^2.7.1",
"prettier-plugin-solidity": "^1.0.0-beta.24",
"solhint": "^3.3.7",
"solidity-coverage": "^0.8.2"
}
}
Can anyone tell me what might be the cause of this issue? And how to fix it?
Try adding the full relative path to the directory. For example if your directory has a contracts folder and node_module folder and your contract lives within the contracts folder, your import statement for your chainlink contract would look like this:
import "../node_modules/#chainlink/contracts/src/v0.8/VRFV2WrapperConsumerBase.sol";
I have faced this issue a few times and have found this to work.
I'm trying to package an NWJS app following various tutorials on YouTube and the web. But I'm getting "No files matching" error and it exits. Assuming it was because the dist/ and src/ directories hadn't been created, I created them myself, but I still get the error. All other paths listed in package.json exist.
After searching the web for a similar issue, the only thing I found was this:
https://github.com/nwutils/nw-builder/issues/190
However, this is regarding doing the build using command line args, rather than from package.json.
npm and nodejs were updated to latest version and nwjs was updated to 0.64.0-sdk.
I am attempting the build on MacOS 10.13.6, nodejs version 16.15.0, npm version 8.5.5 .
Any ideas anyone?
Thanks!
Kevin
CLI:
15:40:55 : ~/ReolinkNWJS
npm run prod
> ReolinkNWJS#0.0.1 prod
> nwbuild --platforms osx64 --buildDir dist/ src/
No files matching
15:41:00 : ~/ReolinkNWJS
ls
dist icons javascript package-lock.json package.json.TEMPLATE src
html images node_modules package.json resources styles
package.json:
{
"name": "ReolinkNWJS",
"description": "Reolink Client App In NWJS Framework",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms osx64 --buildDir dist/ src/"
},
"devDependencies": {
"nw": "^0.64.0-sdk",
"nw-builder": "^3.7.0"
}
}
I think you either need to remove your src/ or move it to the front
"prod": "nwbuild --platforms osx64 --buildDir dist/"
"prod": "nwbuild src/ --platforms osx64 --buildDir dist/"
Also, either remove or change your node-remote. It is currently set up so that any webpage on the internet has complete control to run Node, meaning they can easily read the contents of all files on the computer, download virus.exe, delete all files, whatever, literally anything. Don't do that.
node-remote is almost exclusively used to point to http://localhost:8080, or some other port, for a local webserver your app runs on. Your main is pointing to a local file, not a webserver, so you likely do not need node-remote at all.
You probably want to move the "icon" at the root into the "window" sub object.
https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/#window-subfields
My ultimate goal is to get e2e and unit code coverage for my Vue 3 app using Cypress in my CI/CD pipelines.
However, when using the following configuration in my babel.config.js I get a flood of repeated error messages that read don't know how to turn this value into a node at transformFile.next (<anonymous>) for each Vue file in my app that uses <script setup>.
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
['babel-plugin-istanbul', {
extension: ['.js', '.vue']
}]
],
};
package.json
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.1.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
My concern is that the plugin doesn't know how to handle Vue 3's script setup syntax.
Sadly, the only how-to guides I can find online are for Vue 2 or React apps.
https://docs.cypress.io/guides/tooling/code-coverage#Using-NYC
https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/
So my question is: what can I do to get my app to transpile while using babel-plugin-istanbul and script setup?
Steps to Reproduce:
Create a new Vue 3 app with vue-cli-service
Install babel-plugin-istanbul in your dev dependencies
Configure your babel.config.js as shown above
Convert your App.vue to use <script setup>
Run npm run serve
Expected behavior:
The app transpiles with no errors
Actual behavior:
Transpilation failure with don't know how to turn this value into a node errors for App.vue.
The resolve is to use istanbul in the babel config (as given in Cypress docs).
The cause isn't apparent, without <script setup> the full name babel-plugin-istanbul works ok.
plugins: [
['istanbul', {
extension: ['.js', '.vue']
}]
],
I am solving same problem and I can point out two things:
The problem is in babel.config.js file especially with .vue extension, when you remove it works, but for me it instrument all files.
I have a feeling another problem is with CLI versions plugins. I don't have problem to run the cypress code coverage plugin with older packages.
If add extension:['.vue'] in bable.config.js configuration, getting below error.
src/pages/somefile.vue?vue&type=script&setup=true&lang=js
Module build failed (from ./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: src/pages/somefile.vue: don't know how to turn this value into a node
I ran into this as well. It turned out to be a bug in the istanbul-lib-instrument package, which was fixed in this PR: https://github.com/istanbuljs/istanbuljs/pull/662
If you upgrade your installed copy of istanbul-lib-instrument to 5.2.1 (i.e., npm update istanbul-lib-instrument) the issue should go away.
Current Behavior
I am building my angular project on circleci and it just keeps failing with the following message:
An unhandled exception occurred: Cannot find module
'#babel/compat-data/corejs3-shipped-proposals'
Require stack:
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js
I am using
{
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"core-js": "3.2.1",
"tslib": "^1.11.1",
"#babel/compat-data": "~7.8.0",
"#babel/runtime-corejs3": "^7.9.2",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.5.3",
}
resolutions: {
"#babel/preset-env": "^7.8.7"
}
here is npx nls why #babel/preset-env output:
eleven-app-frontend > #angular-devkit/build-angular > #babel/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
Thank you for reading.
Had the same issue today, so I'm assuming there's something weird with the latest version.
My package.json had the following:
"#babel/compat-data": "~7.9.0"
I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.
There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.
I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "#babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.
These 3 options we came up with so far:
Adapt dependency of babel/preset-env to v7.9.0: "#babel/preset-env": "=7.9.0"
In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
Adding or upgrading "#babel/compat-data": "7.9.0" to devDependencies
The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.
Linked Github issues:
babel - https://github.com/babel/babel/issues/11427
nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057
I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...
Update: After looking through the package-lock file, my solution was to explicitly add "#babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:
"dependencies": {
"#babel/compat-data": "^7.8.6",
...
Same issue.
Solved it by following above advices + removing node_modules (see this github thread):
Added explicitly #babel/compat-data": "7.9.0" to devDependencies
Upgraded node (13.3 to 14.0 in my case)
Had to remove my node_modules folder and re run yarn (or npm)
If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.
It worked for me in my Next.js project.
I have vscode 1.9 and I want to have intellisense for jest tests. The problem is that describe, it, expect etc are globally available in jest and you don't need to import them in your test files. So vscode will not show intellisense for them.
Is there any configuration for globals for automatic type acquisition?
You have a few options in this case:
Add jest to your package.json:
"dependencies": {
"jest": "^18.1.0"
}
This only works if you are working JavaScript and do not have a tsconfig.json.
Install #types/jest
$ npm install -D #types/jest
This should work for both JavaScript and TypeScript projects. However #types but may be disabled by a jsconfig.json/tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Create a jsconfig.json file in the root of your workspace to specifically include jest:
{
"typeAcquisition": {
"include": [
"jest"
]
}
}
This will only work for JavaScript projects when automatic typings acquisition is enabled.
All of these should allow VSCode to pick up jest's typings without an import or require
I tried installing the #types/jest, and it did work, but the problem is that it resulted in the jest suggestions appearing in my .js files as well. I couldn't figure out how to get global suggestions for test, expect, etc. in only .test.js files but not .js files.
So I decided to just manually import each jest global I was going to use in each .test.js file, which allowed the suggestions to appear with types but avoided having the suggestions appear in the .js files:
import { test, expect } from '#jest/globals'
npm install -D #types/jest
edit jest.config.js
typeAcquisition: {
include: ['jest'],
},