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

[robertligthart]

Hi there,

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

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.

[hrishikesh]

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

[Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

Last Reviewed By Netlify Support Staff: December 2022 Are you struggling to understand why your project runs locally but errors out with missing files or logs that point toward issues with case when you try and build on Netlify? You are not alone. Often, case (as in: UPPERCASE or lowercase letters in filenames or paths) can cause problems. Here is a guide to understanding how case sensitivity issues present themselves, why they arise, and how you can fix them! 1. Errors you might see Case sens…

[robertligthart]

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

GitHub - RobertLigthart99/discovery-styled-components

[hrishikesh]

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

RobertLigthart99/discovery-styled-components/blob/main/package.json#L17

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

[robertligthart]

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

[robertligthart]

[hrishikesh]

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

[robertligthart]

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

[hrishikesh]

Please change publish path here: Netlify App to build.