Home
Support Forums

Unable to publish a production build

Hello!

I am kind of beginner with Javascript and all these web things like Parcel, Babel, npm etc (I have a hard time understanding what they do, why there are so much of these things, and how they are needed or not, it’s so confusing!). I have a problem with Netlify not building my site “properly” from Github, I hope someone can help me solve it! Here is what I’m doing (please read carefully, I try to explain everything to get accurate answers) :

I use CodeSandbox website for writing and testing my first ever “web app”, which is a small, client-side, single-page website that I would like to share with others when it’s ready.

My app works fine in CodeSandbox, and also works fine when I click “Deploy to Netlify” from CodeSandox. But the problem I have with this method #1 is that everytime I must delete my previously deployed site from Netlify, then click “Deploy to Netlify” and “Claim this website” buttons from CodeSandbox, then in Netlify I have to rename the site as I want because it deploys using the default name “csb_sandboxid”, as there is no option to simply update the previously deployed site to avoid this hassle. But other than that, the site deploys successfully to Netlify (sometimes it doesn’t and I need to click “Deploy to Netlify” again and again until it works, but that’s another problem), and the deployed site is working as planned.

What I tried to correct this behavior is to add an environment variable “NETLIFY_SITE_ID” in my netlify.toml file on CodeSandbox, and set it to the id of the currently deployed site, but unfortunately this doesn’t have any effect.

So method #2, I tried to upload my app from CodeSandbox to a Github repository and linked them, and on Netlify I created a new “site from Github” using this same repository. I hoped that I could just continue to write my app from CodeSandbox, push the changes to Github and then the Netlify site would be updated automatically. It “works”, I can push the changes from CodeSandbox to Github, then within seconds Netlify build a new version of the site, but unfortunately the built site doesn’t work as planned, Chrome’s dev console shows error “Uncaught SyntaxError: Cannot use import statement outside a module” in file main.js. To solve this error I tried to add <script type=“module” … > in my index.html, but then I have others errors about files not being able to load due to CORS issues… At first I didn’t have a build command in my netlify.toml, then after some research I tried to set the command to “npm run build”, with this command the build log on Netlify showed that more work was being done, but the site still didn’t work, with the same error. It seems that when Netlify build my site, the code isn’t being bundled and minified, but these options are enabled in netlify.toml . I also tried to add babel configuration file from CodeSandbox but I had no idea what I was doing.

I think CodeSandbox is doing additional things when building, that Netlify doesn’t because I didn’t gave it enough information about how I want it to build the site, and I’m stuck here since yesterday, I have no idea what to do next.

Here is the log from CodeSandbox when I click “Deploy to Netlify” :

Start Build... 
npm install
> deasync@0.1.20 install /codebuild/output/src935331355/src/package/node_modules/deasync
> node ./build.js
`linux-x64-node-10` exists; testing
Binary is fine; exiting
> core-js@2.6.11 postinstall /codebuild/output/src935331355/src/package/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> parcel-bundler@1.12.4 postinstall /codebuild/output/src935331355/src/package/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"
e[35me[1mLove Parcel? You can now donate to our open collective:e[22me[39m
> e[34mhttps://opencollective.com/parcel/donatee[0m
added 773 packages from 757 contributors and audited 774 packages in 13.697s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
npm install netlify-cli -g
> yarn@1.22.10 preinstall /usr/local/lib/node_modules/netlify-cli/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)
/usr/local/bin/ntl -> /usr/local/lib/node_modules/netlify-cli/bin/run
/usr/local/bin/netlify -> /usr/local/lib/node_modules/netlify-cli/bin/run
> netlify-cli@2.67.0 postinstall /usr/local/lib/node_modules/netlify-cli
> node ./scripts/postinstall.js
Success! Netlify CLI has been installed!
Your device is now configured to use Netlify CLI to deploy and manage your Netlify sites.
Next steps:
netlify init Connect or create a Netlify site from current directory
netlify deploy Deploy the latest changes to your Netlify site
For more information on the CLI run netlify help
Or visit the docs at https://cli.netlify.com
+ netlify-cli@2.67.0
added 1286 packages from 609 contributors in 36.131s
running build command
> decodexy@0.1.1 build /codebuild/output/src935331355/src/package
> parcel build index.html
+ less@3.12.2
added 9 packages from 43 contributors and audited 783 packages in 8.485s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
✨ Built in 12.82s.
dist/main.f0880edb.js.map 729.77 KB 77ms
dist/main.f0880edb.js 265.67 KB 11.33s
dist/view.2920df48.css.map 14.12 KB 6ms
dist/main.7ba1c8c0.css.map 9.81 KB 4ms
dist/main.7ba1c8c0.css 7.63 KB 10.18s
dist/view.2920df48.css 4.27 KB 1.16s
dist/index.html 3.31 KB 1.30s
dist/favicon.51d2f3b6.ico 2.49 KB 77ms
netlify deploy
Configuration path: /codebuild/output/src935331355/src/package/netlify.toml
Deploying to main site URL...
- Hashing files...
✔ Finished hashing 9 files
- CDN diffing files...
✔ CDN requesting 0 files
- Uploading 0 files
✔ Finished uploading 0 assets
- Waiting for deploy to go live...
✔ Deploy is live!
Logs: https://app.netlify.com/sites/csb-vy3q2/deploys/5f988d241e4eb317ed146b60
Unique Deploy URL: https://5f988d241e4eb317ed146b60--csb-vy3q2.netlify.app
Website URL: https://csb-vy3q2.netlify.app

And here is the log from Netlify when it’s building my site from Github:

10:08:12 PM: Build ready to start
10:08:14 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
10:08:14 PM: build-image tag: v3.4.1
10:08:14 PM: buildbot version: cdc66b02d86506251d3343610a77385376c8c035
10:08:14 PM: Fetching cached dependencies
10:08:15 PM: Starting to download cache of 94.0MB
10:08:17 PM: Finished downloading cache in 2.780213335s
10:08:17 PM: Starting to extract cache
10:08:21 PM: Finished extracting cache in 4.317221011s
10:08:21 PM: Finished fetching cache in 7.198127895s
10:08:21 PM: Starting to prepare the repo for build
10:08:22 PM: Preparing Git Reference refs/heads/main
10:08:24 PM: Different build command detected, going to use the one specified in the Netlify configuration file: 'npm run build' versus '' in the Netlify UI
10:08:24 PM: Starting build script
10:08:24 PM: Installing dependencies
10:08:24 PM: Python version set to 2.7
10:08:25 PM: Started restoring cached node version
10:08:28 PM: Finished restoring cached node version
10:08:29 PM: v12.18.0 is already installed.
10:08:30 PM: Now using node v12.18.0 (npm v6.14.4)
10:08:30 PM: Started restoring cached build plugins
10:08:30 PM: Finished restoring cached build plugins
10:08:30 PM: Attempting ruby version 2.7.1, read from environment
10:08:32 PM: Using ruby version 2.7.1
10:08:33 PM: Using PHP version 5.6
10:08:33 PM: 5.2 is already installed.
10:08:33 PM: Using Swift version 5.2
10:08:33 PM: Started restoring cached node modules
10:08:33 PM: Finished restoring cached node modules
10:08:33 PM: Installing NPM modules using NPM version 6.14.4
10:08:37 PM: npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
10:08:40 PM: npm notice created a lockfile as package-lock.json. You should commit this file.
10:08:40 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
10:08: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"})
10:08:40 PM: npm WARN decodexy@0.1.1 No repository field.
10:08:40 PM: npm WARN decodexy@0.1.1 No license field.
10:08:40 PM: removed 9 packages and audited 767 packages in 5.51s
10:08:40 PM: 31 packages are looking for funding
10:08:40 PM:   run `npm fund` for details
10:08:40 PM: found 1 high severity vulnerability
10:08:40 PM:   run `npm audit fix` to fix them, or `npm audit` for details
10:08:40 PM: NPM modules installed
10:08:41 PM: Started restoring cached go cache
10:08:41 PM: Finished restoring cached go cache
10:08:41 PM: go version go1.14.4 linux/amd64
10:08:41 PM: go version go1.14.4 linux/amd64
10:08:41 PM: Installing missing commands
10:08:41 PM: Verify run directory
10:08:42 PM: ​
10:08:42 PM: ┌─────────────────────────────┐
10:08:42 PM: │        Netlify Build        │
10:08:42 PM: └─────────────────────────────┘
10:08:42 PM: ​
10:08:42 PM: ❯ Version
10:08:42 PM:   @netlify/build 5.0.3
10:08:42 PM: ​
10:08:42 PM: ❯ Flags
10:08:42 PM:   deployId: 5f988c3c405d7f0007865a70
10:08:42 PM:   mode: buildbot
10:08:42 PM: ​
10:08:42 PM: ❯ Current directory
10:08:42 PM:   /opt/build/repo
10:08:42 PM: ​
10:08:42 PM: ❯ Config file
10:08:42 PM:   /opt/build/repo/netlify.toml
10:08:42 PM: ​
10:08:42 PM: ❯ Context
10:08:42 PM:   production
10:08:42 PM: ​
10:08:42 PM: ┌────────────────────────────────────┐
10:08:42 PM: │ 1. build.command from netlify.toml │
10:08:42 PM: └────────────────────────────────────┘
10:08:42 PM: ​
10:08:42 PM: $ npm run build
10:08:43 PM: > decodexy@0.1.1 build /opt/build/repo
10:08:43 PM: > parcel build index.html
10:09:10 PM: npm WARN decodexy@0.1.1 No repository field.
10:09:10 PM: npm WARN decodexy@0.1.1 No license field.
10:09:10 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
10:09:10 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:09:10 PM: + less@3.12.2
10:09:10 PM: added 9 packages from 43 contributors and audited 776 packages in 16.484s
10:09:10 PM: 31 packages are looking for funding
10:09:10 PM:   run `npm fund` for details
10:09:10 PM: found 1 high severity vulnerability
10:09:10 PM:   run `npm audit fix` to fix them, or `npm audit` for details
10:09:10 PM: ✨  Built in 26.83s.
10:09:10 PM: dist/main.14ce71df.js.map     729.77 KB     149ms
10:09:10 PM: dist/main.14ce71df.js         265.67 KB    23.35s
10:09:10 PM: dist/view.2920df48.css.map     14.12 KB       6ms
10:09:10 PM: dist/main.7ba1c8c0.css.map      9.81 KB       4ms
10:09:10 PM: dist/main.7ba1c8c0.css          7.63 KB    19.48s
10:09:10 PM: dist/view.2920df48.css          4.27 KB     4.05s
10:09:10 PM: dist/index.html                 3.31 KB     3.27s
10:09:10 PM: dist/favicon.51d2f3b6.ico       2.49 KB     133ms
10:09:11 PM: ​
10:09:11 PM: (build.command completed in 28.4s)
10:09:11 PM: ​
10:09:11 PM: ┌─────────────────────────────┐
10:09:11 PM: │   Netlify Build Complete    │
10:09:11 PM: └─────────────────────────────┘
10:09:11 PM: ​
10:09:11 PM: (Netlify Build completed in 28.4s)
10:09:11 PM: Caching artifacts
10:09:11 PM: Started saving node modules
10:09:11 PM: Finished saving node modules
10:09:11 PM: Started saving build plugins
10:09:11 PM: Finished saving build plugins
10:09:11 PM: Started saving pip cache
10:09:11 PM: Finished saving pip cache
10:09:11 PM: Started saving emacs cask dependencies
10:09:11 PM: Finished saving emacs cask dependencies
10:09:11 PM: Started saving maven dependencies
10:09:11 PM: Finished saving maven dependencies
10:09:11 PM: Started saving boot dependencies
10:09:11 PM: Finished saving boot dependencies
10:09:11 PM: Started saving go dependencies
10:09:11 PM: Finished saving go dependencies
10:09:11 PM: Build script success
10:09:11 PM: Starting to deploy site from ''
10:09:11 PM: Creating deploy tree 
10:09:11 PM: Creating deploy upload records
10:09:11 PM: 1 new files to upload
10:09:11 PM: 0 new functions to upload
10:09:12 PM: Starting post processing
10:09:13 PM: Post processing - HTML
10:09:13 PM: Post processing - header rules
10:09:13 PM: Post processing - redirect rules
10:09:13 PM: Post processing done
10:09:13 PM: Site is live ✨

Link to my app on CodeSandbox: https://codesandbox.io/s/decodexy-vy3q2
Link to my Github repository: GitHub - guillaume-dorczynski/DecodeXY: A tool to decode and prettify RemoteXY projects.
Link to site deployed from CodeSandbox to Netlify: https://csb-vy3q2.netlify.app/
Link to site built by Netlify using the Github repository: https://decodexy.netlify.app/

Could anyone help by explaining what is happening, and how to solve, either or both methods (if it’s possible) ?

Could you try adding the following to the netlify.toml file (if you haven’t configured it in your Netlify Dashboard):

[build]
  publish = "dist/"

My guess about what’s happening is, because you have an index.html file in the base path of your repository, Netlify thinks that it is your website’s index.html and thus, your base path is itself getting published. That’s why you can see the un-bundled JavaScript.

However, by adding the config I suggested above, you’d tell Netlify to publish the dist folder instead of the base path and thus, it should be publishing the bundled code.

Let us know if that works.

1 Like

Thank you sooo much @ hrishikesh ! That was it, this simple thing ! And I was so close to solve it by myself 2 days ago ( https://github.com/guillaume-dorczynski/DecodeXY/commit/110ee0cff0d02fbf18eeda2dc14dab9076cd9256#diff-ab8f79b68b7adff7a07db953bf453f3c5aa6ade98d2b1b67d8432b36392489ed ) …

Thanks again!

1 Like

Really close indeed. That’s a lot of good progress especially when you say you’re a beginner. Well done.

2 Likes