I am trying to follow a tutorial where I am building a web3 app. I am using replit and have installed vite and ethers.js in the replit environment but I am getting this error in the console when I try to run the app:
Uncaught SyntaxError: The requested module
'/node_modules/.vite/ethers.js?v=e0f7b50a
Vite settings:
import reactRefresh from '#vitejs/plugin-react-refresh'
/**
* https://vitejs.dev/config/
* #type { import('vite').UserConfig }
*/
export default {
plugins: [reactRefresh()],
server: {
host: '0.0.0.0',
hmr: {
port: 443,
}
}
}
Package.json:
{
"name": "ReplitReactjsProject",
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"#etherspot/contracts": "^1.6.0",
"#types/react": "^17.0.13",
"#types/react-dom": "^17.0.8",
"#vitejs/plugin-react-refresh": "^1.3.0",
"ethers": "^5.4.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"vite": "^2.3.8"
}
}
Related
I am trying to build a simple single page application so i created a project selecting (Default (Vue 3 Preview) ([Vue 3] babel, eslint)), and i setup the routing manually following vue mastery tutorial https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
the problem is 17 warnings are raised in cmd after i run (npm run serve)
output of my cmd: (some of it as it is too large)
WARNING Compiled with 17 warnings 11:40:21 PM
warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
"export 'computed' was not found in 'vue'
warning in ./src/main.js
"export 'createApp' was not found in 'vue'
warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
"export 'defineComponent' was not found in 'vue'
Here is my App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here is my /src/router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Here is my /src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---
createApp(App).use(router).mount('#app')
my package.json
{
"name": "frontend-gp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"core-js": "^3.6.5",
"vue": "^3.1.4",
"vue-router": "^4.0.10",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
if you need more resources please let me know
You should uninstall the current vue version and install the new one :
npm uninstall vue -S
then
npm install vue#next -S
Visual Studio Code doesn't import any npm package with default exports. I'm using ES6 (no TS)
This is my code:
const apiURL = "https://localhost:8000";
frisby.globalSetup({
request: {
json: true,
baseUrl: apiURL,
},
});
axios.defaults.baseURL = apiURL;
axios.defaults.headers.post['Content-Type'] = 'application/json';
When I wrote frisby it doesn't suggested the import and ctrl+.doesn't work either
And my package.json has this:
{
"name": "ApiTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "Luis",
"license": "MIT",
"scripts": {
"test": "jest"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/preset-env": "^7.3.1",
"#types/frisby": "^2.0.5",
"#types/jest": "^24.0.6",
"babel-jest": "^24.1.0",
"eslint": "^5.14.1",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.16.0",
"faker": "^4.1.0",
"frisby": "^2.1.1",
"jest": "^24.1.0"
},
"dependencies": {
"axios": "^0.18.0",
"dotenv": "^6.2.0"
}
}
I want that VSCode suggest me to import
import axios from 'axios';
import frisby from 'frisby';
I installed auto import and npm intellisense but doesn't work for me, what can I do?
I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},
I had a running webpack configuration. But after using npm init to create the following package.json file:
{
"name": "y",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"jshint": "^2.9.4",
"jshint-loader": "^0.8.4",
"node-libs-browser": "^2.0.0",
"webpack": "^2.2.1"
}
}
and installing the following modules:
npm install babel-core babel-loader jshint jshint-loader node-libs-browser
babel-preset-es2015 babel-preset-react webpack --save-dev
I got the error message
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.resolve.extensions[0] should not be empty.
When I tried to restart the dev-server using
webpack-dev-server
The webpack.config.json looks like this:
module.exports = {
entry: ["./global.js", "./app.js"],
output: {
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.es6']
},
}
What could be the problem?
You installed the latest version of webpack with:
npm install --save-dev webpack
Webpack 2 does not allow an empty string in resolve.extensions anymore. Simply remove the empty string from the array of extensions:
resolve: {
extensions: ['.js', '.es6']
},
You should also read the official Migration Guide.
I am trying to get basic karma-jasmine test running but I get the following error.
Chrome 51.0.2704 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Unexpected anonymous System.register call.
at D:/git/ui-components/jspm_packages/system.src.js:2891
Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Test doesn't seem to be running as well.
Folder structure is as following:
components
-[individual components]
-tests folder with simple test
-app.js(includes master component which calls all child components)
Application is working fine, but I am running into lot of problems with testing.
Any kind of help is appreciated.
Following is my package.json file
{
"name": "ui-components",
"version": "1.0.0",
"description": "POC",
"main": "index.js",
"scripts": {
"install": "jspm install && typings install",
"start": "gulp serve"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-typescript": "^2.12.2",
"gulp-watch": "^4.3.5",
"jasmine": "^2.4.2",
"jasmine-core": "^2.4.1",
"jspm": "^0.16.30",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "file:C:\\Users\\*********\\Downloads\\karma-cli-master",
"karma-jasmine": "^0.3.6",
"karma-jspm": "^2.0.2",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
},
"jspm": {
"dependencies": {
"angular": "github:angular/bower-angular#^1.5.0",
"angular-route": "github:angular/bower-angular-route#^1.5.0",
"bootstrap": "github:twbs/bootstrap#^3.3.6",
"css": "github:systemjs/plugin-css#^0.1.20"
},
"devDependencies": {}
}
}
karma.config.js file
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'jspm'],
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
firstTest.spec.js file
import angular from 'angular';
describe("Hello World Tests", () => {
it("First", () => {
expect("TestString").toEqual("");
});
});
Index.html file
<html ng-app="app">
<head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script>
System.import("components/app.js");
</script>
</head>
<body>
<main-component></main-component>
</body>
</html>
app.ts file
import * as angular from 'angular'
import 'components/mainComponent/mainComponent'
angular.module("app", ['mainComponent']);
I figured out that I needed to pass in my .ts files in JSPM array object in karma.config.js file. I couldn't just pass files into following block.
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
]`
instead this is what it required.
jspm: {
config: "config.js",
packages: "jspm_packages/",
loadFiles: ['components/**/*spec.js'],
serveFiles: ['components/**/*.js']
},
Hopefully this helps someone else.