search

dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
https://craco.js.org
Apache License 2.0
7.43k stars 499 forks source link

Unable to build with Craco 7 due to attempted import error in React library #526

Closed luminajames closed 12 months ago

luminajames commented 1 year ago

What's happening

When I try to build my React app using craco build, I get the following error message:

> MyApp@1.0.0 build
> craco build

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

Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'e').

What should happen

The build should be successful.

To reproduce

I'm just running craco build. I'm unaware of any other steps to get to this point.

CRACO version (ex. 7.0.0)

7.1.0

CRACO config

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

package.json

"dependencies": {
    "@apollo/client": "^3.7.3",
    "@axe-core/react": "^4.5.2",
    "@headlessui/react": "^1.7.7",
    "@heroicons/react": "^1.0.6",
    "@ll/components": "^5.0.11-alpha.31",    <- private NPM package for internal library
    "@ll/tailwind-preset": "^3.0.1",                 <- private NPM package for internal library
    "auth0-js": "^9.20.0",
    "bluebird": "^3.7.2",
    "graphql": "^16.6.0",
    "jwt-decode": "^3.1.2",
    "konva": "^9.0.2",
    "lodash.chunk": "^4.2.0",
    "lodash.clonedeep": "^4.5.0",
    "lodash.debounce": "^4.0.8",
    "lodash.toarray": "^4.4.0",
    "lodash.uniqueid": "^4.0.1",
    "mock-apollo-client": "^1.2.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-fast-compare": "^3.2.0",
    "react-full-screen": "^1.1.1",
    "react-intl": "^6.4.4",
    "react-new-window": "^0.2.2",
    "react-router-dom": "^6.6.1",
    "react-virtual": "^2.10.4",
    "typescript": "4.4",
    "wicg-inert": "^3.1.2"
  },
"devDependencies": {
    "@craco/craco": "^7.1.0",
    "@ll/eslint-config-react": "^1.0.3",            <- private NPM package for internal library
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/node-logger": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^11.2.7",
    "@testing-library/react-hooks": "^7.0.0",
    "@testing-library/user-event": "^12.8.3",
    "@types/auth0-js": "^9.14.6",
    "@types/bluebird": "^3.5.38",
    "@types/jest": "^26.0.24",
    "@types/lodash.chunk": "^4.2.7",
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/lodash.debounce": "^4.0.7",
    "@types/lodash.toarray": "^4.4.7",
    "@types/lodash.uniqueid": "^4.0.7",
    "@types/node": "^12.20.55",
    "@types/react": "^17.0.48",
    "@types/react-dom": "^17.0.17",
    "@types/react-router-dom": "^5.3.3",
    "autoprefixer": "^9.8.7",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^8.5.0",
    "postcss": "^7.0.39",
    "react-scripts": "^5.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }

Additional information

Could this be due to a dependency on React 16 in one of the libraries I'm using? If so, is there a way for me to see which one this is? I've already searched my code and there's no place where useSyncExternalStore is imported directly.