Related
I'm taking a ReactJS course, and I am on the final lesson, which is posting my app to Heroku. However, whenever I try to do this, I get these errors:
/tmp/build_64ba7376/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
Error: Cannot find module 'uglifyjs-webpack-plugin'
...
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! react-project#1.0.0 build: `cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --color
...
To https://git.heroku.com/tvh-bottega-react-js-project.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/tvh-bottega-react-js-project.git'
And these are the app's dependencies:
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"ajv": "6.12.0",
"autoprefixer": "^9.1.0",
"axios": "^0.21.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-async-to-promises": "^1.0.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"debug": "^2.6.9",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^4.2.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.1.0",
"express": "4.17.1",
"extract-loader": "^2.0.1",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-to-draftjs": "^1.5.0",
"html-webpack-plugin": "^3.2.0",
"moment": "^2.29.1",
"node-sass": "^4.13.1",
"postcss-loader": "^2.1.6",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone-component": "^3.2.0",
"react-html-parser": "^2.0.2",
"react-modal": "^3.14.3",
"react-redux": "7.2.0",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"react-truncate": "^2.4.0",
"redux": "4.0.5",
"sass-loader": "^7.1.0",
"striptags": "^3.2.0",
"style-loader": "^0.21.0",
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.10.3",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.2"
},
"devDependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"uglifyjs-webpack-plugin": "^1.3.0"
}
NPM (version 6.x I believe), NodeJS(I think the latest version), Axios, React Dropzone Component, Font Awesome, React Modal Library, DraftJS, React HTML Parser, Striptags, and Truncate packages installed. I've tried re-installing uglifyjs but still get the same error. I've tried to repair npm (as it has some errors), but every attempt ends in failure (it says something about Python in the stack trace).
I've followed along with Heroku's basic troubleshooting guides, but my builds always fail at this stage. What should I do to fix this?
Try to install "uglifyjs-webpack-plugin" not as devDependencies and try to deploy again.
I took over a ASP.net solution with multiple projects in Visual Studio (Professional 2017), one of these projects is in React. I have some experience with React-Native, but I am rather new to React, plus I am new to the code base I inherited.
Since the project was using many outdated and potentially insecure packages (according to npm audit), I decided to update using NPM by carefully replacing some ^1.2.3 with * inside my package.json (see below) as I read somewhere that this is common procedure.
Although there are no errors displayed in Visual Studio's Error List, the React project has troubles to compile and I am seeing an empty page in the browser. The error code is
index.tsx:1 Uncaught Error: Module parse failed: Unexpected token (51:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(
> <LocaleProvider locale={enUS}>
| <Provider store={store}>
| <Layout>
at eval (index.tsx:1)
at Object../src/index.tsx (bundle.js:96)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
(anonymous) # index.tsx:1
./src/index.tsx # bundle.js:96
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:84
(anonymous) # bundle.js:87
This looks like some webpack issue, but the exact error message is changing while I am trying to resolve the dependencies.
More curiously, my IDE is crashing after a few minutes, while contentiously creating files named VMxx, see my screenshot of the solution explorer
Inside those files I find e.g.
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.size > 0
Clearly, something went wrong with the package update. But what does the described behavior mean? Can I deduce which packages I better should not have updated?
Package.json before
"dependencies": {
"antd": "^2.10.0",
"babel-polyfill": "^6.23.0",
"download": "^6.2.5",
"immutable": "^3.8.1",
"moment": "^2.24.0",
"react": "15.5.3",
"react-dom": "15.5.3",
"react-redux": "^5.0.4",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-saga": "^0.14.8",
"reselect": "^3.0.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"#types/react": "15.0.21",
"#types/react-dom": "0.14.23",
"#types/react-redux": "^4.4.40",
"#types/react-router-redux": "^5.0.0",
"awesome-typescript-loader": "3.1.2",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-parameters": "^6.24.1",
"babel-preset-env": "^1.4.0",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^2.1.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"source-map-loader": "0.2.1",
"style-loader": "^0.17.0",
"ts-loader": "2.0.3",
"typescript": "2.2.1",
"webpack": "^2.7.0"
}
Package.json afterwards
"dependencies": {
"#types/node": "*",
"#types/react-select": "*",
"antd": "2.10.0",
"babel-polyfill": "6.23.0",
"download": "6.2.5",
"draft-js": "^0.11.0",
"immutable": "3.8.2",
"jquery": "^3.4.1",
"moment": "*",
"react": "*",
"react-dom": "*",
"react-lazy-load": "^3.0.13",
"react-redux": "*",
"react-router-dom": "*",
"react-router-redux": "*",
"redux": "3.6.0",
"redux-saga": "0.14.8",
"reselect": "3.0.1",
"webpack-cli": "^3.3.8",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#types/react": "^16.9.2",
"#types/react-dom": "0.14.23",
"#types/react-redux": "4.4.40",
"#types/react-router-dom": "^4.3.5",
"#types/react-router-redux": "5.0.0",
"ajv": "^6.10.2",
"awesome-typescript-loader": "3.1.2",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-plugin-transform-es2015-parameters": "6.24.1",
"babel-preset-env": "1.7.0",
"css-loader": "*",
"less": "2.7.3",
"less-loader": "4.1.0",
"source-map-loader": "0.2.1",
"style-loader": "0.17.0",
"ts-loader": "2.0.3",
"typescript": "2.2.1",
"webpack": "^4.40.2"
}
Beginner question. Got an app running on a server, it is a complex one.
Now in the client directory there is an index file called index.html (I thought node was using express/routed, what is it doing there)
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
//devtool: '#cheap-module-eval-source-map',
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
1) Why are the image URLS encoded? And I can instead paste absolute URLS? This is not developer friendly, makes me want to abandon Node right away if they dont have proper views and need extra steps
<img class="color loader-box-image" data-v-553e61a2="" alt=. src="data:image/png;base64,iVBOR....." LONG STRING />
2) Ok so assume I am updating the index file in there, it does not update the live page. I have to assume the index file is either cached or Node itself is caching some version of it. Is the index.html just a static file? And if not, why?
What are best practices to get a simplified workflow?
Thank you
Edit: I understand node itself is acting like a webserver (JS based) and that routes have to be established. How do static files play into this?
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"bootstrap": "^4.0.0",
"bootstrap-social": "^5.1.1",
"dependency-list": "^0.2.2",
"jquery": "^3.2.1",
"jquery-sparkline": "^2.4.0",
"moment": "^2.20.1",
"react-stockcharts": "^0.6.1",
"sitemap": "^1.13.0",
"socicon": "^3.0.5",
"vee-validate": "^2.0.2",
"vue": "^2.5.2",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-event-calendar": "git+https://git#github.com/adi-darachi/vue-event-calendar.git",
"vue-multiselect": "^2.0.8",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-search-select": "^2.5.0",
"vue-social-sharing": "^2.3.3",
"vue-socket.io": "^2.1.1-a",
"vue-tweet-embed": "^2.0.0",
"vue-virtual-scroll-list": "^1.2.4",
"vuetrend": "^0.2.3",
"vuex": "^3.0.1"
},
> "devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap-vue": "^1.4.1",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.1.11",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"npm": "^5.5.1",
"offline-plugin": "^4.9.0",
"opengraph-html-webpack-plugin": "^1.0.0",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"sitemap-webpack-plugin": "^0.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",
"webpack-merge": "^4.1.0"
},
You are conflating node and webpack. Node isn't encoding those images, one of the webpack plugins is and is doing so to save you a network request.
Additionally, you said in one of your comments:
Thanks, good advice but I cant. I simply need to modify some CSS and
swap the logo - that should be simple enough but for that I need to
get a basic understanding of NodeJS in very little time. I dont get
why there is an index.html file in the first place when I learned that
Node uses dedicated directories for files previously
You are using html-webpack-plugin. That generates the index.html file for you. Don't modify the generated file, modify the configuration that generates the file. Otherwise you're going to get a regression. Read the documentation on that plugin and you should be able to figure out where the logo is being drawn from in your code.
The problem is that this some sort of pre-built starter project, and the developer made some decisions which you don't fully understand yet.
Since this strategy has frustrated you, I recommend trying a different strategy: build the simplest possible project that you possibly can, using as few libraries as possible, and build out from there. Good luck!
I am using npm link on a parent repo (A) to link a child repo (B).
The npm link works like normal but Repo A is using babel to transpile code and seems to either ignore node_modules dependencies or symlinks.
I have a spread operator in my Repo B and I get the following error:
SyntaxError: .../www/adept-him-models/models/event/model.js: Unexpected token (78:10)
76 | return full
77 | ? {
> 78 | ...view,
| ^
79 | // add properties for a full view
80 | }
81 | : view;
Funny thing is that I'm using node version 9.4.0, which should support this natively.
My package.json's dependencies:
"devDependencies": {
"apidoc": "^0.17.6",
"apidoc-markdown": "^0.2.0",
"babel-eslint": "^8.0.1",
"babel-jest": "^20.0.3",
"cross-env": "^5.0.5",
"dotenv-safe": "^4.0.3",
"eslint": "^4.4.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.0.0",
"eslint-plugin-standard": "^3.0.1",
"jest-cli": "^20.0.4",
"mockgoose": "^6.0.8",
"nock": "^9.0.2",
"nodemon": "^1.10.2",
"opn-cli": "^3.1.0",
"sinon": "^4.0.1",
"supertest": "^3.0.0"
},
"dependencies": {
"adept-him-models": "git+ssh://git#github.com/AdeptMind/adept-him-models.git",
"async": "^2.6.0",
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-runtime": "^6.26.0",
"bluebird": "^3.5.1",
"body-parser": "^1.18.2",
"bodymen": "^1.0.3",
"compression": "^1.7.1",
"cors": "^2.8.4",
"express": "^4.16.2",
"mongoose": "^5.0.11",
"mongoose-create-unique": "^0.4.4",
"mongoose-keywords": "^0.3.2",
"morgan": "^1.7.0",
"node-random-name": "^1.0.1",
"querymen": "^2.1.3",
"random-uri": "^1.0.3",
"request": "^2.83.0",
"request-promise": "^4.2.2"
}
My .babelrc:
{
"presets": [
"es2015",
"stage-1"
],
"plugins": [
"transform-runtime"
]
}
changing .babelrc to babel.config.json worked for me.
Just did a refresh of my computer but now Im having trouble running my code....
When running "npm start" I get the following error:
> ERROR in ./~/react-dom/lib/CSSPropertyOperations.js Module not found:
> Error: Can't resolve 'fbjs/lib/memoi zeStringOnly' in
> 'C:\Code\Project.Web\node_modules\react-dom\lib'
> # ./~/react-dom/lib/CSSPropertyOperations.js 20:24-61
> # ./~/react-dom/lib/ReactDOMComponent.js #
> ./~/react-dom/lib/ReactDefaultInjection.js #
> ./~/react-dom/lib/ReactDOM.js # ./~/react-dom/index.js #
> ./source/components/index.js # multi
> (webpack)-dev-server/client?http://0.0.0.0:30 00
> webpack/hot/dev-server ./index.js
I tried to update all packages but got same error...
Here is my package.json file:
{
"name": "homecore.web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dashboard -t 'HomeCore' -- webpack-dev-server --colors --no-info",
"build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - React-Redux Boilerplate' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
"css-loader": "0.28.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"postcss-loader": "^1.3.3",
"prepush": "^3.1.11",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"alt": "0.18.6",
"alt-utils": "^1.0.0",
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.1.0",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"semantic-ui-react": "^0.68.2",
"whatwg-fetch": "^2.0.3"
},
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
Ok so after a lot of googleing, I found a work around. Im still not sure why i get this error.
But according to this post there is a way to add alias in webpack.
So i added this to my webpack.config.js
var alias = {};
alias['fbjs/lib/memoizeStringOnly'] = '../node_modules/fbjs/lib/memoizeStringOnly';
module.exports = {
.
.
alias : alias,
.
.
}
and now it works!
But, and now Im guessing, some package must be broken trying to access this component from the wrong location
Within the last week or so, I've run into the same issue but with react-dom#15.4.2 instead of react-dom#15.5.4. What I think I've found to be the issue is that Webpack isn't able to resolve the fbjs dependency within the react-dom/node_modules directory.
For me, I was able to solve the issue by including the fbjs package as an explicit dependency in the package.json. Now instead of the project-level dependency linking to the peer of react-dom, the module in react-dom links to the project-level module.
Now, I don't think this is necessarily the right solution, especially if you allow minor version bumps with '~' and '^' in your package.json, but because we are only updating our dependencies when we need to by hand, our team is comfortable specifying the version of fbjs.
Snippet of our package.json:
"dependencies": {
"assets-webpack-plugin": "3.5.1",
"babel-core": "6.24.0",
"babel-loader": "6.4.1",
"babel-preset-es2015": "6.24.0",
"babel-preset-react": "6.23.0",
"css-loader": "0.26.4",
"del": "2.2.2",
"es6-promise": "4.1.0",
"fbjs": "0.8.12",
"file-loader": "0.10.1",
"flux": "2.1.1",
"highcharts": "5.0.10",
"imports-loader": "0.7.1",
"jquery": "2.1.3",
"keymirror": "0.1.1",
"lodash": "3.10.1",
"lodash.clonedeep": "4.5.0",
"material-design-icons": "2.2.3",
"material-ui": "0.17.1",
"moment": "2.18.1",
"object-assign": "4.1.1",
"postcss-loader": "1.3.3",
"rc-progress": "2.1.0",
"react": "15.4.2",
"react-addons-perf": "15.4.2",
"react-data-grid": "1.0.85",
"react-dom": "15.4.2",
"react-highcharts": "11.5.0",
"react-router": "3.0.3",
"react-tap-event-plugin": "2.0.1",
"sass-loader": "6.0.3",
"style-loader": "0.13.2",
"superagent": "3.5.2",
"underscore": "1.8.3",
"url-loader": "0.5.8",
"webpack": "2.4.1"
},
I ran into this error as well after uninstalling a package. It seems fbjs was somehow removed as well, even though other packages still depended on it.
I fixed it by manually installing fbjs with npm install fbjs --save