**** Update to CRA 5 **** #378
Comments
|
Thank you, and happy holidays! I'm having this warning when running Here's my const path = require('path');
const { getLoader, loaderByName } = require('@craco/craco');
const uiPath = path.join(__dirname, '../../packages/ui');
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
if (isFound) {
const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
match.loader.include = include.concat([
uiPath,
]);
}
return webpackConfig;
},
},
};As you can see, I'm using Craco for a monorepo setup, where I have 2 CRA apps referencing the same UI package. |
|
maybe milestone or something else for progress? |
|
Update: for now I used Hey, I'm trying out the latest commit 7aab18d
and it seems like babel plugins are not forwarded to const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
/* tsConfigPath should point to the file where "paths" are specified */
tsConfigPath: "./tsconfig.paths.json",
},
},
],
babel: {
plugins: ["relay"],
},
webpack: {
alias: {
"@mui/styled-engine": "@mui/styled-engine-sc",
},
},
};Maybe this call stack helps |
This reverts the workarounds for #159, #74 and #60, as they are no longer needed. There are a few peer dependency warnings, though the examples work just fine: - The one for NextJS is tracked in vercel/next.js#31887. - CRACO support for CRA@5 is tracked in dilanx/craco#378. - The warnings for CRA are tracked in facebook/create-react-app#11982, except for the `ts-jest` one which is expected, since we're using CRA's `jest`.
|
Hey guys, I'm Felix, one of Patrick's colleagues at GSoft and I've been working on CRA 5 support. I've just published an alpha version if you want to test it out, some of the issues that have been frequently mentioned are addressed in the alpha. See here and here
Cheers |
|
I have updated to Thanks a lot! |
I am experiencing the same thing where the babel plugin is not transforming code in test (on the 7.0.0-alpha.0 release). Below is the craco config. module.exports = {
babel: {
plugins: ["styled-jsx/babel"],
},
};Here's the output |
|
For tailwind user who using style: {
postcss: {
plugins: (plugins) => {
return [
'tailwindcss',
...plugins,
];
},
env: {
stage: 3,
features: {
'hexadecimal-alpha-notation': true,
'gap-properties': true,
'color-functional-notation': true,
},
},
},
}And I am using this config to achieve addon preset env: style: {
postcss: {
loaderOptions: (postcssLoaderOptions) => {
postcssLoaderOptions.postcssOptions.plugins[2][1].features = {
'hexadecimal-alpha-notation': true,
'gap-properties': true,
'color-functional-notation': true,
};
return postcssLoaderOptions;
},
},
},Relevant Code |
|
@msieurmoustache Thank you 🙏 I'm using it to do Webpack aliases and the |
👌👌 Could you submit a PR with a recipe for tailwind? |
|
Hey! I tried to use Our config is The config is working without a problem with CRA 4 & craco 6.4.3. We also tried to not remove / add the Just to ensure it's not the which shows the same error. |
|
Hello everyone. Today I updated my app to My craco.config.js file: const path = require('path');
const CracoAntDesignPlugin = require('craco-antd');
const CracoAlias = require('craco-alias');
module.exports = {
eslintConfig: {
enable: false
},
plugins: [
{
options: {
source: 'options',
baseUrl: './',
aliases: {
"@components": './src/shared/components',
"@hooks": './src/shared/hooks',
"@services": './src/shared/services',
"@styles": './src/shared/styles',
}
},
plugin: CracoAlias,
},
{
options: {
customizeThemeLessPath: path.join(
__dirname,
'src/shared/styles/variables.antd.less'
)
},
plugin: CracoAntDesignPlugin,
}
],
};My .env file: SASS_PATH=src/shared/styles
DISABLE_ESLINT_PLUGIN=trueMy index.module.scss file: @import 'variables';
@import 'mixins';
@import '../style.variables';
.title {
font-size: 24px;
line-height: 1.1em;
color: $TM2Black;
}And warning message is: WARNING in ./src/shared/modules/modal/base/title/index.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[10].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[10].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[10].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[10].use[4]!./src/shared/modules/modal/base/title/index.module.scss)
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
* "src/"
* "src/shared"
* "src/shared/styles"
* and more ...
@ ./src/shared/modules/modal/base/title/index.module.scss 8:6-446 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-416 83:0-416 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/shared/modules/modal/base/title/index.tsx 9:0-36 29:26-33 35:17-23 42:28-37 42:49-59 55:28-35 59:19-29 84:26-32
@ ./src/shared/modules/modal/index.ts 6:0-48 6:0-48
@ ./src/shared/config/store/effects.tsx 31:0-49 142:21-36
@ ./src/shared/config/core.ts 6:0-48 6:0-48
@ ./src/bootstrap/index.tsx 21:0-47 33:21-52 34:10-30 35:10-30
@ ./src/index.tsx 10:0-32 35:42-45
132 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.67.0 compiled with 134 warnings in 1479 ms
No issues found.With previous version of dependencies there are no any warnings like this. Can anyone help me please? |
|
Maybe someone it will be helpful. For now I ended up with temporary dirty solution in const StyleAliasesFixPlugin = {
overrideWebpackConfig: (data) => {
const config = data.webpackConfig;
const sassPath = process.env.SASS_PATH;
if (!sassPath) {
return config;
}
const options = data.pluginOptions;
const aliases = options.aliases;
const rules = config.module.rules[1];
const locations = rules.oneOf.reduce((rulesAcc, rule, ruleIndex) => {
const use = rule.use || [];
const useIndex = use.findIndex(u => u.loader?.includes('sass-loader'));
return (useIndex < 0) ? rulesAcc : {
...rulesAcc,
[ruleIndex]: useIndex,
};
}, {});
const resolvePathsOptions = {
sassOptions: {
importer: (alias) => {
if (aliases.includes(alias)) {
return {
file: path.join(__dirname, sassPath, `${alias}.scss`),
};
}
return null;
},
},
};
Object.entries(locations)
.forEach(([ruleIndex, useIndex]) => rules.oneOf[+ruleIndex].use[useIndex].options = {
...rules.oneOf[+ruleIndex].use[useIndex].options,
...resolvePathsOptions
});
return config;
},
};
module.exports = {
// my config
plugins: [
// my other plugins. Note, StyleAliasesFixPlugin should be latest in order
{
options: {
aliases: ['variables', 'mixins', 'spacing-mixins'],
},
plugin: StyleAliasesFixPlugin,
},
],
}; |
|
@lkloeppel, I'm trying to reproduce your issue with the same config, but to no avail. Do you have any other dependencies worth mentioning? |
@lkloeppel I don't think this issue is related to CRACO. I think your plugins configuration doesn't work with the changes made by the CRA team to support Webpack 5. This thread is only for issue related to CRACO to help us push a new release. If you want help form the community to migrate your config to Webpack 5 I suggest you open a new issue. |
|
Not sure :( Things haven't gone the way I hoped for. At this point I don't even know if we will ever release v7. My role have changed and I don't have time (and motivation) anymore to work on CRACO. Since we are short staff, the management at GSoft won't assign anyone to this project. We might also switch to next.js, still not sure... but if we do I don't see why the company would invest on this project. If someone want to take over the project I'll hand it over to him/her. |
|
This is a sad news, but I understand. Thank you for the work you shared! |
|
Maybe an unreasonable request/silly question but would it be possible to publish the alpha version as a full package with the caveat that some things don't work? My usage of craco is super simple - basically just overriding two small things on webpack config - and I believe I would still be able to benefit from the work that's been done even though there are other outstanding issues. Alternatively, I'd be happy to contribute if there's a remaining "list of issues" that need to be attacked to make v7 a reality. Even if they aren't issues that would affect me. |
|
@nathanmmiller I could BUT not every functionnalies would work. It might creates a lot of confusion and generate many issues. That is my main concern. Most of the functionnalities works except the loader utilities which should be expended to support Webpack 5 asset modules. Would be awesome if someone is willing to contribute. Ideally, this contribution would be part of some kind of leadership transition so I won't keep responsibility of reviewing & merging PR. |
|
Why is it so slow to update the stable version to CRA 5? |
|
I am trying to override the webpack plugin config, but it didn't succeed. I wonder is something wrong with my code? Or is it because it is not available in this version? (I am using CRA V5). /* craco.config.js */
const path = require("path");
const rootPath = path.join(__dirname, "..");
const srcPath = path.join(rootPath, "src");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const { whenDev, whenProd, when } = require("@craco/craco");
module.exports = {
alias: {},
babel: {},
webpack: {
configure: (webpackConfig, { env, paths }) => {
webpackConfig.entry = {
main: [
env === "development" &&
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.appIndexJs,
].filter(Boolean),
content: path.join(srcPath, "content_script", "index.tsx"),
background: path.join(srcPath, "background_script", "index.tsx"),
};
webpackConfig.output = {
...webpackConfig.output,
...{
filename: "static/js/[name].js",
},
};
//webpackConfig.devtool = false,
webpackConfig.optimization = {
...webpackConfig.optimization,
...{
runtimeChunk: false,
},
};
//Override the webpack config plugin.
webpackConfig.plugins.map((plugin) => {
if (plugin instanceof HtmlWebpackPlugin) {
if (plugin.options) {
Object.assign(plugin.options, {
inject: true,
chunks: ["main", "background"],
template: path.resolve(__dirname, "../public/index.html"),
filename: "popup.html",
});
}
}
return plugin;
});
return webpackConfig;
},
},
};
So I am trying to modify the default output |
Is there some kind of "how to reproduce" or associated issue with this such that I could play around with it and see if I can find/contribute a solution? |
|
I have a little advice for people struggling with craco or other similar tool. If you use yarn package manager, you can patch react-scripts configs directly with "yarn patch" command. I switched to this approach in 2 projects. Hope this will help someone. |
|
A tip for newcomers like me: to create a project compatible with craco as of now, use |
|
Then I got an invisible iframe blocking interaction and the error 'process is not defined' on hot reload. I solved it following the 'If the error is not resolved' part of this blog. I think I should mention it here to help others. |
Track dilanx/craco#378 and facebook/create-react-app#11982 to revert this.
|
Here is your solution, I tested it locally and it should be working. plugins: [
...webpackConfig.plugins.map((plugin) => {
if (plugin instanceof HtmlWebpackPlugin) {
if (plugin.userOptions.template?.endsWith("index.html")) {
Object.assign(plugin.userOptions, {
filename: "popup.html",
});
}
}
return plugin;
}),
], |
Thank you for the suggestion! For something as small as a couple of And thank you Craco maintainers and collaborators for doing this work! I totally get that Next.js is a better alternative for CRA in general. For those who work with CRA - take note that CRA (specifically the React-Scripts bundle) maintainers themselves do not intend to focus on the project either.. So if you care about upgrading to CRA5 and have some serious Webpack tweaks:
|
|
CRA is moving to maintenance mode |
1 year ago post |
Yeah that's what I took from it, they are adding no more features, just keeping it alive. As long as React recommends CRA then I don't think they are abandoning it. |
|
Anybody here seen this error and know what do I need to change in the craco.config.js to fix this? I tried alpha.7 but didn't fix it. I just upgraded all of my dependencies to React 18, Webpack 5 etc. and faced this. |
|
That looks like a configuration error with webpack and not with craco specifically @totszwai. I assume you're doing something like |
|
Also, for organizational purposes, I'm locking this issue. If anyone has any issues with anything craco related, feel free to create a new issue! |
|
Discussion is now at #426. |
and others
Finally, some news about an update to CRACO for CRA 5 :)
We are aware that most of you are eager to migrate to CRA 5 and right now we are what prevents you from doing so. Thank you for your patience.
Sadly, it seem like every major update of CRA happens right before the christmas holiday. Most of us at GSoft only came back to work this week.
The good news is that we assembled a team who will be working on this in the coming weeks. I can't give you any ETA, i'll let the team give you updates about a release date but our goal is to get this out ASAP.
Meanwhile, please use this thread to make us know about any NEW issues you find after upgrading to CRA 5. It will help the team aknowledge what have to be done to support CRA 5. Before commenting, please make sure it's not already mentionned in any of those issues: #377 #353 #313
Don't open a new issue about CRA 5, it doesn't help.
Don't comment to ask for an update or let us know that you are waiting for this, it doesn't help. You can show your support with an emoji on this message instead.
Thank you!
Patrick
The text was updated successfully, but these errors were encountered: