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.