search

shakacode / react_on_rails

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
https://www.shakacode.com/react-on-rails/docs/
MIT License
5.11k stars 630 forks source link

Failed to load plugin 'react' declared in '.eslintrc.js' #1340

Closed annienero closed 3 years ago

annienero commented 3 years ago

We're upgrading to 11.3.0 to 12.0.3 and are getting the following error in our production build: UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'react' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react'

Last time we tried to upgrade we were seeing a similar issue.

Here's our package.json: { "name": "farmserver", "private": true, "sideEffects": false, "scripts": { "start": "foreman start -f Procfile.dev-server", "test": "NODE_ENV=test jest --watch --coverage", "test-ci": "NODE_ENV=test jest --maxWorkers=2", "test:generate-output": "jest --json --outputFile=jest-test-results.json", "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "generate-graphql-schema": "rake graphql:dump_schema && gql2ts ./app/graphql/schema.json --ignore-type-name-declaration -o ./app/javascript/bundles/graphql/schema.d.ts -e ../../../app/javascript/bundles/graphql/conversionConfig.js && rake graphql:generate_fragment_matcher && yarn eslint --fix ./app/javascript/bundles/graphql/schema.d.ts", "profile-webpack": "RAILS_ENV=production NODE_ENV=production bin/webpack --profile --json > stats.json && node_modules/.bin/webpack-bundle-analyzer stats.json", "typescript": "tsc --noEmit", "lint": "eslint './app/*/.{js,ts,tsx}'" }, "dependencies": { "@apollo/react-testing": "^3.1.4", "@babel/core": "^7.9.0", "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-proposal-export-default-from": "^7.2.0", "@babel/plugin-proposal-object-rest-spread": "^7.4.4", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.4.4", "@babel/preset-env": "^7.9.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.9.0", "@rails/webpacker": "^4.2.0", "@sentry/browser": "^5.20.0", "@sentry/webpack-plugin": "^1.12.1", "@types/enzyme": "^3.10.5", "@types/jest": "^26.0.5", "@types/node-sass": "^4.11.0", "@types/react": "^16.9.31", "@types/react-dom": "^16.9.6", "@types/sinon": "^9.0.0", "@types/webpack-env": "^1.15.2", "@typescript-eslint/parser": "^3.7.0", "actioncable": "^5.2.4-4", "apollo-cache": "^1.3.2", "apollo-cache-inmemory": "^1.6.3", "apollo-client": "^2.6.4", "apollo-link": "^1.2.13", "apollo-link-error": "^1.1.12", "apollo-link-http": "^1.5.16", "apollo-link-rest": "^0.7.3", "apollo-link-state": "^0.4.2", "apollo-upload-client": "^14.1.0", "apollo-utilities": "^1.3.2", "babel-core": "^6.26.3", "caniuse-lite": "^1.0.30001105", "classnames": "^2.2.6", "css-loader": "^5.0.0", "enzyme-to-json": "^3.4.3", "events": "^3.2.0", "eslint": "^7.5.0", "eslint-webpack-plugin": "^2.2.1", "file-loader": "^6.0.0", "graphql": "^14.5.8", "graphql-anywhere": "^4.2.6", "graphql-ruby-client": "^1.7.6", "graphql-tag": "^2.10.3", "history": "^4.10.1", "imagemin": "^7.0.1", "img-loader": "^3.0.1", "jest": "^26.6.2", "js-yaml": "^3.13.1", "lodash-webpack-plugin": "^0.11.5", "lodash.isequal": "^4.5.0", "lodash.omit": "^4.5.0", "moment": "^2.24.0", "postcss-cssnext": "^3.1.0", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "prop-types": "^15.0.0-0", "qs": "^6.9.1", "query-string": "^6.11.1", "react": "~16.14.0", "react-apollo": "^3.1.4", "react-dates": "^21.5.0", "react-dom": "~16.13.0", "react-html5-camera-photo": "^1.5.4", "react-modal": "^3.11.2", "react-on-rails": "^12.0.3", "react-portal": "^4.2.0", "react-router-dom": "^5.1.2", "react-select": "^3.0.8", "react-tabs": "^3.0.0", "react-tooltip": "^4.1.2", "react-with-direction": "^1.3.1", "regenerator-runtime": "^0.13.6", "reselect": "^4.0.0", "sass-loader": "^10.0.5", "subscriptions-transport-ws": "^0.9.17", "ts-loader": "^8.0.1", "typescript": "^4.0.0", "url-loader": "^4.0.0", "victory": "^35.3.5", "victory-core": "^35.3.5", "webpack": "^4.42.0", "webpack-cli": "^3.3.11", "webpack-merge": "^5.3.0" }, "devDependencies": { "@babel/preset-typescript": "^7.9.0", "@gql2ts/language-typescript": "^1.9.0", "@sambego/storybook-state": "^2.0.1", "@storybook/addon-actions": "^6.0.21 ", "@storybook/addon-jest": "^6.0.21 ", "@storybook/addon-knobs": "^6.0.21 ", "@storybook/addon-links": "^6.0.21 ", "@storybook/addons": "^6.0.21 ", "@storybook/core": "^6.0.21 ", "@storybook/react": "^6.0.21 ", "@typescript-eslint/eslint-plugin": "^3.7.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.2", "babel-loader": "^8.0.6", "babel-plugin-dynamic-import-node": "^2.2.0", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.15.1", "eslint-config-airbnb": "^18.1.0", "eslint-config-airbnb-base": "^14.1.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-promise": "^4.1.1", "eslint-plugin-react": "^7.19.0", "eslint-plugin-react-hooks": "^4.0.8", "extract-text-webpack-plugin": "^4.0.0-beta.0", "gql2ts": "^1.10.1", "identity-obj-proxy": "^3.0.0", "jest-localstorage-mock": "2.4.3", "jest-runner-eslint": "^0.10.0", "sinon": "^9.0.1", "webpack-bundle-analyzer": "^4.1.0", "webpack-dev-server": "^3.9.0" }, "jest": { "testURL": "http://localhost/" } }

Moving all dependencies from into devDependencies into dependencies fixed the build but made our Heroku slug size too large. I've spent about a week trying to isolate the specific packages that seem to be required by the production build, but due to our workflow and the fact that this only seems to fail on Heroku it's taking way too long and we are wondering if it could actually be indicative of a bigger issue or a bug.

Any ideas?

justin808 commented 3 years ago

Are you running this script during deployment, as that calls eslint.

"generate-graphql-schema": "rake graphql:dump_schema && gql2ts ./app/graphql/schema.json --ignore-type-name-declaration -o ./app/javascript/bundles/graphql/schema.d.ts -e ../../../app/javascript/bundles/graphql/conversionConfig.js && rake graphql:generate_fragment_matcher && yarn eslint --fix ./app/javascript/bundles/graphql/schema.d.ts"
justin808 commented 3 years ago

@annienero help with your Heroku slug size is something that we've done quite a lot of our customers on React on Rails Pro. For example, did you delete your node_modules directory after precompile completed?

annienero commented 3 years ago

Thanks so much for getting back. We don't run generate-graphql-schema on deploy, but our webpack config does require eslint-webpack-plugin so I've done some testing including all eslint-related packages as described below. We're not concerned with the issue of slug size since we don't want to include unnecessary dev dependencies in our production build, I was just trying to illustrate that for some reason upgrading is affecting the packages our production build needs, but we are having a very hard time isolating which ones are causing the problem. I tried moving everything eslint-related into prod dependencies and got the following in the heroku build log without any other indication of an error that I can see:

Bundle completed (17.17s)
       Cleaning up the bundler cache.
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       warning: parser/current is loading parser/ruby27, which recognizes
       warning: 2.7.2-compliant syntax, but you are running 2.7.1.
       warning: please see https://github.com/whitequark/parser#compatibility-with-ruby-mri.
       W, [2020-11-30T16:47:25.313197 #4730]  WARN -- : Setting ReactOnRails configuration for `build_production_command` is
       not necessary if you have config/webpack/production.js. When that file
       exists, React on Rails DOES NOT modify the standard assets:precompile.
       If you want React on Rails to modify to the standard assets:precompile
       to use your config/initializers/react_on_rails.rb config.build_production_command
       then delete the config/webpack/production.js.

       I, [2020-11-30T16:47:25.314870 #4730]  INFO -- : Raven 3.1.1 ready to catch errors
       I, [2020-11-30T16:47:41.874912 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/transparency-65923d16f53329a60025c524b99d4243144adfa571fc862c17726ead04117d24.css
       I, [2020-11-30T16:47:41.875281 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/transparency-65923d16f53329a60025c524b99d4243144adfa571fc862c17726ead04117d24.css.gz
       I, [2020-11-30T16:47:41.877244 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/frontend_app-687697a1738b2c298da8da85e6ca6592874a78d6eab940667170b8d218a63f1d.css
       I, [2020-11-30T16:47:41.877679 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/frontend_app-687697a1738b2c298da8da85e6ca6592874a78d6eab940667170b8d218a63f1d.css.gz
       I, [2020-11-30T16:47:41.883292 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/transparency-a547db107f5576455a30de309442d40cd4fffd9637865b31097e87f21d0b8245.js
       I, [2020-11-30T16:47:41.891987 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/transparency-a547db107f5576455a30de309442d40cd4fffd9637865b31097e87f21d0b8245.js.gz
       I, [2020-11-30T16:47:41.892508 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/application-3241fcaee6182ebc5edc60cd6b5ce2bad1f7d37090c898214855ce2f937b82f2.js
       I, [2020-11-30T16:47:41.892956 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/application-3241fcaee6182ebc5edc60cd6b5ce2bad1f7d37090c898214855ce2f937b82f2.js.gz
       I, [2020-11-30T16:47:41.898948 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/application-499267c01fe793acb35dd77043956461a2d1e3c6b0d9a5335dc87cfc7e1e67bc.css
       I, [2020-11-30T16:47:41.899371 #4730]  INFO -- : Writing /tmp/build_e98f93bd_/public/assets/application-499267c01fe793acb35dd77043956461a2d1e3c6b0d9a5335dc87cfc7e1e67bc.css.gz
       Compiling...
       Compilation failed:

 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed

We're no longer seeing UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'react' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react'. I don't fully understand the warning about config.build_production_command but we do want to use what's in config/webpack/production.js. Do you think that has something to do with this?

justin808 commented 3 years ago

@annienero did you try to run your compilation manually?

Are you sure that you are setting env values when precompiling, like this:

RAILS_ENV=production NODE_ENV=production rake assets:precopmile

And in file config/initializers/react_on_rails.rb you should delete the line: config.build_production_command per the warn message.

annienero commented 3 years ago

RAILS_ENV=production NODE_ENV=production rake assets:precompile is working fine on my machine. Was that what you meant by running the compilation manually?

In Heroku, we have set the RAILS_ENV to production. The NODE_ENV gets set in config/webpack/production.js. Here is config/webpack/production.js in case it helps:

const webpack = require('webpack');
const environment = require('./environment');

environment.plugins.prepend(
  'DefinePlugin',
  new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify("production")
  })
);

environment.entry.delete('allTests');

module.exports = environment.toWebpackConfig();
justin808 commented 3 years ago

@annienero did you solve your issue?

annienero commented 3 years ago

No still can't get it to work in heroku after upgrading unfortunately

justin808 commented 3 years ago

The NODE_ENV gets set in config/webpack/production.js

You should still have that ENV value set on your Heroku app

NODE_ENV=production

Please reopen if you feel this an issue.

Also, please consider https://github.com/sponsors/shakacode and https://www.shakacode.com/react-on-rails-pro/ for additional help related to your setup.

justin808 commented 3 years ago

@annienero I merged https://github.com/shakacode/react_on_rails/pull/1356.

Release coming soon.

annienero commented 3 years ago

wow thank you so much @justin808 we'll be on the lookout for the new release 😄