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.
Related
the problem is maybe the same as the link below :
https://forum.vuejs.org/t/spread-operator-not-working-in-webview-android/74893/7
but the different is, im using laravel mix and vue 2.6.11
here is my package.json
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"build-report": "vue-cli-service build --report",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "rename .env .env_ && rename .env_ .env && php artisan ziggy:generate && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js && rename .env .env.production && rename .env_ .env"
},
"devDependencies": {
"#babel/plugin-proposal-object-rest-spread": "^7.17.3",
"#fortawesome/fontawesome-free": "^5.12.0",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue": "^0.8.0",
"#inertiajs/progress": "^0.2.7",
"#mdi/font": "^4.9.95",
"#mdi/js": "^5.9.55",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"deepmerge": "^4.2.2",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-vue": "^7.5.0",
"fibers": "^5.0.0",
"font-awesome": "^4.7.0",
"laravel-mix": "5.0.9",
"lodash": "^4.17.20",
"material-design-icons-iconfont": "^6.4.1",
"resolve-url-loader": "^3.1.2",
"roboto-fontface": "^0.10.0",
"sass": "^1.49.8",
"sass-loader": "^10.1.1",
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.4.2",
"vuetify-loader": "1.4.3"
},
"dependencies": {
"#chenfengyuan/vue-countdown": "^1.1.5",
"#mdi/light-font": "^0.2.63",
"#types/ziggy-js": "^0.9.0",
"#vue/cli-service": "^5.0.4",
"axios": "^0.21.1",
"dotenv": "^16.0.0",
"eslint": "^7.18.0",
"laravel-echo": "^1.10.0",
"lottie-player-vue": "0.0.16",
"object-to-formdata": "^4.1.0",
"pusher-js": "^7.0.2",
"qrcode": "^1.5.0",
"read-excel-file": "^5.2.28",
"sweetalert2": "^9.17.2",
"v-money": "^0.8.1",
"vee-validate": "^2.2.15",
"vform": "^1.0.1",
"vue-axios": "^2.1.5",
"vue-cli": "^2.9.6",
"vue-countdown": "^1.0.4",
"vue-excel-xlsx": "^1.2.2",
"vue-moment": "^4.1.0",
"vue-qrcode-component": "^2.1.1",
"vue-resource": "^1.5.3",
"vue-sessionstorage": "^1.0.0",
"vue-social-auth": "^1.4.9",
"vue-socket.io": "^3.0.10",
"vue2-storage": "^5.0.0",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vuex-map-fields": "^1.4.1",
"ziggy": "^2.4.0",
"ziggy-js": "^1.4.3"
}
when i call the url in webview using android studio. it says "[INFO:CONSOLE(2)] "Uncaught SyntaxError: Unexpected token ..."".
maybe the spread operator called by mistake. ?
here is my webpack.mix.js
mix
.webpackConfig({
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue')
}
},
plugins: [new VuetifyLoaderPlugin()],
})
.version()
.sourceMaps()
i still dont know how to fix this problem.
We have a NextJs app that is running for couple of years in production.
Recently I added storybook-addon-pseudo-states addon ran the code locally and tested and pushed to production. The app was running perfectly locally. believe it or not after pushing to production, production entirely went down with this weird error.
{"statusCode":500,"code":"MODULE_NOT_FOUND","error":"Internal Server Error","message":"Cannot find module 'react-is'\nRequire stack:\n- /opt/webapp/node_modules/styled-components/dist/styled-components.cjs.js\n- /opt/webapp/.next/server/pages/_document.js\n- /opt/webapp/node_modules/next/dist/next-server/server/require.js\n- /opt/webapp/node_modules/next/dist/next-server/server/load-components.js\n- /opt/webapp/node_modules/next/dist/next-server/server/api-utils.js\n- /opt/webapp/node_modules/next/dist/next-server/server/next-server.js\n- /opt/webapp/node_modules/next/dist/server/next.js\n- /opt/webapp/server.js"}
This is our package.json.
{
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev": "NODE_ENV=development yarn server-remove-types && yarn server-watch",
"build": "yarn server-remove-types && yarn server-compile && yarn server-copy && next build",
"server-remove-types": "flow-remove-types --all --pretty src/server --out-dir .untyped/server",
"server-compile": "ncc build .untyped/server/index.js --out .dist --minify --external next --external grpc",
"server-copy": "node ./util/copy.js --from .dist/index.js --to server.js",
"server-watch": "yarn server-watch-remove-types & yarn server-watch-compile & yarn server-watch-nodemon",
"server-watch-nodemon": "node .dist/index.js",
"server-watch-remove-types": "node util/watch-flow-remove-types.js --from src/server --to .untyped/server",
"server-watch-compile": "yarn server-compile --watch",
"lint-javascript": "eslint src",
"format": "eslint src --fix",
"type-install": "flow-typed install",
"type-upgrade": "flow-typed update",
"type-check": "flow check --color=always --show-all-errors",
"test-unit": "NODE_ENV=test jest --config ./config/jest.unit.config.js --colors",
"test-unit-watch": "yarn test-unit --watchAll --coverage false",
"test-unit-update-snapshots": "yarn test-unit --updateSnapshot",
"test-endpoints": "NODE_ENV=test jest --config ./config/jest.endpoints.config.js src/test/endpoints.spec.js",
"test-bdd": "echo 'Not implemented.'",
"test-contract": "echo 'Not implemented.'",
"test-e2e": "echo 'Not implemented.'",
"test-e2e-debug": "echo 'Not implemented.'",
"storybook": "start-storybook -p 3001",
"build-storybook": "build-storybook -o ./src/stories/storybook"
},
"engines": {
"node": ">=12"
},
"browserslist": [
"extends #dpgr/browserslist-config"
],
"dependencies": {
"#dpgr/browserslist-config": "^1.1.0",
"#dpgr/react-components": "^3.7.0",
"#sentry/browser": "6.10.0",
"#sentry/node": "6.10.0",
"#sentry/tracing": "6.10.0",
"#tippy.js/react": "^2.2.3",
"#vercel/ncc": "^0.31",
"axios": "0.18.1",
"babel-plugin-superjson-next": "^0.3.1",
"chart.js": "^2.9.4",
"chokidar": "^3.3.1",
"color": "^3.1.0",
"convert-array-to-csv": "^1.0.9",
"cookie": "^0.4.0",
"date-fns": "^2.4.1",
"dompurify": "^2.0.2",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"fastify": "^2.0.0",
"fastify-cookie": "^3.0.2",
"flow-remove-types": "^2.115.0",
"focus-visible": "^5.0.0",
"formik": "^1.3.2",
"fs": "^0.0.1-security",
"google-protobuf": "^3.14.0",
"grpc": "^1.24.4",
"grpc-web": "^1.2.1",
"http-status-codes": "^1.3.0",
"iban": "^0.0.14",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.11",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"next": "^10.0.0",
"next-cookies": "^2.0.3",
"next-redux-wrapper": "^7.0.0",
"node-xlsx": "^0.15.0",
"nodemon": "^2.0.2",
"nprogress": "^0.2.0",
"openid-client": "^3.13.0",
"p-queue": "^6.2.1",
"path-to-regexp": "^6.2.0",
"re-reselect": "^3.0.0",
"react": "^17.0.1",
"react-aria-modal": "^4.0.0",
"react-chartjs-2": "^2.11.1",
"react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^3.0",
"react-dom": "^17.0.1",
"react-paginate": "^6.3.0",
"react-redux": "^7.2.2",
"react-select": "^3.0.8",
"redux": "^4.0.0",
"redux-saga": "^1.1.1",
"regenerator-runtime": "^0.13.3",
"reselect": "^4.0.0",
"styled-components": "^5.0.0",
"styled-reboot": "^4.0.1",
"superjson": "^1.7.5",
"uuid": "^3.3.2",
"xlsx": "^0.17.1",
"yup": "^0.28.0"
},
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/eslint-parser": "^7.13.14",
"#babel/helper-builder-react-jsx": "^7.15.4",
"#babel/helper-builder-react-jsx-experimental": "^7.12.11",
"#babel/plugin-transform-flow-strip-types": "^7.4.4",
"#storybook/addon-actions": "6.3.12",
"#storybook/addon-controls": "^6.3.12",
"#storybook/addon-essentials": "6.3.12",
"#storybook/addon-links": "6.3.12",
"#storybook/react": "6.3.12",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "12.0.0",
"#testing-library/react-hooks": "7.0.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-loader": "^8.0.5",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-module-resolver": "^4.0",
"babel-plugin-styled-components": "^1.10.0",
"css-loader": "6.4.0",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-import-resolver-babel-module": "^5.3.0",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^23.1.1",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^4.2",
"fastify-http-proxy": "^2.1.0",
"flow-bin": "^0.110.0",
"flow-typed": "^2.4.0",
"jest": "^26.6.3",
"jest-styled-components": "^7.0.5",
"mockdate": "^2.0.5",
"pretty": "^2.0.0",
"redux-devtools-extension": "^2.13.9",
"redux-mock-store": "^1.5.3",
"redux-saga-test-plan": "^4.0.1",
"redux-testkit": "^1.0.6",
"storybook-addon-designs": "6.2.0",
"storybook-addon-next-router": "3.0.8",
"style-loader": "3.3.0",
"supertest": "^6.1.6"
},
"peerDependencies": {}
}
These are the only changes made to package.json, plus few small changes in storybook stories.
Changes to package.json
Any idea what is the root cause for this fatal production only error?
The error says you're missing the library react-is and based on your package.json it doesn't appear to be installed.
The two scenarios that come to mind to explain erroring after package install / only in production.
Scenario 1
Someone could have manually deleted react-is from the package.json at some point in time after the last package manager sync and prior to your screenshot.
Package managers sync the changes in package.json when performing installs, updates, and uninstalls. Meaning, when you added the storybook plugin it removed the react-is package because it was no longer listed in the package.json file.
Scenario 2
Since it's only happening in production the app might not be using react-is but it is still included in a file.
import ReactIs from 'react-is'
Search your app for react-is - if it's not used, remove the unused statements - if it's used you need to install the package.
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"
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
};
}
I upgraded my react/webpack app using ncu and it updated babelify to 7.2.0 (and hence babel to 6.0.0). Now I am getting the following error:
ERROR in ./app/main.js
Module build failed: ReferenceError: [BABEL] /home/ben/simple-webpack-react-starter/app/main.js: Unknown option: base.stage
Ive looked through a bunch of stack overflow posts with the same or similar errors and have done everything suggested. I'm pretty stuck! Please help. Here are the relevant files i think:
My package.json file:
{
"name": "MODA",
"version": "1.0.0",
"description": "Online Annotations",
"main": "server/index.js",
"scripts": {
"dev-server": "nodemon server/index.js --watch server",
"dev-web": "webpack-dev-server --config ./webpack-dev.config.js --hot --progress --colors --content-base build",
"dev": "nodemon server/index.js --watch server & webpack-dev-server --config ./webpack-dev.config.js --hot --progress --colors --content-base build",
"build": "rm build/*; webpack --config ./webpack-prod.config.js --progress --colors",
"start": "node server/index.js",
"test": "karma start",
"testing": "karma start --single-run=false"
},
"license": "MIT",
"dependencies": {
"compression": "^1.5.0",
"cors": "^2.7.1",
"express": "^4.13.3",
"body-parser": "*",
"ejs": "*",
"aws-sdk": "*"
},
"engines": {
"node": "5.0.0",
"npm": "2.14.9"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.0.15",
"babelify": "^7.2.0",
"bootstrap": "^3.3.5",
"css-loader": "^0.23.1",
"expect": "^1.6.0",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^2.8.1",
"image-webpack-loader": "^1.6.1",
"jquery": "^2.1.4",
"json-fs": "^1.1.1",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-cli": "0.1.2",
"karma-mocha": "^0.2.1",
"karma-sinon": "^1.0.4",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.5.1",
"mocha": "^2.2.5",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.2.0",
"nodemon": "^1.3.7",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-draggable": "^1.1.3",
"react-hot-loader": "^1.2.7",
"react-resizable-box": "^0.1.7",
"sass-loader": "^3.1.2",
"sinon": "^1.15.3",
"style-loader": "^0.13.0",
"webpack": "^1.9.11",
"webpack-dev-server": "^1.9.0"
}
}
And the relevant part of my webpack-common.config
{
test: /\.jsx?$/,
exclude: /(node_modules | bower_components)/,
loader: "babel",
query: {
presets:['es2015','stage-0', "react"]
},
},
I had this problem and I fixed it by eliminating the query in the config file and instead making a .babelrc file at project root like so:
{
"passPerPreset": true,
"presets": [
{
"plugins": [
"./build/babelRelayPlugin"
]
},
"react",
"es2015",
"stage-0"
]
}