How to read DraftJS state from localStorage? - javascript

I have an issue with reading Draft.js raw content from localStorage.
I would like to use previously stored rawContent as my initialState for the reducer.
I think convertFromRaw function is my problem.
I does crush silently (does not log to the console) and I don't know how to troubleshoot this.
I'm persisting Draft.js raw content in localStorage:
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState);
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent))
);
And then wen I'm trying to restore it I'm facing my problem.
I think convertFromRaw.
const rawContent = window.localStorage.getItem("rawContent");
if (rawContent) {
this.state.editorState = EditorState.createWithContent(
convertFromRaw(JSON.parse(rawContent))
);
} else {
this.state.editorState = EditorState.createEmpty();
}
My temporary solution to this was to use a third party converter.
In my case I used stateToMarkdown / stateFromMarkdown from draft-js-export-markdown / draft-js-import-markdown
My package.json
{
"name": "react-boilerplate",
"version": "3.7.0",
"description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate.git"
},
"engines": {
"npm": ">=5",
"node": ">=8.10.0"
},
"author": "Max Stoiber",
"license": "MIT",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js",
"lint:css": "stylelint './app/**/*.js'",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"pretest": "npm run test:clean && npm run lint",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/app.js",
"!app/global-styles.js",
"!app/*/*/Loadable.{js,jsx}"
],
"coverageThreshold": {
"global": {
"statements": 50,
"branches": 40,
"functions": 50,
"lines": 50
}
},
"moduleDirectories": [
"node_modules",
"app"
],
"moduleNameMapper": {
".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
"testRegex": "tests/.*\\.test\\.js$"
},
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dependencies": {
"#babel/polyfill": "7.0.0",
"antd": "^3.13.1",
"axios": "^0.18.0",
"chalk": "2.4.1",
"compression": "1.7.3",
"connected-react-router": "4.5.0",
"cross-env": "5.2.0",
"draft-js": "^0.10.5",
"draft-js-export-html": "^1.3.3",
"draft-js-export-markdown": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"draft-js-import-markdown": "^1.3.3",
"express": "4.16.4",
"fontfaceobserver": "2.0.13",
"history": "4.7.2",
"hoist-non-react-statics": "3.0.1",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"loadable-components": "2.2.3",
"lodash": "4.17.11",
"minimist": "1.2.0",
"prop-types": "15.6.2",
"react": "16.6.0",
"react-dom": "16.6.0",
"react-draft-wysiwyg": "^1.13.2",
"react-flexview": "^4.0.3",
"react-helmet": "5.2.0",
"react-intl": "2.7.2",
"react-logger-lib": "^1.0.5",
"react-rbac-guard": "0.0.3",
"react-redux": "5.0.7",
"react-router-dom": "4.3.1",
"redux": "4.0.1",
"redux-immutable": "4.0.0",
"redux-saga": "0.16.2",
"reselect": "4.0.0",
"sanitize.css": "4.1.0",
"styled-components": "4.0.2",
"warning": "4.0.2"
},
"devDependencies": {
"#babel/cli": "7.1.2",
"#babel/core": "7.1.2",
"#babel/plugin-proposal-class-properties": "7.1.0",
"#babel/plugin-syntax-dynamic-import": "7.0.0",
"#babel/plugin-transform-modules-commonjs": "7.1.0",
"#babel/plugin-transform-react-constant-elements": "7.0.0",
"#babel/plugin-transform-react-inline-elements": "7.0.0",
"#babel/preset-env": "7.1.0",
"#babel/preset-react": "7.0.0",
"#babel/register": "7.0.0",
"add-asset-html-webpack-plugin": "3.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.4",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-import": "^1.11.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.19",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"css-loader": "1.0.0",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.7.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "3.1.0",
"eslint-import-resolver-webpack": "0.10.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-react": "7.11.1",
"eslint-plugin-redux-saga": "0.9.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "^4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "^24.5.0",
"jest-styled-components": "6.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lint-staged": "7.3.0",
"ngrok": "3.1.0",
"node-plop": "0.16.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.5",
"plop": "2.1.0",
"pre-commit": "1.2.2",
"prettier": "1.14.3",
"react-app-polyfill": "0.1.3",
"react-test-renderer": "16.6.0",
"rimraf": "2.6.2",
"shelljs": "0.8.2",
"style-loader": "0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.5.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.2",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3 ",
"webpack-pwa-manifest": "3.7.1",
"whatwg-fetch": "3.0.0"
}
}

Your code looks correct generally. But as I can see you are using convertToRaw twice.
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState); // <== convert to raw first time
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent)) // <== convert to raw again
);
Try to rewrite JSON.stringify(convertToRaw(rawContent)) to JSON.stringify(rawContent), I think it should fix your problem.
If that doesn't help you can check this jsFiddle which shows the common pattern how Draft.js works with local storage - https://jsfiddle.net/x2gsp6ju/4/
In this demo, you can see simple editor component, when you click on SAVE RAW CONTENT TO LOCAL STORAGE, we save current editor content as a string to local storage. We use convertToRaw and JSON.stringify for it:
saveRaw = () => {
var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
localStorage.setItem('draftRaw', JSON.stringify(contentRaw));
}
If after that you reload the page, your editor will be initialized with the content and styles what you save. Becouse of in constructor we read the appropriate local storage property, and with JSON.parse, convertFromRaw and createWithContent methods initialize editor with the previously stored content.
constructor(props) {
super(props);
let initialEditorState = null;
const storeRaw = localStorage.getItem('draftRaw');
if (storeRaw) {
const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
initialEditorState = EditorState.createWithContent(rawContentFromStore);
} else {
initialEditorState = EditorState.createEmpty();
}
this.state = {
editorState: initialEditorState
};
}

Related

craco don't work with react-scripts#^5.0.1

it shows me this error:
yarn start  ✔  27s 
yarn run v1.22.19
$ craco start
Failed to compile.
For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively, specify the 'output.chunkFormat' directly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
And this is my Package.json
{
"name": "fly-with-zoki",
"version": "1.10.0",
"private": true,
"main": "dist/index.js",
"dependencies": {
"#babel/helper-define-polyfill-provider": "^0.3.2",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fontsource/roboto": "^4.5.8",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "^4.0.0-alpha.61",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.10.16",
"#mui/lab": "^5.0.0-alpha.114",
"#mui/material": "^5.10.17",
"#mui/styled-engine-sc": "^5.10.16",
"#reduxjs/toolkit": "^1.8.0",
"#stripe/react-stripe-js": "^1.8.0-0",
"#stripe/stripe-js": "^1.29.0",
"#types/dotenv": "^8.2.0",
"amadeus": "^7.1.0",
"axios": "^0.27.1",
"bootstrap": "^4.6.1",
"chartist": "0.10.1",
"classnames": "2.3.1",
"date-fns": "^2.28.0",
"dom-lib": "^3.1.5",
"font-awesome": "^4.7.0",
"history": "5.0.0",
"jquery": "^3.6.0",
"json-schema-to-typescript": "^11.0.2",
"lib": "^4.3.3",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.3",
"node": "^16.13.0",
"notistack": "^1.0.10",
"perfect-scrollbar": "1.5.1",
"popper.js": "^1.16.1",
"prop-types": "15.7.2",
"react": "^18.2.0",
"react-chartist": "0.14.4",
"react-dom": "17.0.2",
"react-image-gallery": "^1.2.8",
"react-moment": "^1.1.2",
"react-redux": "^7.2.8",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "5.2.0",
"react-scripts": "^5.0.1",
"react-select": "^5.3.2",
"react-swipeable-views": "^0.14.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.6"
},
"scripts": {
"lint": "eslint src",
"dev": "cross-env NODE_OPTIONS= next dev",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"keywords": [],
"optionalDependencies": {
"#babel/core": "7.14.0",
"typescript": "4.2.4"
},
"devDependencies": {
"#babel/eslint-parser": "^7.19.1",
"#babel/preset-react": "^7.18.6",
"#craco/craco": "^7.0.0",
"autoprefixer": "^10.4.13",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.9",
"postcss": "^8.4.21",
"react-error-overlay": "6.0.9",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
I have tried to upgrade my react-scripts by using
npm ugdate react-scripts
npm upgrade react-scripts
yarn update react-scripts
yarn upgrade react-scripts
But no changes were applied :(

How to fix defineExpose method not defined in Vue3

I am trying to pass the method from child to parent. But somehow defineExpose() method is not working. Can you please guide me on what I am doing wrong?
If you need more detail then you can refer to my previous question
<script setup lang="ts">
import { useHead } from '#vueuse/head'
import { pageTitle } from '/#src/state/sidebarLayoutState'
pageTitle.value = 'Saved Topical'
useHead({
title: 'Saved Topical',
})
defineExpose({
})
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "28.0.0",
"#ckeditor/ckeditor5-vue": "2.0.1",
"#iconify/iconify": "2.0.2",
"#mapbox/mapbox-gl-geocoder": "4.7.1",
"#popperjs/core": "2.9.2",
"#vueform/multiselect": "1.5.0",
"#vueform/slider": "1.0.5",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"#vueuse/core": "5.0.3",
"#vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"#iconify/json": "1.1.358",
"#intlify/vite-plugin-vue-i18n": "2.2.1",
"#types/dragula": "3.7.0",
"#types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"#types/mapbox-gl": "^2.3.0",
"#types/markdown-it": "12.0.2",
"#types/node": "15.12.4",
"#types/nprogress": "0.2.0",
"#types/prismjs": "1.16.5",
"#types/simplebar": "5.3.3",
"#typescript-eslint/eslint-plugin": "4.27.0",
"#typescript-eslint/parser": "4.27.0",
"#vitejs/plugin-vue": "1.2.3",
"#vue/compiler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-components": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Any solution appreciated!
Had the same issue with Vue 3. Updating my TypeScript version from 4.5.5 to version 4.9.3 magically fixed it. Apparently older TypeScript version don't understand compiler macros like defineExpose.
And also to mute the ESLint errors, I had to prefix it (like #stefan mentioned) with:
// eslint-disable-next-line no-undef
defineExpose({ });
If you are using Veture in VS Code, disable it for your project's workspace and use Volar instead.
Update
vue version must be 3.1.3 or greater because that is when defineExpose was introduced.
https://github.com/vuejs/core/blob/main/CHANGELOG.md#313-2021-07-01
I am not sure what is wrong with your code because you are adding defineExpose.
Try this code (I changed few variables because I don't have them in my local setup):
Parent.vue
<script setup lang="ts">
import { ref } from 'vue';
import { Notyf } from 'notyf';
import Child from './Child.vue';
const addNewPaper = ref();
const notyf = new Notyf();
const successSave = () => {
addNewPaper.value.savePaper();
notyf.success('Your paper has been successfully created!');
};
</script>
<template #content>
<input type="button" #click="successSave" value="Save" />
<Child ref="addNewPaper"></Child>
</template>
Child.vue
<script setup lang="ts">
import { Notyf } from 'notyf';
import { computed, defineProps, reactive, ref } from 'vue';
const companySize = ref('');
const businessType = ref('');
const productToDemo = ref('');
const date = ref(new Date());
const initialState = reactive({
subject: '',
paper: '',
marks: '',
});
const notyf = new Notyf();
const props = defineProps({
subjects: { required: true },
});
const savePaper = () => {
notyf.success('Paper saved successfully');
};
defineExpose({
savePaper,
});
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "28.0.0",
"#ckeditor/ckeditor5-vue": "2.0.1",
"#iconify/iconify": "2.0.2",
"#mapbox/mapbox-gl-geocoder": "4.7.1",
"#popperjs/core": "2.9.2",
"#vueform/multiselect": "1.5.0",
"#vueform/slider": "1.0.5",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"#vueuse/core": "5.0.3",
"#vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"#iconify/json": "1.1.358",
"#intlify/vite-plugin-vue-i18n": "2.2.1",
"#types/dragula": "3.7.0",
"#types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"#types/mapbox-gl": "^2.3.0",
"#types/markdown-it": "12.0.2",
"#types/node": "15.12.4",
"#types/nprogress": "0.2.0",
"#types/prismjs": "1.16.5",
"#types/simplebar": "5.3.3",
"#typescript-eslint/eslint-plugin": "4.27.0",
"#typescript-eslint/parser": "4.27.0",
"#vitejs/plugin-vue": "1.2.3",
"#vue/compiler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-components": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Seems to be an eslint Problem. Above defineExpose you can add the comment:
// eslint-disable-next-line no-undef
defineExpose({ })
or click the quick Fix button that shows up if you hover over defineExpose.

Are CSS modules available for excel add-in using React?

I have created a reactjs project using the Yeoman office generator. I am trying to keep the components and the styling files together. Are css modules available for this type of projects? Below is my code:
import * as React from "react";
import classes from "./Header.module.css"
const Header = (props) => {
return <header className={classes["header-main"]}>...</header>;
};
export default Header;
For this case my Header.module.css is in the same folder as the Header.js file. But my Header.module.css file doesn't appear to have any effect on my component.
Is there something missing in my packages? Below is my package.json file.
{
"name": "office-addin-taskpane-react-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-React-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "excel",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack -p --mode production --https false",
"build:dev": "webpack --mode development --https false",
"build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
"dev-server": "webpack-dev-server --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"#fluentui/react": "^8.16.0",
"core-js": "^3.9.1",
"es6-promise": "^4.2.8",
"office-ui-fabric-react": "^7.10.0",
"react": "^16.8.2",
"react-dom": "^16.10.2",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#types/es6-collections": "^0.5.29",
"#types/find-process": "1.2.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"#types/react": "^16.8.22",
"#types/react-dom": "^16.8.4",
"#types/react-hot-loader": "^4.1.0",
"#types/webpack": "^4.4.34",
"#types/webpack-dev-server": "^3.1.6",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^5.2.4",
"eslint": "^7.20.0",
"eslint-plugin-office-addins": "^1.0.0",
"eslint-plugin-react": "^7.16.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^4.2.0",
"find-process": "^1.4.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.5.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"office-addin-cli": "^1.2.2",
"office-addin-debugging": "^4.2.2",
"office-addin-dev-certs": "^1.6.2",
"office-addin-lint": "^1.3.2",
"office-addin-manifest": "^1.6.2",
"office-addin-prettier-config": "^1.1.0",
"postcss-loader": "^4.0.0",
"react-hot-loader": "^4.12.6",
"source-map-loader": "^0.2.4",
"style-loader": "^0.23.1",
"ts-loader": "^6.2.2",
"typescript": "^4.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"prettier": "office-addin-prettier-config"
}
Any insight is appreciated.
In your className you pretend the string as object.. you can replace with that.
return <header className={classes.header-main}>...</header>;
and most of the cases in your module.css file is better to name it as camelCase for example ".headerMain"

// #flow: Uncaught ReferenceError: number is not defined

I just copied an example from the official flow website:
// #flow
function doSomething<T>(param: T): T {
// ...
return param;
}
doSomething<number>(3);
And getting the error:
Uncaught ReferenceError: number is not defined
Though the following code works:
function abc(a: number) {
console.log(a);
}
What's wrong with the first snippet?
"flow-bin": "^0.92.1",
"flow-runtime": "^0.17.0",
"flow-typed": "^2.4.0"
I run app with
npm run dev
Here's a complete package.json
{
"name": "myapp",
"productName": "ElectronReact",
"version": "0.13.2",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
"scripts": {
"build": "concurrently \"npm run build-main\" \"npm run build-renderer\"",
"build-dll": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.dll.js --colors",
"build-main": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --colors",
"build-renderer": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.prod.js --colors",
"dev": "cross-env START_HOT=1 node -r babel-register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 npm run start-renderer-dev",
"electron-rebuild": "electron-rebuild --parallel --force --types prod,dev,optional --module-dir app",
"flow": "flow",
"flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
"lint": "cross-env NODE_ENV=development eslint --cache --format=node_modules/eslint-formatter-pretty .",
"lint-fix": "npm run lint -- --fix",
"lint-styles": "stylelint app/*.css app/components/*.css --syntax scss",
"lint-styles-fix": "stylefmt -r app/*.css app/components/*.css",
"package": "npm run build && build --publish never",
"package-all": "npm run build && build -mwl",
"package-linux": "npm run build && build --linux",
"package-win": "npm run build && build --win --x64",
"postinstall": "node -r babel-register internals/scripts/CheckNativeDep.js && npm run flow-typed && npm run build-dll && electron-builder install-app-deps && node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
"prestart": "npm run build",
"start": "cross-env NODE_ENV=production electron ./app/",
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./app/main.dev",
"start-renderer-dev": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack-dev-server/bin/webpack-dev-server --config webpack.config.renderer.dev.js",
"test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings -r babel-register ./internals/scripts/RunTests.js",
"test-all": "npm run lint && npm run flow && npm run build && npm run test && npm run test-e2e",
"test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings -r babel-register ./internals/scripts/RunTests.js e2e",
"test-watch": "npm test -- --watch"
},
"browserslist": "electron 1.6",
"build": {
"productName": "ElectronReact",
"appId": "org.develar.ElectronReact",
"files": [
"dist/",
"node_modules/",
"app.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"deb",
"AppImage"
],
"category": "Development"
},
"directories": {
"buildResources": "resources",
"output": "release"
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/chentsulin/electron-react-boilerplate.git"
},
"author": {
"name": "C. T. Lin",
"email": "chentsulin#gmail.com",
"url": "https://github.com/chentsulin"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/chentsulin/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"redux",
"flow",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/chentsulin/electron-react-boilerplate#readme",
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js"
],
"moduleDirectories": [
"node_modules",
"app/node_modules"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"setupFiles": [
"./internals/scripts/CheckBuiltsExist.js"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^22.1.0",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-flow-runtime": "^0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.3.0",
"concurrently": "^3.5.1",
"cross-env": "^5.1.3",
"cross-spawn": "^6.0.4",
"css-loader": "^0.28.9",
"detect-port": "^1.2.2",
"electron": "^1.7.11",
"electron-builder": "^19.55.3",
"electron-devtools-installer": "^2.2.3",
"electron-rebuild": "^1.7.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-formatter-pretty": "^1.3.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-compat": "^2.2.0",
"eslint-plugin-flowtype": "^3.2.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.7.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-react": "^7.6.1",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"fbjs-scripts": "^0.8.1",
"file-loader": "^1.1.6",
"flow-bin": "^0.92.1",
"flow-runtime": "^0.17.0",
"flow-typed": "^2.4.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^22.1.4",
"minimist": "^1.2.0",
"node-sass": "^4.7.2",
"npm-logical-tree": "^1.2.1",
"react-test-renderer": "^16.2.0",
"redux-logger": "^3.0.6",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"sinon": "^4.2.2",
"spectron": "^3.8.0",
"style-loader": "^0.20.1",
"stylefmt": "^6.0.0",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0",
"uglifyjs-webpack-plugin": "1.1.8",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.2",
"webpack-dev-server": "^2.11.1",
"webpack-merge": "^4.1.1"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0",
"devtron": "^1.4.0",
"electron-debug": "^1.5.0",
"font-awesome": "^4.7.0",
"history": "^4.7.2",
"immutable": "^3.8.2",
"jquery": "^3.3.1",
"normalizr": "^3.2.4",
"popper.js": "^1.14.3",
"react": "^16.7.0",
"react-alert-template-basic": "^1.0.0",
"react-dom": "^16.7.0",
"react-hot-loader": "^4.0.0-beta.13",
"react-notification-system": "^0.2.17",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-tooltip": "^3.6.1",
"react-transition-group": "^2.3.1",
"reactstrap": "^7.1.0",
"redux": "^3.7.2",
"redux-form": "^7.3.0",
"redux-form-input-masks": "^1.1.4",
"redux-persist": "^5.10.0",
"redux-saga": "^0.16.2",
"source-map-support": "^0.5.3"
},
"devEngines": {
"node": ">=7.x",
"npm": ">=4.x",
"yarn": ">=0.21.3"
}
}
.flowconfig
[ignore]
<PROJECT_ROOT>/node_modules/*
<PROJECT_ROOT>/app/main.prod.js
<PROJECT_ROOT>/app/main.prod.js.map
<PROJECT_ROOT>/app/dist/.*
<PROJECT_ROOT>/resources/.*
<PROJECT_ROOT>/release/.*
<PROJECT_ROOT>/dll/.*
<PROJECT_ROOT>/release/.*
<PROJECT_ROOT>/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/internals/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/internals/flow/CSSModule.js.flow'
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/internals/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
Explicit type parameters (like <number>) are only available in Babel 7. Your code is being executed as doSomething < number

How long does it take to build an electron project?

I have a small project with few npm dependencies and it is taking more than 30 minutes (and counting) to build. I don't know if it is normal or there is something wrong that is delaying the build.
I have two questions:
Is it normal taking that long?
How long does an average project take to build?
My package.json:
{
"name": "...",
"version": "0.0.1",
"author": "Ricardo Villagrana <...#gmail.com>",
"description": "...",
"license": null,
"main": "./dist/electron/main.js",
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"e2e": "npm run pack && mocha test/e2e",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"test": "npm run unit && npm run e2e",
"unit": "karma start test/unit/karma.conf.js",
"postinstall": "npm run lint:fix && electron-builder install-app-deps",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"build": {
"productName": "... - DektopApp",
"appId": "com.heroku.XXX",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico"
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.8",
"#fortawesome/free-solid-svg-icons": "^5.5.0",
"#fortawesome/vue-fontawesome": "^0.1.2",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"bulma": "^0.7.2",
"electron-json-storage": "^4.1.4",
"font-awesome": "^4.7.0",
"sqlite3": "^4.0.3",
"vue": "^2.5.16",
"vue-electron": "^1.0.6",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vuex": "^3.0.1",
"vuex-electron": "^1.0.0"
},
"devDependencies": {
"ajv": "^6.5.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-istanbul": "^4.1.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^2.1.2",
"chai": "^4.1.2",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.4",
"electron-builder": "^20.19.2",
"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4",
"electron-packager": "^12.2.0",
"electron-rebuild": "^1.8.2",
"electron-winstaller": "^2.7.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-html": "^4.0.3",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"inject-loader": "^4.0.1",
"karma": "^2.0.2",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.1.2",
"karma-electron": "^6.0.0",
"karma-mocha": "^1.3.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.32",
"karma-webpack": "^3.0.0",
"mini-css-extract-plugin": "0.4.0",
"mocha": "^5.2.0",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"postcss-loader": "^3.0.0",
"require-dir": "^1.0.0",
"sass-loader": "^7.0.3",
"spectron": "^3.8.0",
"style-loader": "^0.21.0",
"tailwindcss": "^0.7.2",
"url-loader": "^1.0.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.2.4",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3"
}
}
It depends upon a lot of factors including your hardware and size of project. But in general, for medium size projects, is should not take that long.
It is usually wrapped up in a few minutes, say 3-4 minutes on decent hardware.
A few observations:
As per your dependency tree, it doesn't look like you have any heavy dependencies. So assuming you're on a decent hardware it should not take that long.
Also, looks like you're using webpack, make sure you've set your project directory correctly, and it does not includes your node_modules folder. Because if it does, large build times can be explained due to webpack bundling your entire node_modules dir instead of the usual src dir.
If it's a typescript project, make sure to add exclude key in your tsconfig.json file for all (if any) pre-compiled library that you're using outside of your node modules dir. This has personally happened to me before, and it does increases your build time rather significantly.

Categories