Skip to content

Exploring the option to eject from CRA#792

Open
Gnito wants to merge 71 commits intomainfrom
eject-from-CRA
Open

Exploring the option to eject from CRA#792
Gnito wants to merge 71 commits intomainfrom
eject-from-CRA

Conversation

@Gnito
Copy link
Contributor

@Gnito Gnito commented Feb 25, 2026

Webpack configs in the repo

Having these configs in the repo gives more power for customizers - but that also means that it is more likely that the configs end up causing issues that's really difficult to fix. Therefore, unless you know what you are doing, you should avoid modifying them.

Background

Sharetribe Web Template uses a fork of Create React App (CRA), called sharetribe-scripts. The fork was there because Template supports also server-side rendering, code-splitting, etc.

Since Create React App has been deprecated and has not received updates for a long time, it has become more of a blocker for updating the dependency tree through a several interconnected packages that the CRA consisted of. The sharetribe-scripts is just fork of react-scripts package.

Ejection

Ejection extracted build,start, and test scripts to scripts directory. In addition, it created a config directory to the root. The config then contained Webpack configs and related files. It also referenced other CRA-related packages, which also needs to be inlined (or forked). This PR inlined those packages (babel-preset-react-app, eslint-config-react-app, and react-dev-utils) to the config/ directory.

Extra notes

The private postcss-apply plugin is not included anymore. It was a fallback setup for a deprecation on a past version of the sharetribe-scripts.

Currently, this repository does not use Eslint. The related devDependencies are still included here, but the full eslint-ruleset was reduced when updating those packages. You could expand this rough config to your own needs. This PR tested the included setup a bit and changed some very old eslint code comments because of it. (When Prettier was released, we dropped Eslint support - but there are certainly arguments for taking modern Eslint back into the tool box. However, we didn't do that in this PR.)

CRA also contains support for other features that are not used in this project. E.g. TypeScript.
Most devDependencies related to these features are included in some form.
(Note: if you want to use SASS or Tailwind, you need to figure out the best way to do that. It was not included.)

JavaScript world is also slowly moving from CJS modules to ES modules. This PR tries to update all the dependencies as far as possible, but because some deps have moved to ES-only setup, and some are not, not all the dependencies are yet on the most recent versions. This is something we need to tackle in the future.

The dotenv package was updated quite much - and that included changes to how hashtags and backticks are used. So, pay attention to environment variables working when testing this PR.

The babel-jest dependency does not support NodeJS@v23 at all. So, we need to drop that support too.

Some SASS-related loaders and configs were not included.

Most of the 12k of additions/deletions on this PR is coming from yarn.lock file.

Gnito added 30 commits February 25, 2026 13:08
webpack-dev-server: 4.6.0 > 5.0.0
webpack-manifest-plugin: 4.0.2 > 5.0.0
@pmmmwh/react-refresh-webpack-plugin: 0.5.3 > 0.6.2
terser-webpack-plugin: 5.2.5 > 5.3.16
workbox-webpack-plugin: 6.4.1 > 7.4.0
- postcss-loader: 6.2.1 > 8.2.0
- postcss-normalize: 10.0.1 > 13.0.1
webpack and jest already configure the preset directly
Gnito added 27 commits February 25, 2026 15:37
Note:
- cache.js was not explicitly returning boolean on set trap
- jsdom didn't keep 'this' instance on server/api-util/lineItemsHelpers.js
  when other functions on module were referenced. Changed to use 'exports'.
Note: snapshot format changes were not encountered.
Old format should be available with something like this on package.json:
"snapshotFormat": {
  "escapeString": true,
  "printBasicPrototype": true
}
Update dotenv-expand: 5.1.0 > 12.0.3
Note:
dotenv@15: "#" starts a comment unless the value is in quotes
dotenv@16: Backtick handling changed; values with backticks must be quoted.
dotenv@17: Default quiet is false, but we set quiet: true
Note: Template does not use typescript. This update has not been tested.
Note: we don't have eslint in use atm.
(This just bring the codebase closer to the example in config/eslint-config-react-app)
loader: require.resolve('source-map-loader'),
},
{
// "oneOf" will traverse all following loaders until one will
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this something where we'd need to add a comment about the sharetribeWebpackConfig.js checkConfigStructure breaking if this array is changed, or is that handled somewhere else in the code?

"workbox-webpack-plugin": "^7.4.0"
},
"resolutions": {
"sharetribe-scripts/webpack-dev-server/express/path-to-regexp": "0.1.12",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this obsolete?

'ModuleNotFoundPlugin'
));
const ForkTsCheckerWebpackPlugin =
process.env.TSC_COMPILE_ON_ERROR === 'true'
Copy link
Contributor

@SariSaar SariSaar Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these env variables (i.e. ones added in this file) something that we should document, and if so, what would be a good place to do so?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants