Uncaught SyntaxError: Unexpected token '}'

Support
1

Hi, deployment problem here. The website is
https://bistro1640.netlify.app

I can run fine locally, i can netlify build and deploy from netfily-cli successfully but at runtime, the javascript bundle is broken by the following error in the console:

Uncaught SyntaxError: Unexpected token ‘}’

This is a gridsome site using tailwind and purgecss. The css seems to be generated ok as the visuals seem ok. These are my devdependencies

 "devDependencies": {
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@fullhuman/postcss-purgecss": "^3.0.0",
"autoprefixer": "^10.2.5",
"gridsome-plugin-composition-api": "0.0.3",
"netlify-cli": "^3.31.14",
"postcss": "^8.2.7",
"postcss-import": "^12.0.0",
"sass": "^1.32.8",
"tailwindcss": "^2.0.3",
"tailwindcss-selection-variant": "^0.1.0",
"@tailwindcss/typography": "^0.4.0",
"vue-svg-loader": "^0.16.0"
 }

I have tried setting the node version on netlify to the same as my local and also forcing node_env = production on netlify with no success…

2

hi there, could you post your full deploy log so we can see where the error message occurs, please? thanks.

3

Hi, I see no errors in the build and deploy logs, only at runtime. Here is my deploy log

2:19:11 PM: Creating deploy upload records
2:19:12 PM: Starting post processing
2:19:12 PM: Post processing - HTML
2:19:12 PM: Post processing - header rules
2:19:12 PM: Post processing - redirect rules
2:19:12 PM: Post processing done
2:19:12 PM: Site is live ✨
4

Here is a more detailed automated build log from github

5:20:50 PM: Build ready to start
5:20:52 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
5:20:52 PM: build-image tag: v3.7.6
5:20:52 PM: buildbot version: 959f79c81bbea9aec6ed0f9e457edb5817a4dfe6
5:20:52 PM: Fetching cached dependencies
5:20:52 PM: Starting to download cache of 325.1MB
5:20:56 PM: Finished downloading cache in 3.961897055s
5:20:56 PM: Starting to extract cache
5:21:07 PM: Finished extracting cache in 11.110077626s
5:21:07 PM: Finished fetching cache in 15.171768141s
5:21:07 PM: Starting to prepare the repo for build
5:21:08 PM: Preparing Git Reference refs/heads/carroussel
5:21:09 PM: Parsing package.json dependencies
5:21:10 PM: Starting build script
5:21:10 PM: Installing dependencies
5:21:10 PM: Python version set to 2.7
5:21:10 PM: Started restoring cached node version
5:21:13 PM: Finished restoring cached node version
5:21:13 PM: v12.18.0 is already installed.
5:21:14 PM: Now using node v12.18.0 (npm v6.14.4)
5:21:14 PM: Started restoring cached build plugins
5:21:14 PM: Finished restoring cached build plugins
5:21:14 PM: Attempting ruby version 2.7.1, read from environment
5:21:15 PM: Using ruby version 2.7.1
5:21:15 PM: Using PHP version 5.6
5:21:15 PM: Started restoring cached node modules
5:21:15 PM: Finished restoring cached node modules
5:21:16 PM: Installing NPM modules using NPM version 6.14.4
5:21:37 PM: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@2. I’ll try to do my best with it!
5:21:37 PM: > netlify-cli@3.31.14 postinstall /opt/build/repo/node_modules/netlify-cli
5:21:37 PM: > node ./scripts/postinstall.js
5:21:37 PM: Success! Netlify CLI has been installed!
5:21:37 PM: Your device is now configured to use Netlify CLI to deploy and manage your Netlify sites.
5:21:37 PM: Next steps:
5:21:37 PM: netlify init Connect or create a Netlify site from current directory
5:21:37 PM: netlify deploy Deploy the latest changes to your Netlify site
5:21:37 PM: For more information on the CLI run netlify help
5:21:37 PM: Or visit the docs at https://cli.netlify.com
5:21:40 PM: npm WARN react-redux@4.4.10 requires a peer of redux@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
5:21:40 PM: npm WARN validate-color@2.1.1 requires a peer of react@^17.0.1 but none is installed. You must install peer dependencies yourself.
5:21:40 PM: npm WARN validate-color@2.1.1 requires a peer of react-dom@^17.0.1 but none is installed. You must install peer dependencies yourself.
5:21:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @netlify/traffic-mesh-agent-darwin-x64@0.27.10 (node_modules/netlify-cli/node_modules/@netlify/traffic-mesh-agent-darwin-x64):
5:21:40 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @netlify/traffic-mesh-agent-darwin-x64@0.27.10: wanted {“os”:“darwin”,“arch”:“x64”} (current: {“os”:“linux”,“arch”:“x64”})
5:21:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @netlify/traffic-mesh-agent-win32-x64@0.27.10 (node_modules/netlify-cli/node_modules/@netlify/traffic-mesh-agent-win32-x64):
5:21:40 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @netlify/traffic-mesh-agent-win32-x64@0.27.10: wanted {“os”:“win32”,“arch”:“x64”} (current: {“os”:“linux”,“arch”:“x64”})
5:21:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
5:21:40 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
5:21:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/netlify-cli/node_modules/fsevents):
5:21:40 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
5:21:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/watchpack/node_modules/fsevents):
5:21:40 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
5:21:40 PM: removed 171 packages, updated 6 packages and audited 3768 packages in 23.839s
5:21:43 PM: 148 packages are looking for funding
5:21:43 PM: run npm fund for details
5:21:43 PM: found 94 vulnerabilities (89 moderate, 5 high)
5:21:43 PM: run npm audit fix to fix them, or npm audit for details
5:21:43 PM: NPM modules installed
5:21:43 PM: Started restoring cached go cache
5:21:43 PM: Finished restoring cached go cache
5:21:43 PM: go version go1.14.4 linux/amd64
5:21:43 PM: go version go1.14.4 linux/amd64
5:21:43 PM: Installing missing commands
5:21:43 PM: Verify run directory
5:21:44 PM: ​
5:21:44 PM: ────────────────────────────────────────────────────────────────
5:21:44 PM: Netlify Build
5:21:44 PM: ────────────────────────────────────────────────────────────────
5:21:44 PM: ​
5:21:44 PM: ❯ Version
5:21:44 PM: @netlify/build 11.29.0
5:21:44 PM: ​
5:21:44 PM: ❯ Flags
5:21:44 PM: deployId: 60b2b03213b62b00085690e1
5:21:44 PM: ​
5:21:44 PM: ❯ Current directory
5:21:44 PM: /opt/build/repo
5:21:44 PM: ​
5:21:44 PM: ❯ Config file
5:21:44 PM: No config file was defined: using default values.
5:21:44 PM: ​
5:21:44 PM: ❯ Context
5:21:44 PM: production
5:21:44 PM: ​
5:21:44 PM: ────────────────────────────────────────────────────────────────
5:21:44 PM: 1. Build command from Netlify app
5:21:44 PM: ────────────────────────────────────────────────────────────────
5:21:44 PM: ​
5:21:44 PM: $ npm run build
5:21:44 PM: > build
5:21:44 PM: > gridsome build
5:21:45 PM: Gridsome v0.7.23
5:21:45 PM: Initializing plugins…
5:21:46 PM: Load sources - 0.09s
5:21:48 PM: Create GraphQL schema - 2.54s
5:21:48 PM: Create pages and templates - 0.08s
5:21:48 PM: Generate temporary code - 0.06s
5:21:48 PM: Bootstrap finish - 3.76s
5:21:48 PM: Compiling assets…
5:22:22 PM: Compile assets - 33.71s
5:22:24 PM: Execute GraphQL (38 queries) - 1.59s
5:22:26 PM: Render HTML (38 files) - 2.13s
5:22:26 PM: Process files (0 files) - 0s
5:22:27 PM: Processing images (8 images) - 0%Processing images (8 images) - 100%Process images (8 images) - 0.8s
5:22:27 PM: List of needed redirects:[object Object],[object Object]
5:22:27 PM: The outDir config is renamed to outputDir.
5:22:27 PM: ./node_modules/gridsome-plugin-netlify-cms/index.js:126:13
5:22:27 PM: Done in 42.74s
5:23:15 PM: ​
5:23:15 PM: (build.command completed in 1m 31.3s)
5:23:15 PM: ​
5:23:15 PM: ────────────────────────────────────────────────────────────────
5:23:15 PM: 2. Functions bundling
5:23:15 PM: ────────────────────────────────────────────────────────────────
5:23:15 PM: ​
5:23:15 PM: The Netlify Functions setting targets a non-existing directory: functions
5:23:15 PM: ​
5:23:15 PM: (Functions bundling completed in 0ms)
5:23:15 PM: ​
5:23:15 PM: ────────────────────────────────────────────────────────────────
5:23:15 PM: 3. Deploy site
5:23:15 PM: ────────────────────────────────────────────────────────────────
5:23:15 PM: ​
5:23:15 PM: Starting to deploy site from ‘dist’
5:23:15 PM: Creating deploy tree
5:23:15 PM: Creating deploy upload records
5:23:15 PM: 68 new files to upload
5:23:15 PM: 0 new functions to upload
5:23:18 PM: Site deploy was successfully initiated
5:23:18 PM: ​
5:23:18 PM: (Deploy site completed in 2.7s)
5:23:18 PM: ​
5:23:18 PM: ────────────────────────────────────────────────────────────────
5:23:18 PM: Netlify Build Complete
5:23:18 PM: ────────────────────────────────────────────────────────────────
5:23:18 PM: ​
5:23:18 PM: (Netlify Build completed in 1m 34.1s)
5:23:18 PM: Caching artifacts
5:23:18 PM: Started saving node modules
5:23:18 PM: Finished saving node modules
5:23:18 PM: Started saving build plugins
5:23:18 PM: Finished saving build plugins
5:23:18 PM: Started saving pip cache
5:23:18 PM: Finished saving pip cache
5:23:18 PM: Started saving emacs cask dependencies
5:23:18 PM: Finished saving emacs cask dependencies
5:23:18 PM: Started saving maven dependencies
5:23:18 PM: Finished saving maven dependencies
5:23:18 PM: Starting post processing
5:23:18 PM: Started saving boot dependencies
5:23:18 PM: Finished saving boot dependencies
5:23:18 PM: Started saving rust rustup cache
5:23:18 PM: Finished saving rust rustup cache
5:23:18 PM: Started saving go dependencies
5:23:18 PM: Post processing - HTML
5:23:18 PM: Finished saving go dependencies
5:23:18 PM: Build script success
5:23:21 PM: Post processing - header rules
5:23:21 PM: Post processing - redirect rules
5:23:21 PM: Post processing done
5:23:21 PM: Site is live :sparkles:

5

hi there,

i also see a runtime error - but this hints that this is not a netlify specific issue per se, but likely either a javascript issue or a missing dependency that is not available for some reason.

have you checked your package.json lately? are you sure you are fetching all the dependencies you need?

6

By a tedious elimination process, I have found the runtime error is caused by the import of my main tailwind css styles file in gridsome., i.e. when I require(’~/main.css’) in my gridsome main.js. Removing this line entirely is the only thing I found that clears the error. I have followed all guides to install tailwind in gridsome to the letter and everything works fine in dev. Here is my current package.json

{
  "name": "grid1640",
  "private": true,
  "scripts": {
    "develop": "gridsome develop",
    "explore": "gridsome explore",
    "build": "gridsome build",
    "netlify_login": "netlify login",
    "netlify_build": "netlify build",
    "netlify_dev": "netlify dev",
    "netlify_deploy": "netlify deploy",
    "netlify_init": "netlify init",
    "netlify_link": "netlify link"
  },

  "dependencies": {
    "@fontsource/koho": "^4.2.2",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/source-graphql": "^0.1.0",
    "@gridsome/transformer-remark": "^0.6.4",
    "D": "^1.0.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-http": "^1.5.17",
    "axios": "^0.21.1",
    "cross-fetch": "github:lquixada/cross-fetch",
    "get-google-fonts": "^1.2.2",
    "graphql-tag": "^2.11.0",
    "gridsome": "^0.7.0",
    "gridsome-plugin-i18n": "^1.6.0",
    "gridsome-plugin-netlify-cms": "^1.0.9",
    "install": "^0.13.0",
    "netlify-cms": "^2.10.131",
    "npm": "^7.11.1",
    "v-click-outside": "^3.1.2",
    "vue-apollo": "^3.0.7",
    "vuex": "^3.6.2",
    "vuex-composition-helpers": "^1.0.23"
  },

  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^9.8.6",
    "gridsome-plugin-composition-api": "0.0.3",
    "netlify-cli": "^3.31.14",
    "postcss": "^7.0.35",
    "postcss-import": "^12.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",
    "tailwindcss-selection-variant": "^0.1.0",
    "vue-svg-loader": "^0.16.0"
  }

}

I can only presume somehow tailwind is not installed correctly when I build for prod but I have no idea why.

7

could you try installing tailwind as a dependency, not a dev dependency, and see if that fixes things?

8

I moved every dependency from dev to normal did npm install and still no go. Also tried deleting package-lock but no success

9

Ok Finally got it to work. I had to start a new project from scratch and reinstalled all packages as non dev depencies and now it works. Something must have been aloof with my packages. Thank you for your time.

1 Like