dilanx / craco

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Home Page:https://craco.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

luminajames opened this issue · comments

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.