Update CRACO for create-react-app v5 #353
Comments
|
Yeah! I worked with react script 5 next version for a while and craco and things looks OK for me .. |
|
I just tried it out and it seems the craco-less plugin isn't compatible for now. We will stay at V4 until this issue has been fixed. We need craco-less to compile the less stylesheets of antd. |
|
I also have this problem and hope that it will be fixed soon, and a new version of carco will be released that supports CRA5 |
|
I found some dependencies some of react-scrips's dependencies are in node_modules under directory react-scripts. An implementation like this: it will cause cannot find module problem |
|
About |
|
The problem is this line. webpack 5 use postcssOptions as postcss-loader option,while webpack 4 use loader in this way. In webpack 4, So maybe there another way to get postcssPlugins. Hope this will be fixed soon. |
|
Anyone else have issues with Jest? I'm getting: |
|
Using craco |
|
Adding for reference material: @jaxyeh forked and did some nice work on this about a month ago. May be useful if any workarounds are necessary: |
|
I'm using Tailwind 3 and here's my I upgraded my
|
|
Here's what I get now when I try to install |
it's because craco peer dep is |
Tailwind 3 configuration in CRACO is not needed anymore. |
|
@kiril-daskalov yeah Tailwind 3 does not need CRACO anymore. But I still need CRACO because of Webpack aliases and symbolic links. |
|
I upgraded to Tailwind 3. Now my app works in the development environment. However, my app breaks in build. Here's my It fails with this message: |
I am getting the exact issue as @denchen. I haven't found a solution yet. Adding here for visibility. |
Ditto - I too face the same issue as @denchen and @jamshally - It seems this is becoming a common issue. Is it possible there is a workaround or if a fix may be implemented soon? |
|
I updated
|
craco-less already fixed |
|
TypeError: babelJest.createTransformer is not a function |
|
Is there an ETA for the CRACO's support for webpackV5? |
|
Any news regarding this upgrade? We are faced with the |
|
Info available here #313 |
|
In my case as soon as I upgraded react-scripts: I also got different errors depending on what I attempted to update. And this is my craco config: const CopyWebpackPlugin = require('copy-webpack-plugin');
const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');
const rollbarPlugin = {
overrideWebpackConfig: ({ webpackConfig }) => {
if (process.env.GENERATE_SOURCEMAP === 'true') {
webpackConfig.plugins.push(
new RollbarSourceMapPlugin({
accessToken: process.env.ROLLBAR_ACCESS_TOKEN,
publicPath: 'https://example.com',
version: process.env.REACT_APP_COMMIT_REF,
})
);
}
return webpackConfig;
},
};
module.exports = {
plugins: [{ plugin: rollbarPlugin }],
babel: {
loaderOptions: (babelLoaderOptions) => {
const origBabelPresetCRAIndex = babelLoaderOptions.presets.findIndex(
(preset) => {
return preset[0].includes('babel-preset-react-app');
}
);
const origBabelPresetCRA =
babelLoaderOptions.presets[origBabelPresetCRAIndex];
babelLoaderOptions.presets[
origBabelPresetCRAIndex
] = function overridenPresetCRA(api, opts, env) {
const babelPresetCRAResult = require(origBabelPresetCRA[0])(
api,
origBabelPresetCRA[1],
env
);
babelPresetCRAResult.presets.forEach((preset) => {
// detect @babel/preset-react with {development: true, runtime: 'automatic'}
const isReactPreset =
preset &&
preset[1] &&
preset[1].runtime === 'automatic' &&
preset[1].development === true;
if (isReactPreset) {
preset[1].importSource = '@welldone-software/why-did-you-render';
}
});
return babelPresetCRAResult;
};
return babelLoaderOptions;
},
plugins: [
[
'react-intl',
{
idInterpolationPattern: '[sha512:contenthash:base64:6]',
extractFromFormatMessageCall: true,
ast: true,
},
],
],
},
webpack: {
plugins: {
alias: {
'react-redux':
process.env.NODE_ENV === 'development'
? 'react-redux/lib'
: 'react-redux',
},
add: [
new CopyWebpackPlugin({
patterns: [
{
from: 'node_modules/some-library',
to: 'some-library',
},
],
}),
],
},
},
}; |
`craco` doesn't yet support v5, and it's causing npm to freak out. See dilanx/craco#353.
`craco` doesn't yet support v5, and it's causing npm to freak out. See dilanx/craco#353.
@denchen @jamshally @cgooderham94 - Same problem here, got it to work by fiddling around in my Environmentcraco.config.js (jest) module.exports = {
/* ... */
jest: {
configure: (jestConfig, { env, paths, resolve, rootDir }) => {
jestConfig.setupFilesAfterEnv.push(`${rootDir}/../../jest.setup.js`);
/* avoid ES modules */
jestConfig.moduleNameMapper['^lodash-es$'] = 'lodash';
jestConfig.moduleNameMapper['^@antv/xflow-core/es/(.*)'] = '@antv/xflow-core/lib/$1';
return jestConfig;
}
}
}Resolution stepsYou actually just need to call it from the default export (jestjs/jest#11444) return babelJest.default.createTransformer(craBabelTransformer);For some reason (haven't really checked the full codebase : don't know what dependency update caused this) - the correct path to access the jest globals object would be jestBabelTransform = createJestBabelTransform(config.config.globals._cracoConfig);Hope it can help while we wait for a fix (or this to turn into a PR ?).. |
time to move on,😄 feat: support for CRA v5 |
What version craco-less are you using? At a glance "craco-less": "^2.0.0", seems to be working |
One possible work around for the babel-jest issue (until a new version of craco that supports react-scripts 5 is released) is to update your package.json to use the underlying "test": "craco test --env=jsdom",After "test": "react-scripts test --env=jsdom", |
|
@supriome I used patch-package to patch this file of diff --git a/node_modules/@craco/craco/lib/features/webpack/style/postcss.js b/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
index c66146a..31372ef 100644
--- a/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
+++ b/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
@@ -50,8 +50,12 @@ function extendsPostcss(match, { plugins, env }) {
} else {
let craPlugins = [];
- if (match.loader.options) {
- craPlugins = match.loader.options.plugins();
+ if (match.loader.options.postcssOptions) {
+ if (typeof match.loader.options.postcssOptions === "function") {
+ craPlugins = match.loader.options.postcssOptions().plugins;
+ } else {
+ craPlugins = match.loader.options.postcssOptions.plugins;
+ }
}
postcssPlugins = craPlugins || [];
@@ -63,13 +67,20 @@ function extendsPostcss(match, { plugins, env }) {
log("Added PostCSS plugins.");
}
- if (match.loader.options) {
- match.loader.options.plugins = () => postcssPlugins;
- } else {
- match.loader.options = {
- plugins: () => postcssPlugins
- };
+ let postcssOptions
+
+ if (match.loader.options.postcssOptions) {
+ if (typeof match.loader.options.postcssOptions === "function") {
+ postcssOptions = match.loader.options.postcssOptions();
+ } else {
+ postcssOptions = match.loader.options.postcssOptions
+ }
}
+
+ match.loader.options.postcssOptions = () => ({
+ ...postcssOptions,
+ plugins: postcssPlugins
+ });
}
}
This issue body was partially generated by patch-package. |
|
craco is still needed with tailwind 3 for anyone using |
Or something as simple as using a tailwind config file from any path other than the project root (tailwind config file housed in a common UI library, for example) |
|
Duplicate of #378 |
|
Isn't 378 technically a duplicate of this? :p /j |
|
@tom-ricci hehe yeah technically you're right ;) |
My workaround in current version of CRACO: // craco.config.js
jest: {
configure: jestConfig => lodash.merge(jestConfig, {
transform: {
// https://github.com/gsoft-inc/craco/issues/353#issuecomment-1003301013
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': './libs/jest-babel-transform.js',
},
}),
},// jest-babel-transform.js
/* eslint-disable no-underscore-dangle */
/* eslint-disable max-len */
// eslint-disable-next-line import/no-extraneous-dependencies
const babelJest = require('babel-jest');
const { isArray } = Array;
/**
* To check if support jsx-runtime
* Copy from https://github.com/facebook/create-react-app/blob/2b1161b34641bb4d2f269661cd636bbcd4888406/packages/react-scripts/config/jest/babelTransform.js#L12
*/
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false;
}
try {
require.resolve('react/jsx-runtime');
return true;
} catch (e) {
return false;
}
})();
function createJestBabelTransform(cracoConfig) {
const craBabelTransformer = {
presets: [
[
'babel-preset-react-app',
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
babelrc: false,
configFile: false,
};
if (cracoConfig) {
const { addPresets, addPlugins } = cracoConfig.jest.babel;
if (cracoConfig.babel) {
if (addPresets) {
const { presets } = cracoConfig.babel;
if (isArray(presets)) {
craBabelTransformer.presets = craBabelTransformer.presets.concat(presets);
}
}
if (addPlugins) {
const { plugins } = cracoConfig.babel;
if (isArray(plugins)) {
craBabelTransformer.plugins = plugins;
}
}
}
}
return babelJest.default.createTransformer(craBabelTransformer);
}
let jestBabelTransform;
// cracoConfig is only available inside the transform, but the transform needs to include whatever options cracoConfig
// specifies. So, the first time this transform is run, it generates a new transform -- using cracoConfig -- and
// uses that to process files.
module.exports = {
...createJestBabelTransform(),
process(src, filename, config, transformOptions) {
if (!jestBabelTransform) {
jestBabelTransform = createJestBabelTransform(config.config.globals._cracoConfig);
}
return jestBabelTransform.process(src, filename, config, transformOptions);
},
}; |
Thanks for making CRACO! Having the same issue here. The workaround provided by @xyy94813 works well. Meanwhile, Jest have released an alpha which makes this problem go away seemingly - https://github.com/facebook/jest/releases/tag/v28.0.0-alpha.1 - see jestjs/jest#11444 for further discussion. It seems that Jest being upgraded to this version in the underlying packages will make this go away. Seems that discussion has moved onto #378, but recording here as this issue doesn't come up over there. |
and others
Create-react-app v5 was just released an hour ago https://github.com/facebook/create-react-app/releases/tag/v5.0.0 and CRACO should probably update to v5 soon.
The text was updated successfully, but these errors were encountered: