Hi, I’m having an issue when deploying to Netlify although my project works locally. I’m getting the following error in the deploy log.
HookWebpackError: /opt/build/repo/static/css/fa690d66ba98e8d7d95b.css:3:2231: Missed semicolon
7:20:56 PM: > Build error occurred
7:20:56 PM: Error: > Build failed because of webpack errors
This only happens when I have my dynamic route file in Next.js project [slug].js.
I’ve checked the file over for missing semi-colons but unfortunately to my knowledge, there aren’t any and my linter in VS code should pick up on adding and removing unnecessary semi-colons.
Is there a way to deploy without this check or config I can adjust to go around this behavior? I’ve added my file code down below along with the deploy log.
Thanks in advance for your help!
/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from "react";
import Head from "next/head";
import Image from "next/image";
import PollHero from "../public/logowebp.webp";
import Form from "../components/Form";
import Question from "../components/Question";
import Result from "../components/Result";
import styles from "../styles/Poll.module.scss";
import StepWizard from "react-step-wizard";
import firebase from "../services/firebase";
import { Modal } from "react-responsive-modal";
import "react-responsive-modal/styles.css";
import { createClient } from "contentful";
let noTransitions = {
enterRight: "",
enterLeft: "",
exitRight: "",
exitLeft: "",
};
const client = require("contentful").createClient({
space: `xxxxxxxxxx`,
accessToken: `xxxxxxxxxx`,
});
export const getStaticPaths = async () => {
const res = await client.getEntries({
content_type: "xxxxx",
});
const paths = res.items.map((item) => {
return {
params: { slug: item.fields.slug },
};
});
return {
paths,
fallback: true,
};
};
export const getStaticProps = async ({ params }) => {
const { items } = await client.getEntries({
content_type: "xxxxx",
"fields.slug": params.slug,
});
if (!items.length) {
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
return {
props: { poll: items[0] },
revalidate: 1,
};
};
const Poll = ({ poll }) => {
const [pollResult, setPollResult] = useState([]);
const [ID, setID] = useState(null);
const [loaded, setLoaded] = useState(true);
const [open, setOpen] = useState(false);
const [answer, setAnswer] = useState(null);
console.log(poll.fields);
useEffect(() => {
// fetchPollResults();
return () => {};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchPollResults = async () => {
const db = firebase.firestore();
const data = await db
.collection("polls")
.where("pollName", "==", poll.fields.slug)
.get()
.then((querySnapshot) => {
if (querySnapshot.empty) {
createPoll(poll.fields.slug);
}
querySnapshot.forEach((doc) => {
// console.log(doc.id, " => ", doc.data());
setPollResult(doc.data());
setID(doc.id);
setLoaded(true);
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
};
const updatePoll = (answer) => {
const db = firebase.firestore();
var pollRef = db.collection("polls").doc(ID);
if (answer) {
pollRef.update({
yesVotes: firebase.firestore.FieldValue.increment(1),
updateOn: firebase.firestore.FieldValue.serverTimestamp(),
});
} else {
pollRef.update({
noVotes: firebase.firestore.FieldValue.increment(1),
updateOn: firebase.firestore.FieldValue.serverTimestamp(),
});
}
};
const createPoll = (slug) => {
const db = firebase.firestore();
db.collection("polls")
.add({
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
pollName: slug,
yesVotes: 0,
noVotes: 0,
})
.then((docRef) => {
console.log("Document written with ID: ", docRef.id);
fetchPollResults();
})
.catch((error) => {
console.error("Error adding document: ", error);
});
};
const onOpenModal = () => {
setOpen(true);
};
const onCloseModal = () => {
setOpen(false);
};
return (
<div className={styles.poll}>
<Head>
<title>{poll.fields.pollQuestion}</title>
<meta name="description" content={poll.fields.metaDescription} />
</Head>
<StepWizard className={styles.step_container} transitions={noTransitions}>
<Question
className={styles.poll_question}
initialStep={1}
pollQuestion={poll.fields.pollQuestion}
onStepChange={(e) => setAnswer(e)}
/>
<Form
className={styles.poll_form}
pollQuestion={poll.fields.pollQuestion}
pollAnswer={answer}
onStepChange={() => {
setTimeout(onOpenModal, 2000);
updatePoll(answer);
}}
/>
<Result
className={styles.poll_result}
yesVotes={pollResult.yesVotes}
noVotes={pollResult.noVotes}
pollQuestion={poll.fields.pollQuestion}
/>
<Modal
modalId="lp-pom-text-13"
classNames={{
modal: ["thank-you-popup", "signup_success"],
}}
open={open}
onClose={onCloseModal}
center
>
<h1>Thank you for your thoughts!</h1>
<p>
Final step - <span>like us on Facebook and share the poll.</span>
</p>
<a
href="xxxxxxxxxxx"
className={styles.fb_share}
rel="noreferrer"
target="_blank"
>
Share on Facebook
</a>
<div>
<iframe
src="xxxxxxxxxxxx"
width="220px"
height="130"
scrolling="no"
frameBorder="0"
allowFullScreen={true}
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
title="fb-like"
/>
</div>
</Modal>
</StepWizard>
</div>
);
};
export default Poll;
DEPLOY LOG
7:44:16 PM: Build ready to start
7:44:18 PM: build-image version: 081db65c3e4ce8423fedb40e7689a87de6f84667
7:44:18 PM: build-image tag: v4.3.1
7:44:18 PM: buildbot version: cd472ed83588da774a80e84962d870b803c1ae34
7:44:18 PM: Fetching cached dependencies
7:44:19 PM: Starting to download cache of 696.9MB
7:44:22 PM: Finished downloading cache in 3.702013482s
7:44:22 PM: Starting to extract cache
7:44:41 PM: Finished extracting cache in 19.059879534s
7:44:41 PM: Finished fetching cache in 23.046991711s
7:44:41 PM: Starting to prepare the repo for build
7:44:42 PM: Preparing Git Reference refs/heads/main
7:44:43 PM: Parsing package.json dependencies
7:44:43 PM: Starting build script
7:44:43 PM: Installing dependencies
7:44:43 PM: Python version set to 2.7
7:44:44 PM: Started restoring cached node version
7:44:46 PM: Finished restoring cached node version
7:44:46 PM: v16.9.1 is already installed.
7:44:47 PM: Now using node v16.9.1 (npm v7.21.1)
7:44:47 PM: Started restoring cached build plugins
7:44:47 PM: Finished restoring cached build plugins
7:44:47 PM: Attempting ruby version 2.7.2, read from environment
7:44:48 PM: Using ruby version 2.7.2
7:44:49 PM: Using PHP version 8.0
7:44:49 PM: Started restoring cached yarn cache
7:44:56 PM: Finished restoring cached yarn cache
7:44:57 PM: No yarn workspaces detected
7:44:57 PM: Started restoring cached node modules
7:44:57 PM: Finished restoring cached node modules
7:44:57 PM: Installing NPM modules using Yarn version 1.22.10
7:44:58 PM: yarn install v1.22.10
7:44:58 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
7:44:58 PM: [1/4] Resolving packages...
7:45:07 PM: warning netlify-cli > @netlify/plugin-edge-handlers > rollup-plugin-node-polyfills > rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
7:45:09 PM: warning netlify-cli > @netlify/zip-it-and-ship-it > precinct > detective-postcss > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
7:45:09 PM: warning netlify-cli > copy-template-dir > readdirp > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
7:45:09 PM: warning netlify-cli > copy-template-dir > readdirp > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
7:45:13 PM: [2/4] Fetching packages...
7:45:14 PM: info @netlify/local-functions-proxy-darwin-x64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-darwin-x64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-linux-arm@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-linux-arm@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-linux-arm64@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-linux-arm64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-linux-ia32@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-linux-ia32@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-win32-ia32@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-win32-ia32@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-win32-ia32@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info @netlify/local-functions-proxy-darwin-arm64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-darwin-arm64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-darwin-arm64@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info @netlify/local-functions-proxy-freebsd-x64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-freebsd-x64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-freebsd-arm64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-freebsd-arm64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-freebsd-arm64@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info @netlify/local-functions-proxy-linux-ppc64@1.1.1: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-linux-ppc64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-openbsd-x64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-openbsd-x64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/local-functions-proxy-win32-x64@1.1.1: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/local-functions-proxy-win32-x64@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/routing-local-proxy-darwin-arm64@0.33.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/routing-local-proxy-darwin-arm64@0.33.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/routing-local-proxy-darwin-arm64@0.33.2: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info @netlify/routing-local-proxy-win32-x64@0.33.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/routing-local-proxy-win32-x64@0.33.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @netlify/routing-local-proxy-darwin-x64@0.33.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@netlify/routing-local-proxy-darwin-x64@0.33.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @next/swc-darwin-arm64@11.1.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@next/swc-darwin-arm64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @next/swc-darwin-arm64@11.1.2: The CPU architecture "x64" is incompatible with this module.
7:45:14 PM: info @next/swc-darwin-x64@11.1.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@next/swc-darwin-x64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: info @next/swc-win32-x64-msvc@11.1.2: The platform "linux" is incompatible with this module.
7:45:14 PM: info "@next/swc-win32-x64-msvc@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
7:45:14 PM: [3/4] Linking dependencies...
7:45:14 PM: warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
7:45:14 PM: warning " > styled-components@5.3.1" has unmet peer dependency "react-is@>= 16.8.0".
7:45:19 PM: [4/4] Building fresh packages...
7:45:21 PM: success Saved lockfile.
7:45:21 PM: Done in 23.11s.
7:45:21 PM: NPM modules installed using Yarn
7:45:21 PM: Started restoring cached go cache
7:45:21 PM: Finished restoring cached go cache
7:45:21 PM: go version go1.16.5 linux/amd64
7:45:21 PM: go version go1.16.5 linux/amd64
7:45:21 PM: Installing missing commands
7:45:21 PM: Verify run directory
7:45:23 PM:
7:45:23 PM: ────────────────────────────────────────────────────────────────
7:45:23 PM: Netlify Build
7:45:23 PM: ────────────────────────────────────────────────────────────────
7:45:23 PM:
7:45:23 PM: ❯ Version
7:45:23 PM: @netlify/build 18.10.0
7:45:23 PM:
7:45:23 PM: ❯ Flags
7:45:23 PM: baseRelDir: true
7:45:23 PM: buildId: 6143d6d09c256e0007194dbc
7:45:23 PM: deployId: 6143d6d09c256e0007194dbe
7:45:23 PM:
7:45:23 PM: ❯ Current directory
7:45:23 PM: /opt/build/repo
7:45:23 PM:
7:45:23 PM: ❯ Config file
7:45:23 PM: No config file was defined: using default values.
7:45:23 PM:
7:45:23 PM: ❯ Context
7:45:23 PM: production
7:45:23 PM:
7:45:23 PM: ❯ Loading plugins
7:45:23 PM: - @netlify/plugin-nextjs@3.9.0 from Netlify app
7:45:23 PM:
7:45:23 PM: ────────────────────────────────────────────────────────────────
7:45:23 PM: 1. onPreBuild command from @netlify/plugin-nextjs
7:45:23 PM: ────────────────────────────────────────────────────────────────
7:45:23 PM:
7:45:23 PM: Using Next.js 11.1.2
7:45:23 PM: Warning: support for Next.js >=11.1.0 is experimental
7:45:24 PM: info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
7:45:24 PM: The "target" config property must be one of "serverless", "experimental-serverless-trace". Building with "serverless" target.
7:45:24 PM: info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
7:45:25 PM: Next.js cache restored.
7:45:25 PM:
7:45:25 PM: (@netlify/plugin-nextjs onPreBuild completed in 1.2s)
7:45:25 PM:
7:45:25 PM: ────────────────────────────────────────────────────────────────
7:45:25 PM: 2. Build command from Netlify app
7:45:25 PM: ────────────────────────────────────────────────────────────────
7:45:25 PM:
7:45:25 PM: $ yarn build
7:45:25 PM: yarn run v1.22.11
7:45:25 PM: $ next build
7:45:26 PM: info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
7:45:26 PM: info - Checking validity of types...
7:45:30 PM: info - Creating an optimized production build...
7:45:44 PM: Failed to compile.
7:45:44 PM:
7:45:44 PM: HookWebpackError: /opt/build/repo/static/css/fa690d66ba98e8d7d95b.css:3:2231: Missed semicolon
7:45:44 PM: > Build error occurred
7:45:44 PM: Error: > Build failed because of webpack errors
7:45:44 PM: at /opt/build/repo/node_modules/next/dist/build/index.js:397:19
7:45:44 PM: at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
7:45:44 PM: at async Object.build [as default] (/opt/build/repo/node_modules/next/dist/build/index.js:77:25)
7:45:44 PM: error Command failed with exit code 1.
7:45:44 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
7:45:44 PM:
7:45:44 PM: ────────────────────────────────────────────────────────────────
7:45:44 PM: "build.command" failed
7:45:44 PM: ────────────────────────────────────────────────────────────────
7:45:44 PM:
7:45:44 PM: Error message
7:45:44 PM: Command failed with exit code 1: yarn build
7:45:44 PM:
7:45:44 PM: Error location
7:45:44 PM: In Build command from Netlify app:
7:45:44 PM: yarn build
7:45:44 PM:
7:45:44 PM: Resolved config
7:45:44 PM: build:
7:45:44 PM: command: yarn build
7:45:44 PM: commandOrigin: ui
7:45:44 PM: environment:
7:45:44 PM: - REACT_APP_CDA_API_KEY
7:45:44 PM: - REACT_APP_CONTENTFUL_SPACE_ID
7:45:44 PM: - REACT_APP_FIREBASE_API_KEY
7:45:44 PM: - REACT_APP_STRIVE_DIGITAL
7:45:44 PM: - REACT_APP_TWILIO_API
7:45:44 PM: - REACT_APP_ZAPIER_ID
7:45:44 PM: publish: /opt/build/repo/out
7:45:44 PM: publishOrigin: ui
7:45:44 PM: functionsDirectory: /opt/build/repo/netlify/functions
7:45:44 PM: plugins:
7:45:44 PM: - inputs: {}
7:45:44 PM: origin: ui
7:45:44 PM: package: '@netlify/plugin-nextjs'
7:45:45 PM: Caching artifacts
7:45:45 PM: Started saving node modules
7:45:45 PM: Finished saving node modules
7:45:45 PM: Started saving build plugins
7:45:45 PM: Finished saving build plugins
7:45:45 PM: Started saving yarn cache
7:45:53 PM: Finished saving yarn cache
7:45:53 PM: Started saving pip cache
7:45:53 PM: Finished saving pip cache
7:45:53 PM: Started saving emacs cask dependencies
7:45:53 PM: Finished saving emacs cask dependencies
7:45:53 PM: Started saving maven dependencies
7:45:53 PM: Finished saving maven dependencies
7:45:53 PM: Started saving boot dependencies
7:45:53 PM: Finished saving boot dependencies
7:45:53 PM: Started saving rust rustup cache
7:45:53 PM: Finished saving rust rustup cache
7:45:53 PM: Started saving go dependencies
7:45:53 PM: Finished saving go dependencies
7:45:53 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:45:53 PM: Creating deploy upload records
7:45:53 PM: Failing build: Failed to build site
7:45:53 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
7:45:53 PM: Finished processing build request in 1m35.06273883s
before we can help you, we need a little more information on the issues you are facing, mainly the link to your deploy log in Netlify.