Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Request] Support CRA 5 #313

Closed
StringKe opened this issue Aug 5, 2021 · 21 comments · Fixed by #332
Closed

[Request] Support CRA 5 #313

StringKe opened this issue Aug 5, 2021 · 21 comments · Fixed by #332

Comments

@StringKe
Copy link

StringKe commented Aug 5, 2021

No description provided.

@adi518
Copy link

adi518 commented Aug 9, 2021

Latest version is 4. ??

@marcofugaro
Copy link

@adi518 the alpha 5.0 version just came out.

@adi518
Copy link

adi518 commented Aug 9, 2021

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

@marcofugaro
Copy link

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

@patricklafrance
Copy link
Contributor

What are the changes in v5 which could break CRACO?

@StringKe
Copy link
Author

What are the changes in v5 which could break CRACO?

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

CRA5 is expected to use Webpack 5

@graup
Copy link

graup commented Aug 30, 2021

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
Copy link

bkrausz commented Oct 7, 2021

@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
Copy link

krreet commented Oct 25, 2021

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
Copy link

bkrausz commented Oct 25, 2021

@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
Copy link

OriAmir commented Nov 11, 2021

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
Copy link

olivierbeaulieu commented Nov 16, 2021

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
Copy link

dr2009 commented Dec 11, 2021

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
Copy link

dr2009 commented Dec 15, 2021

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.

[email protected] Support for Tailwind (#11717)

@drobati
Copy link

drobati commented Dec 15, 2021

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
Copy link
Contributor

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
Copy link

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

> [email protected] 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:

> [email protected] 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
Copy link

msalahz commented Jan 10, 2022

Any updates about this?

@davea38
Copy link

davea38 commented Jan 12, 2022

Please god update to react-script 5 already!!

@patricklafrance
Copy link
Contributor

Duplicate of #378

@patricklafrance patricklafrance marked this as a duplicate of #378 Jan 13, 2022
@xiaohaoo
Copy link

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

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 a pull request may close this issue.