Issues running locally with yarn

[dellagustin]

I'll use this issue to record the problems I'm having running the project locally as it currently is (https://github.com/Podcastindex-org/web-ui/tree/1eba32766a58b48cc0957e36a53465231253f84b).

Related issues

• Can we commit / track package-lock.json? #219

Related PRs

• Issue #219: yarn files setup #230

Related Mastodon threads

• https://podcastindex.social/@dave/109854671837458522

Links and references

• https://github.com/mrsteele/dotenv-webpack

[dellagustin]

I deleted my folder and started from a clean install with yarn 3.4.1 (recently installed).
It created the files .pnp.cjr and .pnp.loader.mjs.
In my previous attempt with a "dirty" folder where I used npm before, it created the file .yarnrc.yml with nodeLinker: node-modules, which seems to be an alternative to the files above.
This install did not create the folder node-modules.
When I tried to run yarn run build, it gave me the following error:

C:\Users\<folder structured manually omited>\podcastindex\podcastindex-web-ui\.pnp.cjs:39843
      Error.captureStackTrace(firstError);
            ^

Error: Your application tried to access dotenv-webpack, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: dotenv-webpack
Required by: C:\Users\guilh\Desenvolvimento\podcastindex\podcastindex-web-ui\
...

I added the missing module with yarn add dotenv-webpack.

Running yarn run build then resulted in the following error:

C:\Users\guilh\Desenvolvimento\podcastindex\podcastindex-web-ui\webpack.config.js:129
            path: `./.environments/.env${env.file ? `.${env.file}` : ''}`
                                             ^

TypeError: Cannot read property 'file' of undefined
    at module.exports (C:\Users\guilh\Desenvolvimento\podcastindex\podcastindex-web-ui\webpack.config.js:129:46)
...

[dellagustin]

The way env is consumed changed with 94c8dc2.

With that, running webpack now depends on the argument --env.file=<value>, so I guess that broke yarn run build.
The reason I was now running yarn run build is that yarn run dev was not working for me, I assumed the reason it was failing was the same reason why yarn run build was now failing, but that does not seem to be the case.

[daveajones]

Yes the use of yarn and npm has always confused me. I guess I’m supposed to be only using yarn but I’ve always run local testing with “npm run dev”.

[dellagustin]

@daveajones I think we need to look into that, at least the instructions on README.md should be working, otherwise contributors will have a hard time.
I need to test and fix #218 (comment), and now I'm having a hard time making the local env working again.

[dellagustin]

So, in this attempt now with the code from https://github.com/podStation/podcastindex-web-ui/tree/885095674fa218e26397e46bcfd73b9d0549afcd + yarn add dotenv-webpack.

Now something odd is happening, the site keeps loading forever and the log shows just ｢wdm｣: wait until bundle finished: /:

❯ yarn run dev
Failed to load ./.environments/.env.development.
i ｢wds｣: Project is running at http://localhost:9001/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\<folder structured manually omited>\podcastindex\podcastindex-web-ui\server\www
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /podcast/920666
i ｢wdm｣: wait until bundle finished: /podcast/920666
i ｢wdm｣: wait until bundle finished: /podcast/920666
i ｢wdm｣: wait until bundle finished: /

I have no idea what is happening on the background.

[dellagustin]

So, I updated the build script to NODE_ENV='development' && webpack --env.file=development --mode development --devtool inline-source-map and run yarn run build, took a some seconds but there was a successful output.
Then I went back to yarn run dev, and now it works. Maybe I unclogged it somehow, who knows.

[stevencrader]

I'm confused about you saying you are running yarn 3.4.1. I don't see that version on their website. I think the issues you are having may be from the "yarn" you are using. How did you install yarn?

https://yarnpkg.com/getting-started/install

[stevencrader]

Ignore my last comment. I didn't realize the latest yarn installed via corepack was 3.4.1 was the latest version.

[dellagustin]

With the current on the master branch I'm not having any more issues, I'm guessing that #230 did the trick.