Having trouble build / deploying locally working Vue component

Briefly summarize the issues you have been experiencing.
Having trouble build / deploying locally working Vue component

11:47:31 PM: [192] (webpack)-dev-server/client?xxx://localhost:2000 153 bytes {0} [built] [failed] [1 error]
11:47:31 PM: + 1 hidden modules
11:47:31 PM: ERROR in (webpack)-dev-server/client?xxx://localhost:2000
11:47:31 PM: Module build failed: Error: ENOENT: no such file or directory, open ‘/opt/build/repo/node_modules/webpack-dev-server/client/index.js’
11:47:31 PM: @ multi (webpack)-dev-server/client?xxx://localhost:2000 ./app.js
11:47:31 PM: ERROR in ./docs/app.js
11:47:31 PM: Module build failed: Error: ENOENT: no such file or directory, open ‘/opt/build/repo/docs/app.js’
11:47:31 PM: @ multi (webpack)-dev-server/client?xxx://localhost:2000 ./app.js
11:47:31 PM: webpack: Failed to compile.

Please provide a link to your live site hosted on Netlify

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?
Clear cache
Do you have any other information that is relevant, such as links to docs, libraries, or other resources?
{
“name”: “vue-table-component”,
“version”: “1.9.2”,
“description”: “A straightforward Vue component to filter and sort tables”,
“main”: “dist/index.js”,
“jsnext:main”: “src/index.js”,
“scripts”: {
“start”: “webpack-dev-server --config docs/webpack.config.js”,
“demo”: “NODE_ENV=production webpack --config docs/webpack.config.js”,
“build”: “rm -rf dist && NODE_ENV=production webpack”,
“lint”: “eslint src tests --ext .js,.vue --fix; exit 0”,
“prepublish”: “npm run test; npm run build”,
“test”: “jest”
},

Hey @rduinmaijer, thanks for notifying us of this issue. Can you give more context around what you’re trying to do so we can better help you? I see that you’re trying to deploy a component named vue table component that I believe matches this one. What build command are you using to deploy this to netlify? And do you have a link to the project online somewhere that we can dig into to help you figure this out?

Thanks!
Divya

Hi thanks for your reply!

I used a fork of GitHub - spatie/vue-table-component: A straight to the point Vue component to display tables (some minor changes to the html but that should effect a build / deploy)

Awesome, thanks for the link! It looks like the dist folder doesn’t have an index.html file. Since there isn’t any static page to load the JS, you’ll get a page not found error. As you pointed out in your earlier comment, the locally running project works unlike the prod site. This is likely because the locally running project is running from the docs folder while the prod site is running from the dist folder. If you changed your publish directory under site settings > build and deploy to docs instead of dist you might have some luck having a working site.

As for the issue you’re having with the build itself, it’s again hard for me to replicate what you’re experiencing since I’m not sure what changes were made that might be messing with the webpack build. I just pulled down the repo you’re using and managed to deploy the site successfully. Here’s a reference to that repo and a link to the running demo so you can see it live. I’ve made no changes to the original component, so it might be worth reverting your changes and stepping through them to figure out what might be causing your issue. Let me know if you need further clarification on this!

Cheers,
Divya

Hi Divya thanks!

I changed the setting to docs and still the same an error…

9:53:34 AM: Build ready to start
9:53:36 AM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
9:53:36 AM: build-image tag: v3.3.2
9:53:36 AM: buildbot version: ef8d0929ed0baabafd8bbb7d0b021e1fc24180c0
9:53:36 AM: Fetching cached dependencies
9:53:36 AM: Starting to download cache of 255.0KB
9:53:36 AM: Finished downloading cache in 75.262473ms
9:53:36 AM: Starting to extract cache
9:53:36 AM: Failed to fetch cache, continuing with build
9:53:36 AM: Starting to prepare the repo for build
9:53:37 AM: No cached dependencies found. Cloning fresh repo
9:53:37 AM: git clone xx://github.com/rduinmaijer/cm0102-app
9:53:37 AM: Preparing Git Reference refs/heads/master
9:53:38 AM: Starting build script
9:53:38 AM: Installing dependencies
9:53:39 AM: Downloading and installing node v10.16.0…
9:53:40 AM: Downloading xx://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz…
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: #
9:53:40 AM: 6
9:53:40 AM: 8
9:53:40 AM: .
9:53:40 AM: 2
9:53:40 AM: %
9:53:40 AM:
######################################################################## 10
9:53:40 AM: 0.0%
9:53:40 AM: Computing checksum with sha256sum
9:53:40 AM: Checksums matched!
9:53:43 AM: Now using node v10.16.0 (npm v6.9.0)
9:53:43 AM: Attempting ruby version 2.6.2, read from environment
9:53:44 AM: Using ruby version 2.6.2
9:53:45 AM: Using PHP version 5.6
9:53:45 AM: Started restoring cached node modules
9:53:45 AM: Finished restoring cached node modules
9:53:45 AM: Installing NPM modules using NPM version 6.9.0
9:53:50 AM: npm
9:53:50 AM: WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
9:53:50 AM: npm WARN
9:53:50 AM: deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
9:53:50 AM: npm WARN deprecated
9:53:50 AM: circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
9:54:09 AM: > core-js@2.6.9 postinstall /opt/build/repo/node_modules/core-js
9:54:09 AM: > node scripts/postinstall || echo “ignore”
9:54:09 AM: Thank you for using core-js ( xx://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
9:54:09 AM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
9:54:09 AM: > xx://opencollective.com/core-js
9:54:09 AM: > xx://www.patreon.com/zloirock
9:54:09 AM: Also, the author of core-js ( xx://github.com/zloirock ) is looking for a good job -)
9:54:09 AM: npm WARN prepublish-on-install
9:54:09 AM: As of npm@5, prepublish scripts are deprecated.
9:54:09 AM: npm WARN prepublish-on-install Use prepare for build steps and prepublishOnly for upload-only.
9:54:09 AM: npm WARN prepublish-on-install See the deprecation note in npm help scripts for more information.
9:54:09 AM: > vue-table-component@1.9.2 prepublish /opt/build/repo
9:54:09 AM: > npm run test; npm run build
9:54:09 AM: > vue-table-component@1.9.2 test /opt/build/repo
9:54:10 AM: > jest
9:54:22 AM: PASS tests/concerns/settings.test.js
9:54:22 AM: PASS tests/components/Pagination.test.js
9:54:22 AM: PASS tests/concerns/expiringStorage.test.js
9:54:22 AM: PASS tests/concerns/caching.test.js
9:54:23 AM: PASS tests/concerns/sorting.test.js
9:54:23 AM: PASS tests/concerns/filtering.test.js
9:54:23 AM: PASS tests/components/TableComponent.test.js
9:54:23 AM: Test Suites: 7 passed, 7 total
9:54:23 AM: Tests: 45 passed, 45 total
9:54:23 AM: Snapshots: 26 passed, 26 total
9:54:23 AM: Time: 12.381s
9:54:23 AM: Ran all test suites.
9:54:23 AM: > vue-table-component@1.9.2 build /opt/build/repo
9:54:23 AM: > rm -rf dist && NODE_ENV=production webpack
9:54:26 AM: Hash: 95f64d0bd124246382f1
9:54:26 AM: Version: webpack 2.7.0
9:54:26 AM: Time: 2688ms
9:54:26 AM: Asset Size Chunks Chunk Names
9:54:26 AM: index.js 160 kB 0, 1 [emitted] index
9:54:26 AM: index.min.js 54.9 kB 1, 0 [emitted] index.min
9:54:26 AM: [18] ./~/vue-loader/lib/component-normalizer.js 2.55 kB {0} {1} [built]
9:54:26 AM: [19] ./src/helpers.js 2.56 kB {0} {1} [built]
9:54:26 AM: [26] ./src/settings.js 979 bytes {0} {1} [built]
9:54:26 AM: [27] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} {1} [built]
9:54:26 AM: [28] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} {1} [built]
9:54:26 AM: [67] ./src/classes/Column.js 3.61 kB {0} {1} [built]
9:54:26 AM: [68] ./src/classes/Row.js 3.57 kB {0} {1} [built]
9:54:26 AM: [70] ./src/expiring-storage.js 2.45 kB {0} {1} [built]
9:54:26 AM: [71] ./src/index.js 1.88 kB {0} {1} [built]
9:54:26 AM: [77] ./~/babel-runtime/core-js/object/keys.js 92 bytes {0} {1} [built]
9:54:26 AM: [81] ./~/babel-runtime/helpers/asyncToGenerator.js 906 bytes {0} {1} [built]
9:54:26 AM: [82] ./~/babel-runtime/helpers/slicedToArray.js 1.2 kB {0} {1} [built]
9:54:26 AM: [83] ./~/babel-runtime/helpers/toConsumableArray.js 466 bytes {0} {1} [built]
9:54:26 AM: [84] ./~/babel-runtime/helpers/typeof.js 1.07 kB {0} {1} [built]
9:54:26 AM: [85] ./~/babel-runtime/regenerator/index.js 49 bytes {0} {1} [built]
9:54:26 AM: + 125 hidden modules
9:54:27 AM: npm
9:54:27 AM: notice created a lockfile as package-lock.json. You should commit this file.
9:54:27 AM: npm
9:54:27 AM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
9:54:27 AM: npm
9:54:27 AM: WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
9:54:27 AM: added 1096 packages from 687 contributors and audited 13968 packages in 41.571s
9:54:27 AM: found 42 vulnerabilities (32 low, 5 moderate, 5 high)
9:54:27 AM: run npm audit fix to fix them, or npm audit for details
9:54:27 AM: NPM modules installed
9:54:28 AM: Started restoring cached go cache
9:54:28 AM: Finished restoring cached go cache
9:54:28 AM: unset GOOS;
9:54:28 AM: unset GOARCH;
9:54:28 AM: export GOROOT=‘/opt/buildhome/.gimme/versions/go1.12.linux.amd64’;
9:54:28 AM: export PATH=“/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}”;
9:54:28 AM: go version >&2;
9:54:28 AM: export GIMME_ENV=‘/opt/buildhome/.gimme/env/go1.12.linux.amd64.env’;
9:54:28 AM: go version go1.12 linux/amd64
9:54:28 AM: Installing missing commands
9:54:28 AM: Verify run directory
9:54:28 AM: Executing user command: npm run start
9:54:28 AM: > vue-table-component@1.9.2 start /opt/build/repo
9:54:28 AM: > webpack-dev-server --config docs/webpack.config.js
9:54:29 AM: Project is running at xx://localhost:2000/
9:54:29 AM: webpack output is served from /build/
9:54:29 AM: Content not from webpack is served from /opt/build/repo/docs
9:54:31 AM: Hash: 16e75d1863c1a6f58af5
9:54:31 AM: Version: webpack 2.7.0
9:54:31 AM: Time: 2389ms
9:54:31 AM: Asset Size Chunks Chunk Names
9:54:31 AM: app.js 1.41 MB 0 [emitted] [big] main
9:54:31 AM: chunk {0} app.js (main) 1.39 MB [entry] [rendered]
9:54:31 AM: [191] ./docs/app.js 789 bytes {0} [built]
9:54:31 AM: [192] (webpack)-dev-server/client?xx://localhost:2000 7.93 kB {0} [built]
9:54:31 AM: [193] ./~/ansi-html/index.js 4.26 kB {0} [built]
9:54:31 AM: [204] ./src/index.js 1.88 kB {0} [built]
9:54:31 AM: [267] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
9:54:31 AM: [278] ./~/strip-ansi/index.js 161 bytes {0} [built]
9:54:31 AM: [280] ./~/url/url.js 23.3 kB {0} [built]
9:54:31 AM: [281] ./~/url/util.js 314 bytes {0} [built]
9:54:31 AM: [282] ./src/components/TableColumn.vue 1.46 kB {0} [built]
9:54:31 AM: [291] ./~/vue/dist/vue.js 341 kB {0} [built]
9:54:31 AM: [292] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
9:54:31 AM: [293] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
9:54:31 AM: [294] (webpack)/hot nonrecursive ^./log$ 160 bytes {0} [built]
9:54:31 AM: [295] (webpack)/hot/emitter.js 77 bytes {0} [built]
9:54:31 AM: [296] multi (webpack)-dev-server/client?xx://localhost:2000 ./app.js 40 bytes {0} [built]
9:54:31 AM: + 282 hidden modules
9:54:31 AM: webpack: Compiled successfully.
10:23:35 AM: webpack: Compiling…
10:23:36 AM: Build exceeded maximum allowed runtime
10:23:36 AM: Hash: 92f1f2dc896d90ce08b7
10:23:36 AM: Version: webpack 2.7.0
10:23:36 AM: Time: 11ms
10:23:36 AM: Asset Size Chunks Chunk Names
10:23:36 AM: app.js 3.14 kB 0 [emitted] main
10:23:36 AM: chunk {0} app.js (main) 310 bytes [entry] [rendered]
10:23:36 AM: [191] ./docs/app.js 117 bytes {0} [built] [failed] [1 error]
10:23:36 AM: [192] (webpack)-dev-server/client?xx://localhost:2000 153 bytes {0} [built] [failed] [1 error]
10:23:36 AM: + 1 hidden modules
10:23:36 AM: ERROR in (webpack)-dev-server/client?xxx://localhost:2000
10:23:36 AM: Module build failed: Error: ENOENT: no such file or directory, open ‘/opt/build/repo/node_modules/webpack-dev-server/client/index.js’
10:23:36 AM: @ multi (webpack)-dev-server/client?xx://localhost:2000 ./app.js
10:23:36 AM: ERROR in ./docs/app.js
10:23:36 AM: Module build failed: Error: ENOENT: no such file or directory, open ‘/opt/build/repo/docs/app.js’
10:23:36 AM: @ multi (webpack)-dev-server/client?xx://localhost:2000 ./app.js
10:23:36 AM: webpack: Failed to compile.

Curious, what build command are you using to run your deploy? There seems to be a 29 minute delay between webpack compiling successfully and the errors in the deploy log. That along with evidence of an open port on localhost:2000, indicates that you might be trying to run a dev server on the CDN.

Are you by chance running npm run start instead of npm run build?

1 Like

Awesome!
Deploy is green now, site still down (but that maybe something else)

Is there a logging area?

If you click on your deploy on the Netlify dashboard you should be able to access the deploy logs. I’m curious, didn’t you copy/paste your logs from there for your earlier post?

I found the deploy-log (of course).
But i am looking for a site log? An error log?

There’s only one deploy log for each deploy, @rduinmaijer . Can you provide us with a link to one of your recent deploy logs for a failed build? Thanks.

Ladies and Gentleman it’s alive!

https://nifty-benz-264ac3.netlify.com/

I delete the site completely from Netlify and then did a fresh check-out and a new deploy. So perhaps public folder wasn’t set correctly.

Thanks everyone for the help.

2 Likes