Can't resolve 'styled-system' in '/opt/build/repo/src/pages'

Hi there,

I try to deploy my github project. Unforuntately, he says (see screenshot) :slight_smile:

Can't resolve 'styled-system' in '/opt/build/repo/src/pages'

I installed styled components. When I do npm build locally, I have 0 problems, only when I try to deploy it here.

Hopefully someone can help me out.

Can’t check since the provided information is pretty limited, but could be related to:

What info do you need in order to check/fix this problem? Github repo?

As far as I can see, the package doesn’t exist in your package.json:

According to this: Styled System, you need styled-system as a separate dependency.

Thanks a lot! I was really confused with styled-components/styled system…

While deploying the new version: I do still get an error. Is that because of the things like: X is not defined etc?

4:46:29 PM: build-image version: 524714d1a66d1a967316f5c39465e22c77fdd56c (focal) 4:46:29 PM: build-image tag: v4.16.0 4:46:29 PM: buildbot version: 2956156cff73cc91029b26e56f43b4bf895eefff 4:46:29 PM: Fetching cached dependencies 4:46:29 PM: Failed to fetch cache, continuing with build 4:46:29 PM: Starting to prepare the repo for build 4:46:29 PM: No cached dependencies found. Cloning fresh repo 4:46:29 PM: git clone https://github.com/RobertLigthart99/discovery-styled-components 4:46:30 PM: Preparing Git Reference refs/heads/main 4:46:30 PM: Parsing package.json dependencies 4:46:31 PM: Section completed: initializing 4:46:31 PM: Starting build script 4:46:31 PM: Installing dependencies 4:46:31 PM: Python version set to 2.7 4:46:32 PM: Downloading and installing node v16.19.0... 4:46:32 PM: Downloading https://nodejs.org/dist/v16.19.0/node-v16.19.0-linux-x64.tar.xz... 4:46:32 PM: Computing checksum with sha256sum 4:46:32 PM: Checksums matched! 4:46:34 PM: Now using node v16.19.0 (npm v8.19.3) 4:46:34 PM: Enabling node corepack 4:46:34 PM: Started restoring cached build plugins 4:46:34 PM: Finished restoring cached build plugins 4:46:34 PM: Attempting ruby version 2.7.2, read from environment 4:46:35 PM: Using ruby version 2.7.2 4:46:35 PM: Using PHP version 8.0 4:46:35 PM: No npm workspaces detected 4:46:35 PM: Started restoring cached node modules 4:46:35 PM: Finished restoring cached node modules 4:46:35 PM: Installing NPM modules using NPM version 8.19.3 4:46:40 PM: npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility 4:46:40 PM: npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead 4:46:40 PM: npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser 4:46:40 PM: npm WARN deprecated react-typekit@1.1.4: There are easier ways to include typekit fonts. Read https://helpx.adobe.com/fonts/using/embed-codes.html for more information. 4:46:42 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. 4:46:48 PM: added 1518 packages, and audited 1519 packages in 12s 4:46:48 PM: 228 packages are looking for funding 4:46:48 PM: run npm fundfor details 4:46:48 PM: 6 high severity vulnerabilities 4:46:48 PM: To address all issues (including breaking changes), run: 4:46:48 PM: npm audit fix --force 4:46:48 PM: Runnpm audit for details. 4:46:48 PM: NPM modules installed 4:46:48 PM: Creating package sha 4:46:48 PM: Started restoring cached go cache 4:46:48 PM: Finished restoring cached go cache 4:46:50 PM: go version go1.19.4 linux/amd64 4:46:50 PM: /opt/build-bin/run-build-functions.sh: line 1034: /opt/buildhome/.gimme/env/go1.19.x.linux.amd64.env: No such file or directory 4:46:50 PM: Detected 1 framework(s) 4:46:50 PM: "create-react-app" at version "5.0.1" 4:46:50 PM: Installing missing commands 4:46:50 PM: Verify run directory 4:46:51 PM: ​ 4:46:51 PM: ──────────────────────────────────────────────────────────────── 4:46:51 PM: Netlify Build 4:46:51 PM: ──────────────────────────────────────────────────────────────── 4:46:51 PM: ​ 4:46:51 PM: ❯ Version 4:46:51 PM: @netlify/build 29.1.1 4:46:51 PM: ​ 4:46:51 PM: ❯ Flags 4:46:51 PM: baseRelDir: true 4:46:51 PM: buildId: 639b41532dc81900095f98ef 4:46:51 PM: deployId: 639b41532dc81900095f98f1 4:46:51 PM: ​ 4:46:51 PM: ❯ Current directory 4:46:51 PM: /opt/build/repo 4:46:51 PM: ​ 4:46:51 PM: ❯ Config file 4:46:51 PM: No config file was defined: using default values. 4:46:51 PM: ​ 4:46:51 PM: ❯ Context 4:46:51 PM: production 4:46:51 PM: ​ 4:46:51 PM: ──────────────────────────────────────────────────────────────── 4:46:51 PM: 1. Build command from Netlify app 4:46:51 PM: ──────────────────────────────────────────────────────────────── 4:46:51 PM: ​ 4:46:51 PM: $ npm run build 4:46:51 PM: > chips-robert@0.1.0 build 4:46:51 PM: > react-scripts build 4:46:52 PM: Creating an optimized production build... 4:47:06 PM: 4:47:06 PM: Treating warnings as errors because process.env.CI = true. 4:47:06 PM: Most CI servers set it automatically. 4:47:06 PM: 4:47:06 PM: Failed to compile. 4:47:06 PM: 4:47:06 PM: [eslint] 4:47:06 PM: src/assets/icons/crypto-icons/USDC.js 4:47:06 PM: Line 14:11: Style prop value must be an object react/style-prop-object 4:47:06 PM: src/components/Chat.js 4:47:06 PM: Line 5:15: Unexpected empty object pattern no-empty-pattern 4:47:06 PM: src/components/Dropdowns.js 4:47:06 PM: Line 3:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: Line 4:10: 'motion' is defined but never used no-unused-vars 4:47:06 PM: src/components/Headers.js 4:47:06 PM: Line 2:30: 'Image' is defined but never used no-unused-vars 4:47:06 PM: Line 11:17: Imported JSX component Heading_LG must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/components/Login.js 4:47:06 PM: Line 1:10: 'Children' is defined but never used no-unused-vars 4:47:06 PM: Line 8:18: 'errRef' was used before it was defined no-use-before-define 4:47:06 PM: Line 13:10: 'success' is assigned a value but never used no-unused-vars 4:47:06 PM: Line 13:19: 'setSuccess' is assigned a value but never used no-unused-vars 4:47:06 PM: Line 34:11: Imported JSX component Heading_MD must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/components/Modals.js 4:47:06 PM: Line 2:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: Line 3:23: 'Box' is defined but never used no-unused-vars 4:47:06 PM: Line 65:13: Imported JSX component Heading_MD must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: Line 214:1: Assign object to a variable before exporting as module default import/no-anonymous-default-export 4:47:06 PM: src/components/NavItem.js 4:47:06 PM: Line 31:11: Imported JSX component Heading_XXS must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/components/Sidebar.js 4:47:06 PM: Line 1:17: 'useState' is defined but never used no-unused-vars 4:47:06 PM: Line 7:10: 'Button' is defined but never used no-unused-vars 4:47:06 PM: Line 8:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: src/components/Topbar.js 4:47:06 PM: Line 4:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: src/index.js 4:47:06 PM: Line 3:41: 'Router' is defined but never used no-unused-vars 4:47:07 PM: Creating deploy upload records 4:47:06 PM: src/pages/Base.js 4:47:06 PM: Line 3:10: 'overflow' is defined but never used no-unused-vars 4:47:06 PM: Line 8:3: 'InnerContainer' is defined but never used no-unused-vars 4:47:06 PM: Line 9:3: 'Text' is defined but never used no-unused-vars 4:47:06 PM: Line 10:3: 'Section' is defined but never used no-unused-vars 4:47:08 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2) 4:47:06 PM: Line 14:8: 'theme' is defined but never used no-unused-vars 4:47:06 PM: src/pages/home.js 4:47:06 PM: Line 1:10: 'AnimatePresence' is defined but never used no-unused-vars 4:47:06 PM: Line 1:27: 'motion' is defined but never used no-unused-vars 4:47:06 PM: Line 2:10: 'useState' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'overflow' is defined but never used no-unused-vars 4:47:06 PM: Line 4:10: 'Sidebar' is defined but never used no-unused-vars 4:47:06 PM: Line 4:19: 'Topbar' is defined but never used no-unused-vars 4:47:06 PM: Line 4:36: 'Chat' is defined but never used no-unused-vars 4:47:06 PM: Line 6:3: 'Container' is defined but never used no-unused-vars 4:47:06 PM: Line 11:3: 'Modal' is defined but never used no-unused-vars 4:47:06 PM: Line 25:15: Imported JSX component Heading_LG must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/pages/sign-up.js 4:47:06 PM: Line 1:10: 'motion' is defined but never used no-unused-vars 4:47:06 PM: Line 2:18: 'useState' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'Sidebar' is defined but never used no-unused-vars 4:47:06 PM: Line 3:19: 'Topbar' is defined but never used no-unused-vars 4:47:06 PM: Line 3:27: 'Headers' is defined but never used no-unused-vars 4:47:06 PM: Line 5:3: 'Container' is defined but never used no-unused-vars 4:47:06 PM: Line 7:3: 'InnerContainer' is defined but never used no-unused-vars 4:47:06 PM: Line 9:3: 'Section' is defined but never used no-unused-vars 4:47:06 PM: Line 10:3: 'Modal' is defined but never used no-unused-vars 4:47:06 PM: Line 28:11: Imported JSX component Heading_LG must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/primitives/Button.js 4:47:06 PM: Line 2:10: 'backgroundColor' is defined but never used no-unused-vars 4:47:06 PM: Line 5:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: Line 10:3: Expected a default case default-case 4:47:06 PM: Line 49:3: Expected a default case default-case 4:47:06 PM: Line 74:3: Expected a default case default-case 4:47:06 PM: Line 110:3: Expected a default case default-case 4:47:06 PM: src/primitives/Close.js 4:47:06 PM: Line 1:8: 'React' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'flexbox' is defined but never used no-unused-vars 4:47:06 PM: Line 3:19: 'justifyContent' is defined but never used no-unused-vars 4:47:06 PM: Line 3:35: 'space' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/Container.js 4:47:06 PM: Line 1:8: 'React' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'flexbox' is defined but never used no-unused-vars 4:47:06 PM: Line 3:19: 'justifyContent' is defined but never used no-unused-vars 4:47:06 PM: Line 3:35: 'space' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/Divider.js 4:47:06 PM: Line 17:5: Expected a default case default-case 4:47:06 PM: Line 32:5: Expected a default case default-case 4:47:06 PM: src/primitives/Dropdown.js 4:47:06 PM: Line 5:10: 'Icon' is defined but never used no-unused-vars 4:47:06 PM: Line 6:10: 'StyledOption' is defined but never used no-unused-vars 4:47:06 PM: Line 9:3: Expected a default case default-case 4:47:06 PM: Line 95:9: Imported JSX component Heading_XXS must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: Line 112:9: Imported JSX component Heading_XXS must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/primitives/Image.js 4:47:06 PM: Line 12:8: 'Box' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/Inner-Container.js 4:47:06 PM: Line 1:8: 'React' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'flexbox' is defined but never used no-unused-vars 4:47:06 PM: Line 3:19: 'justifyContent' is defined but never used no-unused-vars 4:47:06 PM: Line 3:35: 'space' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/Input.js 4:47:06 PM: Line 7:3: Expected a default case default-case 4:47:06 PM: Line 90:7: Imported JSX component Heading_XXS must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: Line 96:9: Imported JSX component Heading_XXS must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case 4:47:06 PM: src/primitives/Modal.js 4:47:06 PM: Line 1:8: 'React' is defined but never used no-unused-vars 4:47:06 PM: Line 1:17: 'Children' is defined but never used no-unused-vars 4:47:06 PM: Line 5:8: 'Box' is defined but never used no-unused-vars 4:47:06 PM: Line 6:10: 'Text' is defined but never used no-unused-vars 4:47:06 PM: Line 6:16: 'Flex' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/Section.js 4:47:06 PM: Line 1:8: 'React' is defined but never used no-unused-vars 4:47:06 PM: Line 3:10: 'flexbox' is defined but never used no-unused-vars 4:47:06 PM: Line 3:19: 'justifyContent' is defined but never used no-unused-vars 4:47:06 PM: Line 3:35: 'space' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/SidebarItem.js 4:47:06 PM: Line 2:72: 'Transform' is defined but never used no-unused-vars 4:47:06 PM: src/primitives/text.js 4:47:06 PM: Line 4:8: 'theme' is defined but never used no-unused-vars 4:47:06 PM: src/stores/authContext.js 4:47:06 PM: Line 12:18: 'setUser' is assigned a value but never used no-unused-vars 4:47:06 PM: ​ 4:47:06 PM: ──────────────────────────────────────────────────────────────── 4:47:06 PM: "build.command" failed 4:47:06 PM: ──────────────────────────────────────────────────────────────── 4:47:06 PM: ​ 4:47:06 PM: Error message 4:47:06 PM: Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1) 4:47:06 PM: ​ 4:47:06 PM: Error location 4:47:06 PM: In Build command from Netlify app: 4:47:06 PM: npm run build 4:47:06 PM: ​ 4:47:06 PM: Resolved config 4:47:06 PM: build: 4:47:06 PM: command: npm run build 4:47:06 PM: commandOrigin: ui 4:47:06 PM: publish: /opt/build/repo/dist 4:47:06 PM: publishOrigin: ui 4:47:06 PM: Caching artifacts 4:47:06 PM: Started saving node modules 4:47:06 PM: Finished saving node modules 4:47:06 PM: Started saving build plugins 4:47:06 PM: Finished saving build plugins 4:47:06 PM: Started saving pip cache 4:47:06 PM: Finished saving pip cache 4:47:06 PM: Started saving emacs cask dependencies 4:47:06 PM: Finished saving emacs cask dependencies 4:47:06 PM: Started saving maven dependencies 4:47:06 PM: Finished saving maven dependencies 4:47:06 PM: Started saving boot dependencies 4:47:06 PM: Finished saving boot dependencies 4:47:06 PM: Started saving rust rustup cache 4:47:06 PM: Finished saving rust rustup cache 4:47:06 PM: Started saving go dependencies 4:47:06 PM: Finished saving go dependencies 4:47:07 PM: Build failed due to a user error: Build script returned non-zero exit code: 2 4:47:08 PM: Failing build: Failed to build site 4:47:08 PM: Finished processing build request in 38.82060371s


You can change your build command to CI= npm run build to avoid that.

Thanks a lot for your help so far @hrishikesh , now i’m facing another problem.

After reading this article: [Support Guide] I’ve deployed my site but I still see "Page not found”

Still having this issue. My index.html is empty because it’s a react app.

Hopefully you can help me out with this as well.

Thanks already

Please change publish path here: Netlify App to build.