Auto import of npm packages in Visual Studio code - ecmascript-6

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?

Related

SyntaxError: Cannot use import statement outside a module in gulp

hi i will try to learn gulp but at start i have an error in my simple hello world. can anybody help me?
my gulp version is:
CLI version 3.9.0
Local version 4.0.2
my .babelrc file :
{
"presets": [ "#babel/preset-env" ]
}
my gulpfile.babel.js file :
export const hello = (done) => {
console.log('hello');
done();
}
my package.json file :
"name": "meatheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"bundle": "gulp bundle --prod"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/register": "^7.12.1",
"babel-loader": "^8.1.0",
"browser-sync": "^2.26.13",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-wp-pot": "^2.5.0",
"gulp-zip": "^5.0.2",
"sass": "^1.43.4",
"vinyl-named": "^1.1.0",
"webpack-stream": "^5.2.1",
"yargs": "^15.4.1"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1",
"slick-carousel": "^1.8.1"
}
}
and when i run gulp hello is see this in terminal.
[16:47:07] Failed to load external module babel-core/register
[16:47:07] Failed to load external module babel/register
/home/mehdi/Work/Meacodes/Mea template/mea0.1/gulpfile.babel.js:16
import gulp from 'gulp';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3)
at Liftoff.execute (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
at module. Exports (/usr/local/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
do you know where is my issue?
I was advised to write "type": "module" to file package.json to the very end of the file
since node otherwise does not consider js files as ES modules, outside of which you still cannot use the import statement)
(in the browser we do modules through the type attribute of the script tag)

ES Module error encountered when testing npm package locally

Background:
I am trying to test an npm package that I am developing: a React Component that manages a SVG filter animation. In verifying that it works as expected, I have used npm pack to generate a tarball, which I have then installed as a dependency in another project (one I expect to consume said package when properly published).
To make this easier, I will refer to the npm package I am developing as package A and refer to the project that consumes it as project B. Please take note of the technologies mentioned below as their giving context will likely provide insight.
Relevant Technologies
packageA
node: 14.18.1
esbuild: ^0.11.11
typescript: ^4.2.3
projectB
node: 14.18.1
remix: 1.4.1
typescript: ^4.2.3
Observations + Problems:
Observations:
npm pack, when run in package A, spits out a tarball that includes everything BUT the output build directory of package A.
package A has a package.json with a type field set as "module", thereby declaratively supporting ES Module System syntax.
npm install of this tarball in project B is successful.
If I change my import of package A to its absolute path (node_modules/projectA/build/main.js) in project B's node_modules I avoid the problem defined in Problems #1.
Problems:
Any attempt to consume package A in project B is met with the following error:
// THIS IMPORT
// projectB > index.js
import PackageAComponent from 'packageA'
// RESULTS IN:
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js
require() of ES modules is not supported.
require() of /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js from /Users/jackwilliammorris/Code/better-brain-blogging/server/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename browser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (/Users/jackwilliammorris/Code/better-brain-blogging/app/routes/braindumps/index.tsx:8:25)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
Relevant Code Snippets
// projectB package.json
{
"name": "projectB",
"private": true,
"description": "",
"license": "",
"sideEffects": false,
"scripts": {
... ,
"dev": "run-p dev:*",
"dev:arc": "node ./dev sandbox",
"dev:css": "npm run generate:css -- --watch",
"dev:remix": "remix watch",
...
},
"prettier": {},
"dependencies": {
"#architect/architect": "^10.2.1",
"#architect/functions": "^5.0.4",
"#happy-dom/jest-environment": "^3.1.0",
"#notionhq/client": "^1.0.4",
"#remix-run/architect": "^1.4.1",
"#remix-run/node": "^1.4.1",
"#remix-run/react": "^1.4.1",
"#remix-run/server-runtime": "^1.4.1",
"bcryptjs": "2.4.3",
"classnames": "^2.3.1",
"cuid": "^2.1.8",
"fuzzy-scrawl": "file:../fuzzy-scrawl/fuzzy-scrawl-0.0.0.tgz",
"highlight.js": "^11.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tiny-invariant": "^1.2.0"
},
"devDependencies": {
"#faker-js/faker": "^6.1.1",
"#remix-run/dev": "^1.4.1",
"#remix-run/eslint-config": "^1.4.1",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^14.0.4",
"#types/architect__functions": "^3.13.6",
"#types/bcryptjs": "2.4.2",
"#types/eslint": "^8.4.1",
"#types/jest": "^27.4.1",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"#vitejs/plugin-react": "^1.3.0",
"c8": "^7.11.0",
"cross-env": "^7.0.3",
"cypress": "^9.5.3",
"esbuild": "^0.14.29",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",
"happy-dom": "^2.55.0",
"jest": "^27.5.1",
"mock-aws-s3": "^4.0.2",
"msw": "^0.39.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.6.1",
"prettier-plugin-tailwindcss": "^0.1.8",
"start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.23",
"ts-jest": "^27.1.4",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"vitest": "^0.8.2"
},
"engines": {
"node": "14"
}
}
// packageA package.json
{
"name": "fuzzy-scrawl",
"version": "0.0.0",
"author": "slackermorris",
"repository": "",
"license": "MIT",
"keywords": [
"css",
"typescript",
"scss"
],
"main": "./build/main.js",
"module": "./build/main.js",
"type": "module",
"types": "./build/tsc/main.d.ts",
"scripts": {
"esbuild-browser:dev": "NODE_ENV=development node build esbuild-browser:dev",
},
"devDependencies": {
"#types/jest": "^26.0.21",
"#types/node": "^15.0.1",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^4.19.0",
"#typescript-eslint/parser": "^4.19.0",
"esbuild": "^0.11.11",
"esbuild-css-modules-plugin": "^2.3.2",
"esbuild-plugin-css-modules": "^0.1.3",
"esbuild-sass-plugin": "^2.2.6",
"esbuild-style-plugin": "^1.6.0",
"eslint": "^7.22.0",
"jest": "^26.6.3",
"live-server": "^1.2.2",
"sass": "^1.53.0",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"typedoc": "^0.20.35",
"typescript": "^4.2.3"
},
"dependencies": {
"gsap": "^3.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

How to add custom Css in nextjs

I was trying to add these Template into one of my Components, this component also gets other values dynamically.
But I'm getting this error instead
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I also tried next-images in next.config.js but still gives me the same error.
This is my package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"moment": "^2.25.3",
"next": "^9.3.6",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-quill": "^1.3.5",
"react-render-html": "^0.6.0",
"reactstrap": "^8.4.1"
}
}
Update:
My next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
publicRuntimeConfig : {
APP_NAME : ' ',
API_DEVELOPMENT : '',
API_PRODUCTION : '',
PRODUCTION:false
}
})
Try this in your next.config.js:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})

How to run front end and back end in same port to deploy in tomcat server?

I am using reactjs in the front end and node js ,express js in backend which connects to the MySQL DB.
Both are two different folders where generally I was using on different ports.
how to combine them to deploy in tomcat server . what is the right method to do this ?
This is the index file from the backend folder inside my front end folder
....
....
app.post('/data/tournament/registration',(request, response)=>{
console.log(request.body);
connection.query("INSERT INTO registrationdata VALUES ?"
,[request.body],function(error, result, fields){
if(error){
throw error;
}else{
console.log(JSON.stringify(result));
response.send(JSON.stringify(result))
}
});
});
app.listen(8080,()=>{
console.log("Connected to port 8080");
});
....
....
The package JSON file from the backend folder inside the front end folder
{
"name": "mysql_db",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node src/index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mysql": "^2.18.1"
}
}
I use axios in the front end to fetch the data from backend.
import axios from 'axios';
export default axios.create({
baseURL:'http://localhost:8080'
});
I use the axios instance like in my front end to fetch from backend.
....
....
export const fetchTournaments=()=>async(dispatch)=>{
await mysqlDB.get('/data/tournament/fetch')
.then((response)=>{
console.log(response);
if(response.data !== {}){
dispatch( {
type: ActionTypes.FETCH_TOURNAMENT_SUCCESS,
payload:response.data
});
console.log("Fetched tournament")
History.push('/tournaments')
}else{
dispatch({type:ActionTypes.FETCH_TOURNAMENT_FAILED});
console.log("failed to Fetch tournament")
}
})
.catch((error)=>console.error(error));
};
....
....
This is the package json file of the front end which is basically the root folder
{
"name": "chess4loudoun",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"concurrently": "^5.2.0",
"material-table": "^1.57.2",
"moment": "^2.26.0",
"react": "^16.13.1",
"react-countdown": "^2.2.1",
"react-dom": "^16.13.1",
"react-google-login": "^5.1.20",
"react-material-ui-carousel": "^1.4.5",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start ",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
UPDATE
As for your other question about where to put your xml file etc that we discussed in comments, you will want to use this in your web.xml file to handle any 404 as per https://create-react-app.dev/docs/advanced-configuration/
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
For Development you can use:
Add this in your express server.js or w/e
app.listen(8080)
Then in your React App's package.json use:
"proxy": "http://localhost:8080"
In production you will want to use the path module to serve the static react files...
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'build')))

Unexpected token import, can not set up ES6 in my JS project with Mocha, Chai and Sinon

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"
},