Resolve 14.1.1 incompatibility with eslint & make sure that spec/dummy is linted by eslint

.eslintignore

@@ -1,10 +1,14 @@
 node_modules
 coverage
 spec/react_on_rails/dummy-for-generators
-spec/dummy
+spec/dummy/.yalc
+spec/dummy/public
+spec/dummy/vendor
+spec/dummy/tmp
+spec/dummy/app/assets/config/manifest.js
+spec/dummy/client/node_modules
+spec/dummy/client/app/components/HelloWorldReScript.res.js
 node_package/lib/
-node_package/tests/node_modules
-node_package/webpack.config.js
 **/node_modules/**
 **/assets/webpack/**
 **/public/webpack/**

.eslintrc

@@ -41,14 +41,18 @@ rules:
   object-curly-newline: 0
   no-restricted-syntax: ["error", "SequenceExpression"]
   # https://stackoverflow.com/a/59268871/5241481
-  import/extensions: ['error', 'ignorePackages', {"js": 'never',"ts": "never"}]
+  import/extensions: ['error', 'ignorePackages', {"js": 'never', "jsx": 'never', "ts": "never", " ": "never"}]
 
   # https://github.com/benmosher/eslint-plugin-import/issues/340
   import/no-extraneous-dependencies: 0
 
+  react/forbid-prop-types: 0
+  jsx-a11y/anchor-is-valid: 0
+
 settings:
   import/core-modules:
     - react-redux
   import/resolver:
+    alias: [ ["Assets", "./spec/dummy/client/app/assets"] ]
     node:
-      extensions: [".js", ".ts", ".d.ts"]
+      extensions: [".js", ".jsx", ".ts", ".d.ts"]

.github/workflows/lint-js-and-ruby.yml

@@ -45,12 +45,29 @@ jobs:
     - name: Install Node modules with Yarn for renderer package
       run: |
         yarn install --no-progress --no-emoji
+        sudo yarn global add yalc
+    - name: yalc publish for react-on-rails
+      run: yalc publish
+    - name: Save spec/dummy/node_modules to cache
+      uses: actions/cache@v4
+      with:
+        path: spec/dummy/node_modules
+        key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-newest
+    - name: yalc add react-on-rails
+      run: cd spec/dummy && yalc add react-on-rails
+    - name: Install Node modules with Yarn for dummy app
+      run: cd spec/dummy && yarn install --no-progress --no-emoji
     - name: Install Ruby Gems for package
       run: bundle check --path=vendor/bundle || bundle _2.5.9_ install --path=vendor/bundle --jobs=4 --retry=3
     - name: Lint Ruby
       run: bundle exec rubocop
     - name: Install Node modules with Yarn for dummy app
       run: cd spec/dummy && yarn install --ignore-scripts --no-progress --no-emoji
+    - name: Save dummy app ruby gems to cache
+      uses: actions/cache@v4
+      with:
+        path: spec/dummy/vendor/bundle
+        key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}-oldest
     - name: Install Ruby Gems for dummy app
       run: |
         cd spec/dummy

CHANGELOG.md

@@ -21,6 +21,7 @@ Changes since the last non-beta release.
 #### Fixed
 - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91).
 - Disable `esModuleInterop` to increase interoperability [PR 1699](https://github.com/shakacode/react_on_rails/pull/1699) by [alexeyr-ci](https://github.com/alexeyr-ci).
+- Resolved 14.1.1 incompatibility with eslint & made sure that spec/dummy is linted by eslint. [PR 1693](https://github.com/shakacode/react_on_rails/pull/1693) by [judahmeek](https://github.com/judahmeek).
 
 ### [14.1.1] - 2025-01-15
 

package.json

@@ -2,6 +2,7 @@
   "name": "react-on-rails",
   "version": "14.1.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
+  "main": "node_package/lib/ReactOnRails.js",
   "exports": {
     ".": {
       "node": "./node_package/lib/ReactOnRails.node.js",
@@ -26,6 +27,7 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-config-shakacode": "^16.0.1",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^3.4.1",
@@ -42,8 +44,7 @@
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.2"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": ">= 16",
     "react-dom": ">= 16"

spec/dummy/babel.config.js

@@ -1,5 +1,6 @@
-module.exports = function (api) {
-  const defaultConfigFunc = require('shakapacker/package/babel/preset.js');
+const defaultConfigFunc = require('shakapacker/package/babel/preset');
+
+module.exports = function createBabelConfig(api) {
   const resultConfig = defaultConfigFunc(api);
   const isProductionEnv = api.env('production');
   const isDevelopmentEnv = api.env('development');

spec/dummy/client/app/components/RouterLayout.jsx

@@ -1,10 +1,9 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, Route, Switch } from 'react-router-dom';
 import RouterFirstPage from './RouterFirstPage';
 import RouterSecondPage from './RouterSecondPage';
 
-const RouterLayout = ({ children }) => (
+const RouterLayout = () => (
   <div className="container">
     <h1>React Router is working!</h1>
     <p>
@@ -29,8 +28,4 @@ const RouterLayout = ({ children }) => (
   </div>
 );
 
-RouterLayout.propTypes = {
-  children: PropTypes.object,
-};
-
 export default RouterLayout;

spec/dummy/client/app/packs/rescript-components.js

@@ -4,4 +4,4 @@
 
 import HelloWorldReScript from '../components/HelloWorldReScript.res.js';
 
-export { HelloWorldReScript };
+export default HelloWorldReScript;

spec/dummy/client/app/packs/server-bundle.js

@@ -1,7 +1,7 @@
-// import statement added by react_on_rails:generate_packs rake task
-import './../generated/server-bundle-generated.js';
 // Shows the mapping from the exported object to the name used by the server rendering.
 import ReactOnRails from 'react-on-rails';
+// import statement added by react_on_rails:generate_packs rake task
+import './../generated/server-bundle-generated';
 // Example of server rendering with no React
 import HelloString from '../non_react/HelloString';
 

spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx

@@ -1,5 +1,6 @@
 // Example of incorrectly taking two params and returning JSX
-import React, { useState } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 import RailsContext from '../components/RailsContext';
 
@@ -11,6 +12,12 @@ const ContextFunctionReturnInvalidJSX = (props, railsContext) => (
   </>
 );
 
+ContextFunctionReturnInvalidJSX.propTypes = {
+  helloWorldData: PropTypes.shape({
+      name: PropTypes.string,
+    }).isRequired,
+}
+
 /* Wrapping in a function would be correct in this case, since two params
    are passed to the registered function:
 

spec/dummy/client/app/startup/HelloTurboStream.jsx

@@ -7,7 +7,7 @@ import css from '../components/HelloWorld.module.scss';
 const HelloTurboStream = ({ helloTurboStreamData, railsContext }) => {
   const [name, setName] = useState(helloTurboStreamData.name);
   const nameDomRef = useRef(null);
-
+  // eslint-disable-next-line no-unused-vars
   const handleChange = () => {
     setName(nameDomRef.current.value);
   };

spec/dummy/client/app/startup/HelloWorldHooks.jsx

@@ -1,5 +1,6 @@
 // Super simple example of the simplest possible React component
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 
 // TODO: make more like the HelloWorld.jsx
@@ -16,4 +17,10 @@ function HelloWorldHooks(props) {
   );
 }
 
+HelloWorldHooks.propTypes = {
+  helloWorldData: PropTypes.shape({
+      name: PropTypes.string,
+    }).isRequired,
+}
+
 export default HelloWorldHooks;

spec/dummy/client/app/startup/HelloWorldHooksContext.jsx

@@ -1,12 +1,13 @@
 // Example of using hooks when taking the props and railsContext
 // Note, you need the call the hooks API within the react component stateless function
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 import RailsContext from '../components/RailsContext';
 
-const HelloWorldHooksContext = (props, railsContext) => {
   // You could pass props here or use the closure
-  return () => {
+const HelloWorldHooksContext = (props, railsContext) => {
+  const Result = () => {
     const [name, setName] = useState(props.helloWorldData.name);
     return (
       <>
@@ -20,6 +21,14 @@ const HelloWorldHooksContext = (props, railsContext) => {
       </>
     );
   };
+
+  Result.propTypes = {
+    helloWorldData: PropTypes.shape({
+        name: PropTypes.string,
+      }).isRequired,
+  };
+
+  return Result;
 };
 
 export default HelloWorldHooksContext;

spec/dummy/client/app/startup/HelloWorldProps.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import css from '../components/HelloWorld.module.scss';
 
-function HelloWorldHooks(props) {
+function HelloWorldProps(props) {
   console.log(`HelloWorldProps modification target prop value: ${props.modificationTarget}`);
 
   const [name, setName] = useState(props.helloWorldData.name);
@@ -24,4 +25,11 @@ function HelloWorldHooks(props) {
   );
 }
 
-export default HelloWorldHooks;
+HelloWorldProps.propTypes = {
+  helloWorldData: PropTypes.shape({
+      name: PropTypes.string,
+    }).isRequired,
+  modificationTarget: PropTypes.string.isRequired,
+}
+
+export default HelloWorldProps;

spec/dummy/client/app/startup/ImageExample.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import css from '../components/ImageExample/ImageExample.module.scss';
 
 // Note the global alias for images
-import bowerLogo from '../components/ImageExample/bower.png';
-import blueprintIcon from '../components/ImageExample/blueprint_icon.svg';
 import logo from 'Assets/images/256egghead.png';
 import legoIcon from 'Assets/images/lego_icon.svg';
 
-const TestComponent = (_props) => (
+import css from '../components/ImageExample/ImageExample.module.scss';
+
+import bowerLogo from '../components/ImageExample/bower.png';
+import blueprintIcon from '../components/ImageExample/blueprint_icon.svg';
+
+const TestComponent = () => (
   <div>
     <h1 className={css.red}>This is a test of CSS module color red.</h1>
     <hr />

spec/dummy/client/app/startup/RouterApp.server.jsx

@@ -3,10 +3,8 @@ import { StaticRouter } from 'react-router-dom';
 
 import routes from '../routes/routes';
 
-export default (props, railsContext) => {
-  return () => (
-    <StaticRouter location={railsContext.location} {...props}>
-      {routes}
-    </StaticRouter>
-  );
-};
+export default (props, railsContext) => () => (
+  <StaticRouter location={railsContext.location} {...props}>
+    {routes}
+  </StaticRouter>
+);

spec/dummy/config/webpack/commonWebpackConfig.js

@@ -5,7 +5,7 @@ const baseClientWebpackConfig = generateWebpackConfig();
 
 const webpack = require('webpack');
 
-const aliasConfig = require('./alias.js');
+const aliasConfig = require('./alias');
 
 const commonOptions = {
   resolve: {
@@ -23,7 +23,7 @@ const sassLoaderConfig = {
 
 const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
   '.scss'.match(config.test),
-);
+); // eslint-disable-next-line no-undef
 baseClientWebpackConfig.module.rules[scssConfigIndex]?.use.push(sassLoaderConfig);
 
 // add jquery

spec/dummy/config/webpack/serverWebpackConfig.js

@@ -1,4 +1,4 @@
-const { merge, config } = require('shakapacker');
+const { config } = require('shakapacker');
 const commonWebpackConfig = require('./commonWebpackConfig');
 
 const webpack = require('webpack');
@@ -28,7 +28,7 @@ const configureServer = () => {
   // replace file-loader with null-loader
   serverWebpackConfig.module.rules.forEach((loader) => {
     if (loader.use && loader.use.filter) {
-      loader.use = loader.use.filter(
+      loader.use = loader.use.filter( // eslint-disable-line no-param-reassign
         (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)),
       );
     }
@@ -65,11 +65,11 @@ const configureServer = () => {
   // Remove the mini-css-extract-plugin from the style loaders because
   // the client build will handle exporting CSS.
   // replace file-loader with null-loader
-  const rules = serverWebpackConfig.module.rules;
+  const { rules } = serverWebpackConfig.module;
   rules.forEach((rule) => {
     if (Array.isArray(rule.use)) {
       // remove the mini-css-extract-plugin and style-loader
-      rule.use = rule.use.filter((item) => {
+      rule.use = rule.use.filter((item) => { // eslint-disable-line no-param-reassign
         let testValue;
         if (typeof item === 'string') {
           testValue = item;
@@ -95,7 +95,7 @@ const configureServer = () => {
 
       // Skip writing image files during SSR by setting emitFile to false
     } else if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
-      rule.use.options.emitFile = false;
+      rule.use.options.emitFile = false; // eslint-disable-line no-param-reassign
     }
   });
 

spec/dummy/config/webpack/webpack.config.js

@@ -7,10 +7,10 @@ const envSpecificConfig = () => {
   const path = resolve(__dirname, `${env.nodeEnv}.js`);
   if (existsSync(path)) {
     console.log(`Loading ENV specific webpack configuration file ${path}`);
+    // eslint-disable-next-line import/no-dynamic-require, global-require
     return require(path);
-  } else {
-    return generateWebpackConfig();
   }
+  return generateWebpackConfig();
 };
 
 module.exports = envSpecificConfig();

yarn.lock

@@ -2992,6 +2992,11 @@ eslint-config-shakacode@^16.0.1:
     babel-eslint "8.2.2"
     eslint-config-airbnb "16.1.0"
 
+eslint-import-resolver-alias@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz#297062890e31e4d6651eb5eba9534e1f6e68fc97"
+  integrity sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==
+
 eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"