search

timarney / react-app-rewired

Override create-react-app webpack configs without ejecting
MIT License
9.77k stars 425 forks source link

Support react-scripts@5.0.0 #587

Closed mushan0x0 closed 2 years ago

mushan0x0 commented 2 years ago

react-scripts@5.0.0 was released, and an error was reported by directly updating react-scripts@4.0.3 to 5

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.output has an unknown property 'jsonpFunction'. These properties are valid:
   object { assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
   Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?
mrnerdhair commented 2 years ago

This means that your webpack override in react-app-rewired.config.js needs updating; it's not an issue with react-app-rewired itself.

mariano-filipe commented 2 years ago

In my case, the problematic thing is that react-scripts@5.0 depends on babel-jest 27.x which uses ESM. This package is assuming that babel-jest 26.x will be used by react scripts as it can be shown in this code: https://github.com/timarney/react-app-rewired/blob/caa9c88ab1c3a0f30ab4e5423cb53104070f4988/scripts/utils/babelTransform.js#L1-L16

This code is causing issues with react-scripts v5 because the createTransformer function is exported via a default export (ESM) causing the following exception:

TypeError: babelJest.createTransformer is not a function
    at Object.<anonymous> (/home/filipe/<redacted>/node_modules/react-app-rewired/scripts/utils/babelTransform.js:16:28)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at requireOrImportModule (/home/filipe/<redacted>/node_modules/jest-util/build/requireOrImportModule.js:53:28)
    at /home/filipe/<redacted>/node_modules/@jest/transform/build/ScriptTransformer.js:383:73
    at Array.map (<anonymous>)
timarney commented 2 years ago

Closing - should be good on this now. https://github.com/timarney/react-app-rewired/pull/530#issuecomment-1001025219