Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"Up and running" incomplete? #401

Open
janpieper opened this issue May 4, 2022 · 3 comments
Open

"Up and running" incomplete? #401

janpieper opened this issue May 4, 2022 · 3 comments

Comments

@janpieper
Copy link
Contributor

For #400 I wanted to run the website locally to see my changes before creating a PR, but I wasn't able to do so 🤷‍♂️

It feels like the Up and running section in the README is incomplete 🤔

When following the documented steps, I end up with this, when visiting http:https://localhost:4000:

Checking the log, I found these a lot of these messages:

[webpack-cli] HookWebpackError: Not supported
    at makeWebpackError (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/HookWebpackError.js:48:9)
    at /home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:3058:12
    at eval (eval at create (/home/jan/github/erlef-website/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at /home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:509:26
    at /home/jan/github/erlef-website/assets/node_modules/copy-webpack-plugin/dist/index.js:708:13
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
-- inner error --
Error: Not supported
    at /home/jan/github/erlef-website/assets/node_modules/copy-webpack-plugin/dist/index.js:704:13
    at fn (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:508:9)
    at Hook.eval [as callAsync] (eval at create (/home/jan/github/erlef-website/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/jan/github/erlef-website/assets/node_modules/tapable/lib/Hook.js:18:14)
    at cont (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:3055:34)
    at /home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:3103:10
    at symbolIterator (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:3463:5)
    at Compilation.createChunkAssets (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:4498:12)
caused by plugins in Compilation.hooks.processAssets
Error: Not supported
    at /home/jan/github/erlef-website/assets/node_modules/copy-webpack-plugin/dist/index.js:704:13
    at fn (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:508:9)
    at Hook.eval [as callAsync] (eval at create (/home/jan/github/erlef-website/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/jan/github/erlef-website/assets/node_modules/tapable/lib/Hook.js:18:14)
    at cont (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:3055:34)
    at /home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:3103:10
    at symbolIterator (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:3485:9)
    at timesSync (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/home/jan/github/erlef-website/assets/node_modules/neo-async/async.js:3463:5)
    at Compilation.createChunkAssets (/home/jan/github/erlef-website/assets/node_modules/webpack/lib/Compilation.js:4498:12)
[error] Task #PID<0.1097.0> started from ErlefWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.6.6) lib/phoenix/endpoint/watcher.ex:55: Phoenix.Endpoint.Watcher.watch/2
    (elixir 1.13.3) lib/task/supervised.ex:89: Task.Supervised.invoke_mfa/2
    (stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["node", ["node_modules/webpack/bin/webpack.js", "--mode", "development", "--watch", "--watch-options-stdin", {:cd, "assets"}, {:env, [{"TAILWIND_MODE", "watch"}]}]]
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

I ran npx browserslist@latest --update-db in the assets/ folder:

$ npx browserslist@latest --update-db
npx: installed 6 in 0.609s
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Latest version:     1.0.30001335
Installed versions: 1.0.30001230, 1.0.30001312
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ npm install caniuse-lite
npm WARN [email protected] requires a peer of acorn@^8 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bootstrap@^3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of node-sass@^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN assets No description
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Cleaning package.json dependencies from caniuse-lite
$ npm uninstall caniuse-lite
npm WARN [email protected] requires a peer of acorn@^8 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bootstrap@^3.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of node-sass@^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN assets No description
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

caniuse-lite has been successfully updated

Target browser changes:
- and_chr 90
+ and_chr 101
- and_ff 87
+ and_ff 99
- android 90
+ android 101
- chrome 90
- chrome 89
- chrome 88
+ chrome 101
+ chrome 100
+ chrome 99
+ chrome 98
+ chrome 97
- edge 90
- edge 89
+ edge 101
+ edge 100
+ edge 99
+ edge 98
- firefox 88
- firefox 87
+ firefox 99
+ firefox 98
+ firefox 97
- ios_saf 14.5
- ios_saf 13.4-13.7
+ ios_saf 15.4
+ ios_saf 15.2-15.3
+ ios_saf 15.0-15.1
+ ios_saf 14.5-14.8
+ ios_saf 12.2-12.5
- op_mob 62
+ op_mob 64
- opera 75
- opera 74
+ opera 86
+ opera 85
- safari 14
+ safari 15.4
+ safari 15.2-15.3
- samsung 14.0
- samsung 13.0
+ samsung 16.0
+ samsung 15.0

But still, I am getting the Error: Not supported log messages and I still get Phoenix.Router.NoRouteError errors 😞

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /images/sponsors/ninefx-logo.png (ErlefWeb.Router)
    (erlef 0.1.0) lib/phoenix/router.ex:406: ErlefWeb.Router."call (overridable 2)"/2
    (erlef 0.1.0) lib/plug/error_handler.ex:80: ErlefWeb.Router.call/2
    (erlef 0.1.0) lib/erlef_web/endpoint.ex:1: ErlefWeb.Endpoint.plug_builder_call/2
    (erlef 0.1.0) lib/plug/debugger.ex:136: ErlefWeb.Endpoint."call (overridable 3)"/2
    (erlef 0.1.0) lib/erlef_web/endpoint.ex:1: ErlefWeb.Endpoint.call/2
    (phoenix 1.6.6) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) /home/jan/github/erlef-website/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) /home/jan/github/erlef-website/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) /home/jan/github/erlef-website/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
@starbelly
Copy link
Member

I just built from scratch and did find an issue. There's a missing js dep that's needed for a feature on main (not in production yet). While I don't see an error related to the missing dep in the above, I wonder if this is the problem.

FWIW the error is :

SassError: Can't find stylesheet to import.
  ╷
7 │ @import "../node_modules/@yaireo/tagify/src/tagify";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

I just merged a PR that adds said missing dep. Could you try doing a git pull and seeing if that resolves the issue?

@janpieper
Copy link
Contributor Author

No difference so far... Can you please check the version of Node.js you're using 🤔 I am using the tools configured in the .tool-versions file. Maybe you're using a different (newer?) version of Node.js. I've seen some articles suggesting to upgrade Node.js to "fix" this issue or at least to get more details about the root cause.

@starbelly
Copy link
Member

That would be the issue. The .tool-versions was put in place for other folks that use asdf. I personally don't, and so this file fell behind. Try version 18.1.0 and feel free to open a PR for this and if you find gaps in the README as far as up and running we will gladly accept changes in that area too :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@janpieper @starbelly