[Request] Support CRA 5 #313

StringKe · 2021-08-05T02:49:09Z

No description provided.

adi518 · 2021-08-09T12:31:22Z

Latest version is 4. ??

marcofugaro · 2021-08-09T13:03:45Z

@adi518 the alpha 5.0 version just came out.

adi518 · 2021-08-09T13:06:40Z

It doesn't make sense to add support for alpha versions. Just wait for a stable v5 release.

marcofugaro · 2021-08-09T13:08:09Z

The preparations are the same. The guy made the issue as a reminder for when v5 comes out.

patricklafrance · 2021-08-09T14:14:27Z

What are the changes in v5 which could break CRACO?

StringKe · 2021-08-10T02:18:02Z

What are the changes in v5 which could break CRACO?

https://webpack.js.org/migrate/5/

CRA5 is expected to use Webpack 5

graup · 2021-08-30T07:54:37Z

Just tried the alpha (facebook/create-react-app#11278) and Craco breaks on

node_modules/@craco/craco/lib/loaders.js:34
    rules.some((rule, index) => {
          ^

TypeError: rules.some is not a function
    at getLoaderRecursively (node_modules/@craco/craco/lib/loaders.js:34:11)
    at node_modules/@craco/craco/lib/loaders.js:39:26

bkrausz · 2021-10-07T01:35:23Z

@graup can you share your craco.config.js that is causing this? I'm not getting that error, but I don't use rules in my config.

krreet · 2021-10-25T04:00:15Z

getting this error with CRA-5 ( wp 5 , jest 27.1.0)
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.module.rules[1] should be one of these:

bkrausz · 2021-10-25T22:13:12Z

@krreet can you share your craco.config.js that is causing this? I'm not getting that error, but I don't use rules in my config.

OriAmir · 2021-11-11T22:55:11Z

there is a plan to upgrade CRACO to CRA5 ( very close to beta)
I use for now craco with the next version and it's fine until now

olivierbeaulieu · 2021-11-16T23:21:37Z

I agree that it would be great for craco to be ready for V5 once it launches, not after.

I tried to upgrade, and I'm getting errors. Here is my craco.config.js - pretty much the basic tailwind setup:

module.exports = {
  eslint: {
    enable: false,
  },
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

And the error I'm getting:

/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:54
                craPlugins = match.loader.options.plugins();
                                                  ^

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:54:51)
    at overrideLoader (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:99:9)
    at /Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:120:13
    at Array.forEach (<anonymous>)
    at overridePostcss (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:119:17)
    at overrideStyle (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/style.js:9:25)
    at mergeWebpackConfig (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:77:30)
    at overrideWebpackDev (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/override.js:11:36)
    at /Users/o/projects/s/node_modules/@craco/craco/scripts/start.js:27:5

Hope that's helpful.

dr2009 · 2021-12-11T09:05:45Z

react-script@4 -> postcss-loader@3
react-script@5 -> postcss-loader@6

postcss-loader@4

PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option, please look at docs

dr2009 · 2021-12-15T03:52:08Z

I agree that it would be great for craco to be ready for V5 once it launches, not after.

I tried to upgrade, and I'm getting errors. Here is my craco.config.js - pretty much the basic tailwind setup:

module.exports = {
  eslint: {
    enable: false,
  },
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

And the error I'm getting:

/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:54
                craPlugins = match.loader.options.plugins();
                                                  ^

TypeError: match.loader.options.plugins is not a function
    at extendsPostcss (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:54:51)
    at overrideLoader (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:99:9)
    at /Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:120:13
    at Array.forEach (<anonymous>)
    at overridePostcss (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/postcss.js:119:17)
    at overrideStyle (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/style/style.js:9:25)
    at mergeWebpackConfig (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:77:30)
    at overrideWebpackDev (/Users/o/projects/s/node_modules/@craco/craco/lib/features/webpack/override.js:11:36)
    at /Users/o/projects/s/node_modules/@craco/craco/scripts/start.js:27:5

Hope that's helpful.

CRA@5.0.0 Support for Tailwind (#11717)

drobati · 2021-12-15T12:10:10Z

CRA uses webpack 5, which doesn't use options.plugins. I'm not sure where the issue is, but webpack 5 requires the following configuration

options: {
	postcssOptions: {
	  	plugins: [require("tailwindcss"), require("autoprefixer")]
	}
}

patricklafrance · 2021-12-16T12:53:21Z

Hey everyone!

We are still using CRACO for most of our apps so we are planning on eventually supporting CRA 5.

However, like most companies we are currently short staff and have other immediate priorities.

We may be able to work on this in January or February.

Meanwhile, as always PR are welcome!

Nefcanto · 2021-12-27T05:24:40Z

My craco.config.js is this:

const path = require(`path`);
const aliases = {
  '@Form': 'src/Components/Form/Exports',
  '@List': 'src/Components/List/Exports',
  '@Browse': 'src/Components/Browse/Browse',
  '@Tab': 'src/Components/Tab/Exports',
  '@Dashboard': 'src/Components/Dashboard/Dashboard',
  '@Panel': 'src/Panel/Panel',
};

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
);

module.exports = {
  webpack: {
    alias: resolvedAliases,
    // this config, causes HolismIcon to throw react error 321 for builds
    configure: {
      resolve: {
        symlinks: false,
      },
    },
  },
}

It runs when we use npm start. But for npm build it fails.

And I'm stuck (our team is stuck) because of a vague error:

Step 13/20 : RUN npm run build
 ---> Running in 7629d400606c

> panel@0.1.0 build
> craco build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '...' in '/Company/Project/src'


The command '/bin/sh -c npm run build' returned a non-zero code: 1

As you can see the error is not helpful at all. It points to the entire src directory which is filled with hundreds of files.

I enabled --verbose and here's the log:

> panel@0.1.0 build
> craco build --verbose

craco:  Project root path resolved to:  /Company/Project
craco:  Override started with arguments:  [
  '/usr/local/bin/node',
  '/Company/Project/node_modules/@craco/craco/scripts/build.js',
  '--verbose'
]
craco:  For environment:  production
craco:  Config file path resolved to:  /Company/Project/craco.config.js
craco:  Applied craco config plugins.
craco:  Found Webpack prod config at:  /Company/Project/node_modules/react-scripts/config/webpack.config.js
craco:  Overrided ESLint config to enable an ignore file.
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
craco:  Overrided PostCSS loader.
craco:  Added webpack alias.
craco:  Applied webpack config plugins.
craco:  Overrided require cache for module: /Company/Project/node_modules/react-scripts/config/webpack.config.js
craco:  Overrided Webpack prod config.
craco:  Building CRA at:  /Company/Project/node_modules/react-scripts/scripts/build.js
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '...' in '/Company/Project/src'


The command '/bin/sh -c npm run build' returned a non-zero code: 1

And here's my package.json

{
  "name": "panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.2",
    "@date-io/date-fns-jalali": "^2.11.0",
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@headlessui/react": "^1.4.2",
    "@mui/icons-material": "^5.2.0",
    "@mui/lab": "^5.0.0-alpha.58",
    "@mui/material": "^5.2.2",
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@zoomus/websdk": "^2.1.1",
    "axios": "^0.24.0",
    "date-fns": "^2.27.0",
    "date-fns-jalali": "^2.27.0-0",
    "eventemitter3": "^4.0.7",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "5.0.0",
    "recharts": "^2.1.6",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build --verbose",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.7"
  }
}

msalahz · 2022-01-10T09:04:31Z

Any updates about this?

davea38 · 2022-01-12T10:37:26Z

Please god update to react-script 5 already!!

patricklafrance · 2022-01-13T18:12:34Z

Duplicate of #378

xiaohaoo · 2022-04-26T15:07:07Z

Why is it so slow to update the stable version to CRA 5?

bkrausz mentioned this issue Oct 7, 2021

Support for CRA 5 #332

Merged

supriome mentioned this issue Dec 14, 2021

Update CRACO for create-react-app v5 #353

Closed

jawadsh123 mentioned this issue Dec 16, 2021

UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function facebook/create-react-app#11777

Open

patricklafrance mentioned this issue Jan 1, 2022

fixes peer dependency issue and updates README #367

Merged

eran-pinhas mentioned this issue Jan 3, 2022

Upgrade to react-dcripts 5.0.0 #370

Closed

patricklafrance mentioned this issue Jan 13, 2022

**** Update to CRA 5 **** #378

Closed

patricklafrance marked this as a duplicate of #378 Jan 13, 2022

patricklafrance closed this as completed Jan 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Request] Support CRA 5 #313

[Request] Support CRA 5 #313

StringKe commented Aug 5, 2021

adi518 commented Aug 9, 2021

marcofugaro commented Aug 9, 2021

adi518 commented Aug 9, 2021

marcofugaro commented Aug 9, 2021

patricklafrance commented Aug 9, 2021

StringKe commented Aug 10, 2021

graup commented Aug 30, 2021 •

edited

Loading

bkrausz commented Oct 7, 2021

krreet commented Oct 25, 2021 •

edited

Loading

bkrausz commented Oct 25, 2021

OriAmir commented Nov 11, 2021 •

edited

Loading

olivierbeaulieu commented Nov 16, 2021 •

edited

Loading

dr2009 commented Dec 11, 2021

dr2009 commented Dec 15, 2021 •

edited

Loading

drobati commented Dec 15, 2021 •

edited

Loading

patricklafrance commented Dec 16, 2021

Nefcanto commented Dec 27, 2021

msalahz commented Jan 10, 2022

davea38 commented Jan 12, 2022

patricklafrance commented Jan 13, 2022

xiaohaoo commented Apr 26, 2022

[Request] Support CRA 5 #313

[Request] Support CRA 5 #313

Comments

StringKe commented Aug 5, 2021

adi518 commented Aug 9, 2021

marcofugaro commented Aug 9, 2021

adi518 commented Aug 9, 2021

marcofugaro commented Aug 9, 2021

patricklafrance commented Aug 9, 2021

StringKe commented Aug 10, 2021

graup commented Aug 30, 2021 • edited Loading

bkrausz commented Oct 7, 2021

krreet commented Oct 25, 2021 • edited Loading

bkrausz commented Oct 25, 2021

OriAmir commented Nov 11, 2021 • edited Loading

olivierbeaulieu commented Nov 16, 2021 • edited Loading

dr2009 commented Dec 11, 2021

dr2009 commented Dec 15, 2021 • edited Loading

drobati commented Dec 15, 2021 • edited Loading

patricklafrance commented Dec 16, 2021

Nefcanto commented Dec 27, 2021

msalahz commented Jan 10, 2022

davea38 commented Jan 12, 2022

patricklafrance commented Jan 13, 2022

xiaohaoo commented Apr 26, 2022

graup commented Aug 30, 2021 •

edited

Loading

krreet commented Oct 25, 2021 •

edited

Loading

OriAmir commented Nov 11, 2021 •

edited

Loading

olivierbeaulieu commented Nov 16, 2021 •

edited

Loading

dr2009 commented Dec 15, 2021 •

edited

Loading

drobati commented Dec 15, 2021 •

edited

Loading