Error packaging an Electron application on Windows - javascript

When I run rm -rf src/dist && yarn build && electron-builder build --publish never on git bash on windows, to package my electron/react app, I get the following error message:
ERROR in ./src/pages/Task.js 135:4
[1] Module parse failed: Unexpected token (135:4)
[1] You may need an appropriate loader to handle this file type, currently no lo
aders are configured to process this file. See https://webpack.js.org/concepts#l
oaders
[1] |
[1] | return (
[1] > <div className={`Task ${isMinimized ? 'FlexIt' : ''}`}>
[1] | <div className="Btns">
[1] | <img
[1] # ./src/App.tsx 11:0-32 26:13-17
[1] # ./src/index.tsx 7:0-24 8:26-29
[1]
[1] webpack 5.5.1 compiled with 4 errors in 12401 ms
Any ideas about the reason? This is my 1st electron app, and 2nd react app, and I don't really know what webpack is.
My package.json file:
{
"name": "my-app",
"productName": "myApp",
"description": "Electron react app",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "ElectronReact",
"appId": "org.erb.ElectronReact",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "someone",
"repo": "someone"
}
},
"repository": {
"type": "git",
"url": "link.git"
},
"author": {
"name": "someone",
"email": "someone#someone.com"
},
"contributors": [
{
"name": "someone",
"email": "someone#someone.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"typescript",
"ts",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.10.5",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#material-ui/icons": "^4.11.2",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"regenerator-runtime": "^0.13.5",
"source-map-support": "^0.5.19"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {}
}
}
My webpack.config.base.js file:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from '../../src/package.json';
export default {
externals: [...Object.keys(externals || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
output: {
path: path.join(__dirname, '../../src'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2',
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [path.join(__dirname, '../../src'), 'node_modules'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
],
};

Related

Jest is not collecting coverage from all my Vue files

I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance

Less not loaded with package

I build npm package to use in other react project,
the components are working byt without less style
inside storybook its working with less
here is the package
npm i #linkne/react-storybook-antdesign
and here is storybook parameters
main.js
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = {
"stories": ['../src/**/*.stories.#(js|mdx)'],
"addons": ["#storybook/addon-links", "#storybook/addon-essentials", "#storybook/addon-interactions"],
"framework": "#storybook/react",
core: {
builder: "webpack5"
},
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
};
webpack.config.js
var path = require('path');
module.exports = {
entry: './components/App.js',
mode: 'development',
output: {
path: path.resolve(__dirname, './public/dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['css-loader', 'postcss-loader', 'less-loader',
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
}
}
}
]
}
]
}
}
package.json
{
"name": "react-storybook",
"version": "0.2.5",
"description": "Storybook design systems with AntDesign",
"license": "MIT",
"private": true,
"dependencies": {
"#mdx-js/react": "^2.1.1",
"#storybook/preset-create-react-app": "^1.2.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.0",
"antd": "^4.21.2",
"babel-loader": "^8.2.5",
"min-indent": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"#storybook/addon-actions": "^6.5.9 ",
"#storybook/addon-essentials": "^6.4.22",
"#storybook/addon-interactions": "^6.5.9 ",
"#storybook/addon-links": "^6.5.9 ",
"#storybook/builder-webpack5": "^6.5.9 ",
"#storybook/cli": "^5.1.11",
"#storybook/manager-webpack5": "^6.5.9 ",
"#storybook/node-logger": "^6.5.9 ",
"#storybook/react": "^6.5.9 ",
"#storybook/testing-library": "^0.0.13",
"babel-plugin-named-exports-order": "^0.0.2",
"css-loader": "^6.7.1",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"prop-types": "^15.8.1",
"react-refresh": "^0.14.0",
"style-loader": "^3.3.1",
"webpack": "^5.73.0"
}
}
and this is the package.json from the different project, webpack its exacly the same
{
"name": "argoportal",
"version": "1.0.0",
"description": "",
"main": "index",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://bitbucket.org/linkmobility/argoportal.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"homepage": "https://bitbucket.org/linkmobility/argoportal#readme",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#ant-design/pro-card": "^1.20.2",
"#ant-design/pro-components": "^1.1.5",
"#ant-design/pro-descriptions": "^1.10.71",
"#ant-design/pro-form": "^1.67.1",
"#ant-design/pro-layout": "^6.38.0",
"#ant-design/pro-list": "^1.21.59",
"#ant-design/pro-skeleton": "^1.0.5",
"#ant-design/pro-table": "^2.74.1",
"#babel/core": "^7.17.8",
"#babel/preset-react": "^7.16.7",
"#linkne/react-storybook-antdesign": "^0.2.8",
"#react-keycloak/web": "^3.4.0",
"activity-detector": "^3.0.0",
"antd": "^4.20.2",
"axios": "^0.24.0",
"babel-loader": "^8.2.4",
"buffer": "^6.0.3",
"css-loader": "^6.7.1",
"highcharts": "^10.1.0",
"highcharts-react-official": "^3.1.0",
"html-react-parser": "^1.4.9",
"moment": "^2.29.3",
"moment-timezone": "^0.5.34",
"multiselect-react-dropdown": "^2.0.21",
"path": "^0.12.7",
"postcss-loader": "^6.2.1",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-confirm-alert": "^2.8.0",
"react-csv": "^2.2.2",
"react-date-range": "^1.4.0",
"react-datepicker": "^4.7.0",
"react-datetime-picker": "^3.5.0",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-gtm-module": "^2.0.11",
"react-icon-base": "^2.1.2",
"react-icons": "^4.3.1",
"react-moment": "^1.1.1",
"react-paginate": "^8.1.2",
"react-router-dom": "^6.2.2",
"react-select": "^5.2.2",
"react-switch": "^6.0.0",
"react-timezone-select": "^1.3.1",
"style-loader": "^3.3.1",
"umi": "^4.0.0",
"validator": "^13.7.0",
"webpack-watch-server": "^1.2.1"
},
"devDependencies": {
"#types/react": "^18.0.14",
"less": "^4.1.2",
"less-loader": "^7.3.0",
"ts-loader": "^9.3.0",
"typescript": "^4.7.2",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
}
}

VSCode EsLint Extension Does Not Lint in JS Files in a Mixed Next.JS Project, but next lint and Husky Work

For context, our project is a Next.JS project with mostly JavaScript files, and a few scattering of random TypeScript Files, mostly in our API folder. Recently we set up Husky to pre-commit our git commits, and some of the settings changed and while next lint correctly lints, and our Husky settings work with both types of files, the VSCode extension for EsLint no longer works on JavaScript files. While removing plugin:#typescript-eslint/recommended fixes that issue, next lint and husky then fails with TS files.
eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:#next/next/recommended",
"plugin:import/recommended",
"prettier",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"typescript": {}
}
},
"plugins": ["react", "prettier"],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": "off",
"react/display-name": "off",
"no-unused-vars": 2,
"no-undef": 2,
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "next/*",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next/*"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"globals": {
"React": "writable"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
package.json:
{
"name": "our-organization",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev && next export",
"build": "next build",
"start": "NODE_ENV=production next start -p 8080",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "jest --json --outputFile=./test-results/report.json",
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"next lint .",
"prettier --write ."
]
},
"dependencies": {
"#analytics/google-analytics": "^0.5.2",
"#apollo/client": "^3.4.15",
"#contentful/rich-text-plain-text-renderer": "^15.6.2",
"#contentful/rich-text-react-renderer": "^15.3.6",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.48",
"#mui/material": "^5.0.3",
"#mui/styles": "^5.0.1",
"#mui/x-data-grid": "^5.0.1",
"#testing-library/user-event": "^13.2.1",
"algoliasearch": "^4.10.5",
"analytics": "^0.7.14",
"apollo-link-rest": "^0.8.0-beta.0",
"bad-words": "^3.0.4",
"contentful": "^9.0.0",
"date-fns": "^2.25.0",
"dateformat": "^4.5.1",
"formik": "^2.2.9",
"graphql": "^15.6.0",
"graphql-anywhere": "^4.2.7",
"javascript-time-ago": "^2.3.8",
"next": "^11.1.2",
"next-instantsearch": "^0.3.15",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-iframe": "^1.8.0",
"react-instantsearch-dom": "^6.22.0",
"react-markdown": "^7.0.1",
"react-player": "^2.9.0",
"react-scripts": "^5.0.0",
"react-share": "^4.4.0",
"react-show-more-text": "^1.5.0",
"react-to-print": "^2.13.0",
"serverless-mysql": "^1.5.4",
"sharethis-reactjs": "^1.6.0",
"swr": "^1.0.1",
"universal-cookie": "^4.0.4",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-proposal-export-default-from": "^7.14.5",
"#next/eslint-plugin-next": "^11.1.2",
"#storybook/addon-actions": "^6.3.10",
"#storybook/addon-essentials": "^6.3.10",
"#storybook/addon-jest": "^6.3.10",
"#storybook/addon-links": "^6.3.10",
"#storybook/react": "^6.3.10",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#typescript-eslint/eslint-plugin": "^5.11.0",
"babel-jest": "^27.2.0",
"babel-loader": "^8.2.2",
"babel-plugin-react-require": "^3.1.3",
"eslint": "^7.32.0",
"eslint-config-next": "^12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"husky": "^7.0.4",
"jest": "^27.2.0",
"jest-html-reporters": "^2.1.6",
"jest-transform-graphql": "^2.1.0",
"lint-staged": "^12.1.2",
"prettier": "^2.4.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.4.3"
},
"engines": {
"node": ">=14.17.0",
"npm": ">=6.0.0"
}
}
I have found no good resources on addressing this issue for mixed projects like this. I do not know why we have typescript files as they were added before I joined.
This eslint file is missing the typescript parser:
"parser": "#typescript-eslint/parser",

How to correctly add some node_modules to externals property in webpack config?

I'm trying to run unit tests with generating code coverage report, but I'm getting warnings and an error related to some node_modules, how I can fix it? Also if I'm removing express from externals property I see warning message for this dependency and error message for grcp dependency
webpack base config
const path = require("path")
const nodeExternals = require("webpack-node-externals");
const resolve = dir => path.join(__dirname, "..", dir)
const createLintingRule = () => ({
test: /\.(js)$/,
loader: "eslint-loader",
enforce: "pre",
include: [resolve("server"), resolve("test")],
options: {
formatter: require("eslint-friendly-formatter"),
}
})
module.exports = {
context: path.resolve(__dirname, "../"),
target: "node",
node: {
__filename: true,
__dirname: true
},
externals: { ...nodeExternals(),
express: "express",
bufferutil: "commonjs bufferutil",
"utf-8-validate": "commonjs utf-8-validate",
memcpy: "bytebuffer",
encoding: "node-fetch",
grpc: "grpc",
"dtrace-provider": "dtrace-provider",
"#opencensus": "#opencensus",
},
output: {
path: path.join(__dirname, "../dist"),
filename: "server.js"
},
devServer: {
inline: false,
contentBase: "./dist",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js', '*', '.json', '.gql', '.graphql']
},
module: {
rules: [
createLintingRule(),
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
// resolve: {
// fullySpecified: false,
// },
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.js$/,
include: path.resolve("src"),
loader: "istanbul-instrumenter-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
sourceMaps: true,
plugins: [
"#babel/plugin-transform-regenerator",
"#babel/plugin-transform-named-capturing-groups-regex"
],
presets: [
[
"#babel/preset-env", {
useBuiltIns: "entry",
shippedProposals: true,
corejs: 3,
}
],
],
}
},
{ test: /\.ts$/, use: 'ts-loader' }
],
},
}
package.json
{
"name": "zing-graphql",
"version": "1.0.0",
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js --progress",
"dev": "webpack --config build/webpack.dev.conf.js",
"dev:mock": "MOCK=ALL webpack --config build/webpack.dev.conf.js",
"start": "npm run dev",
"clean": "rm -rf dist/ node_modules/",
"lint": "./lint.sh",
"test": "nyc test/test.sh",
"testspec": "test/test.sh",
"tdd": "mochapack --webpack-config build/webpack.prod.conf.js --require test/setup.js --watch 'server/v2/**/*.spec.js'",
"graphql:codegen": "graphql-codegen"
},
"engines": {
"node": ">= 10.0.0"
},
"description": "ZING GraphQL service",
"main": "server/index.js",
"repository": "git#github.com:zenoss/graphql.git",
"author": "Zenoss <dev#zenoss.com>",
"private": true,
"resolutions": {
"**/#opencensus/core": "^0.0.22",
"**/#types/continuation-local-storage": "3.2.1",
"**/grpc": "^1.24.4",
"**/grpc-create-metadata": "3.0.0"
},
"dependencies": {
"#axelspringer/graphql-google-pubsub": "^2.1.0",
"#elastic/elasticsearch": "7",
"#google-cloud/opentelemetry-cloud-trace-exporter": "^1.0.0",
"#google-cloud/pubsub": "^2.11.0",
"#graphql-codegen/cli": "^1.20.1",
"#graphql-codegen/typescript": "^1.21.0",
"#graphql-codegen/typescript-resolvers": "^1.18.2",
"#opencensus/core": "^0.0.22",
"#opencensus/nodejs": "^0.0.22",
"#opentelemetry/api": "^1.0.4",
"#opentelemetry/auto-instrumentations-node": "^0.27.2",
"#opentelemetry/core": "^1.0.1",
"#opentelemetry/exporter-jaeger": "^1.0.1",
"#opentelemetry/exporter-trace-otlp-http": "^0.27.0",
"#opentelemetry/propagator-grpc-census-binary": "^0.25.1",
"#opentelemetry/propagator-jaeger": "^1.0.1",
"#opentelemetry/resources": "^1.0.1",
"#opentelemetry/sdk-node": "^0.27.0",
"#opentelemetry/sdk-trace-base": "^1.0.1",
"#opentelemetry/sdk-trace-node": "^1.0.1",
"#opentelemetry/semantic-conventions": "^1.0.1",
"#stackpath/node-grpc-error-details": "^1.0.0",
"#types/continuation-local-storage": "3.2.1",
"#zenoss/opencensus-node-exporter": "^0.0.4",
"apollo-datasource": "^0.9.0",
"apollo-server": "^2.25.3",
"apollo-server-express": "^2.18.2",
"apollo-server-plugin-response-cache": "^0.5.2",
"bunyan": "~1.8.12",
"bunyan-gke-stackdriver": "^0.1.2",
"clone": "^2.1.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.4",
"dataloader": "^2.0.0",
"dompurify": "2.0.17",
"express": "^4.16.2",
"google-auth-library": "^7.11.0",
"google-protobuf": "^4.0.0-rc.2",
"graphql": "^14.0.2",
"graphql-iso-date": "^3.5.0",
"graphql-middleware": "^3.0.2",
"graphql-schema-modules": "^0.0.4",
"graphql-subscriptions": "^1.2.0",
"graphql-tools": "^4.0.5",
"graphql-type-json": "^0.2.0",
"grpc": "^1.24.4",
"http": "^0.0.1-security",
"jsdom": "15.2.1",
"json-stable-stringify": "^1.0.1",
"lodash": "^4.17.21",
"nanoid": "^3.1.31",
"opencensus-exporter-stackdriver": "zenoss/opencensus-exporter-stackdriver#v0.1.0",
"pb-util": "^0.1.2",
"phonetic": "^0.1.1",
"protobufjs": "^6.8.8",
"prufer": "^0.0.1",
"subscriptions-transport-ws": "^0.9.18",
"url-parse": "1.5.7",
"workerpool": "^6.1.4",
"yamr-js": "zenoss/yamr-js#4.6.4",
"zing-grpc-clients": "zenoss/zing-proto#v11.16.2"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"apollo-server-testing": "^2.9.13",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.2.3",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"chai": "^4.2.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^7.19.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-mocha": "^9.0.0",
"html-loader": "^3.1.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jsonwebtoken": "^8.5.1",
"mocha": ">=6 <9",
"mochapack": "^2.0.6",
"nyc": "^15.1.0",
"sinon": "^7.5.0",
"sinon-chai": "^3.3.0",
"start-server-webpack-plugin": "^2.2.5",
"ts-loader": "^8.0.17",
"typescript": "^4.1.5",
"webpack": "^4.0.0",
"webpack-cli": "^4.5.0",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^2.5.2"
}
}
pic with errors

VS Code debug webpack with nodemon plugin: Unbound breakpoints

I'm creating a template for my future express js projects.
Currently I want to set up debugging.
But I always get unbound breakpoints.
Here are the files I think are important (They are pretty long, sorry for that):
package.json
webpack.config.js
launch.json
Folder structure
Unbound breakpoint error
Console output
package.json
{
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"debug": "~2.6.9",
"ejs": "^3.1.5",
"express": "~4.16.1",
"express-jwt": "^6.0.0",
"joi": "^17.3.0",
"joi-password-complexity": "^5.0.2",
"jsonwebtoken": "^8.5.1",
"mailgun.js": "^2.0.6",
"mongodb": "^3.6.3",
"mongoose": "^5.11.11",
"mongoose-paginate-v2": "^1.3.13",
"morgan": "^1.10.0",
"mustache": "^4.1.0",
"nodemailer": "^6.4.17",
"path": "^0.12.7",
"querystring": "^0.2.0",
"saslprep": "^1.0.3",
"swagger-ui-express": "^4.1.6",
"winston": "^3.3.3",
"winston-daily-rotate-file": "^4.5.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.12",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-numeric-separator": "^7.12.7",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/preset-env": "^7.12.11",
"babel-cli": "^6.26.0",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"copy-webpack-plugin": "^7.0.0",
"eslint": "^7.17.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^7.1.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-ordered-imports": "^0.4.0",
"eslint-plugin-prettier": "^3.3.1",
"nodemon": "^2.0.7",
"nodemon-webpack-plugin": "^4.3.2",
"prettier": "^2.2.1",
"webpack": "^5.13.0",
"webpack-cli": "^4.3.1"
},
"name": "web-api-template",
"scripts": {
"build": "npx webpack --mode production",
"start-production": "npx webpack -w --mode production",
"start": "npx webpack -w --mode development"
},
"version": "0.0.0"
}
webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
externals: {
saslprep: "require('saslprep')",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CopyWebpackPlugin({
patterns: [
'./node_modules/swagger-ui-dist/swagger-ui.css',
'./node_modules/swagger-ui-dist/swagger-ui-bundle.js',
'./node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
'./node_modules/swagger-ui-dist/favicon-16x16.png',
'./node_modules/swagger-ui-dist/favicon-32x32.png',
],
}),
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
}),
new NodemonPlugin({
nodeArgs: ['--inspect=9229'],
}),
],
resolve: {
modules: [path.resolve(__dirname, './src'), 'node_modules'],
extensions: ['.js', '.jsx', '.json'],
},
target: 'node',
};
launch.json
{
"configurations": [
{
"args": [],
"console": "integratedTerminal",
"cwd": "${workspaceFolder}",
"env": {
"NODE_ENV": "development"
},
"name": "Launch Program",
"port": 9229,
"preLaunchTask": null,
"request": "launch",
"runtimeArgs": [
"run-script",
"start"
],
"runtimeExecutable": "npm",
"stopOnEntry": false,
"type": "node",
"sourceMaps": true,
},
],
"version": "0.2.0"
}
Folder structure
Unbound breakpoint error
Console output
webpack 5.13.0 compiled with 13 warnings in 8376 ms
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): dist/app.js
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node --inspect=9229 dist/app.js`
Debugger attached.
2021-02-04 13:36:33 info: Server running on port 4000

Categories