After some hassle, I was able to finally run bin/setup, now I have started the rails server but I get this error message right when I visit the homepage:
ctionView::Template::Error (Webpacker can’t find application.css in /Users/thomas/Documents/Websites/rails-frontend/public/packs/manifest.json. Possible causes:
- You want to set webpacker.yml value of compile to true for your environment
unless you are using the webpack -w or the webpack-dev-server.
- webpack has not yet re-run to reflect updates.
- You have misconfigured Webpacker’s config/webpacker.yml file.
- Your webpack configuration is not creating a manifest.
Your manifest contains:
{
“application.js”: “/packs/js/application-e2d1692aebb36c02d64a.js”,
“entrypoints”: {
“application”: {
“assets”: {
“js”: [
“/packs/js/runtime-a264c6705547ad01acbb.js”,
“/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”,
“/packs/js/application-e2d1692aebb36c02d64a.js”
]
}
}
},
“js/application-e2d1692aebb36c02d64a.js.map”: “/packs/js/application-e2d1692aebb36c02d64a.js.map”,
“js/runtime-a264c6705547ad01acbb.js.map”: “/packs/js/runtime-a264c6705547ad01acbb.js.map”,
“js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”: “/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js”,
“js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js.map”: “/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-2576d4-9a719947c3eb6bc6295c.js.map”,
“runtime.js”: “/packs/js/runtime-a264c6705547ad01acbb.js”
}
):
5:
6: <%= csrf_meta_tags %>
7: <%= csp_meta_tag %>
8: <%= stylesheet_pack_tag(
9: “application”,
10: media: “all”,
11: “data-turbolinks-track”: “reload”
app/views/layouts/application.html.erb:8
I am not 100% sure what is wrong here?
So, webpacker is not generating the application.css file for some reason – this is a webpack error that sometimes happens intermittently when webpacker gets into a strange state.
Are you running this off the sample code directly, or have you been trying to build the app yourself? Is there another error in the logs that suggests that the app/packs/entrypoint/application.scss file didn’t compile?
You could try removing the /public/packs directory and trying again?
I’m sorry you are having this problem.
Alternately, the second edition of the book doesn’t use webpack, and should be easier to set up, if you purchased the ebook from Pragmatic, you get the second edition for free, and it might be worth you trying out.
Noel
I bought a physical book somewhen last year. I have deleted public/packs but that didn’t help. webpacker compiled and then the same error happened again. The log actually shows loads of errors:
ERROR in ./app/packs/entrypoints/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./package.json’ is not defined by “exports” in /Users/thomas/Documents/Websites/rails-frontend/node_modules/postcss/package.json
at new NodeError (node:internal/errors:377:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
at resolveExports (node:internal/modules/cjs/loader:483:36)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (/Users/thomas/Documents/Websites/rails-frontend/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/Users/thomas/Documents/Websites/rails-frontend/node_modules/css-loader/dist/index.js:12:39)
at processResult (/Users/thomas/Documents/Websites/rails-frontend/node_modules/webpack/lib/NormalModule.js:583:19)
at /Users/thomas/Documents/Websites/rails-frontend/node_modules/webpack/lib/NormalModule.js:676:5
at /Users/thomas/Documents/Websites/rails-frontend/node_modules/loader-runner/lib/LoaderRunner.js:397:11
at /Users/thomas/Documents/Websites/rails-frontend/node_modules/loader-runner/lib/LoaderRunner.js:185:11
at loadLoader (/Users/thomas/Documents/Websites/rails-frontend/node_modules/loader-runner/lib/loadLoader.js:33:11)
at iteratePitchingLoaders (/Users/thomas/Documents/Websites/rails-frontend/node_modules/loader-runner/lib/LoaderRunner.js:182:2)
at runLoaders (/Users/thomas/Documents/Websites/rails-frontend/node_modules/loader-runner/lib/LoaderRunner.js:395:2)
at NormalModule.doBuild (/Users/thomas/Documents/Websites/rails-frontend/node_modules/webpack/lib/NormalModule.js:631:3)
at NormalModule.build (/Users/thomas/Documents/Websites/rails-frontend/node_modules/webpack/lib/NormalModule.js:775:15)
at /Users/thomas/Documents/Websites/rails-frontend/node_modules/webpack/lib/Compilation.js:1177:12
ERROR in tsconfig.json
TS18003: No inputs were found in config file ‘tsconfig.json’. Specified ‘include’ paths were ‘["/*"]’ and ‘exclude’ paths were '["/*.spec.ts",“node_modules”,“vendor”,“public”]’.
1 ERROR in child compilations
webpack 5.11.0 compiled with 3 errors in 2976 ms
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
I did run the last command there. But that didn’t help.
I have removed the package postcss and readded it (yarn remove postcss / yarn add postcss) as it is mentioned in the log (and I think actually causing the issue).
but also that did not help.
Okay, let’s try a more complete restart.
- Delete public/packs
- Delete yarn.lock
- Delete /node_modules
re-run yarn
Try again.
(Next step if that doesn’t work is to be sure that the Tailwind/CSS setup is correct)
Did the above. Now the website is displayed. However the consolde displayed these errors.
I will try to update postcss-preset-env to v7 as indicated later. I have no clue what the error for tsconfig.json means.
I wonder whether I should buy the next version of the book - I kind of liked the approach, but I do realize that the moment I bought it, it was outdated, which is a pity (I can see that the new version is scheduled to come out only in september though… which again is a bit late…)
[Webpacker] Compiling…
[Webpacker] Compilation failed:
┌─────────────────────────────────────────────────────────────────────────────────┐
│ │
│ This version of postcss-preset-env is not optimised to work with PostCSS 8. │
│ Please update to version 7 of PostCSS Preset Env. │
│ │
│ If you find issues, you can report it at: │
│ Sign in to GitHub · GitHub │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
assets by path js/.js 906 KiB
asset js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-ecb112-e2d14a05ce28ce0ef5c7.js 812 KiB [emitted] [immutable] (id hint: vendors) 1 related asset
asset js/application-3447045abbd41a602e34.js 87 KiB [emitted] [immutable] (name: application) 1 related asset
asset js/runtime-938f80c4f9c18e83a52d.js 7.04 KiB [emitted] [immutable] (name: runtime) 1 related asset
asset css/application.css 3.96 MiB [emitted] (name: application) 1 related asset
asset manifest.json 1.39 KiB [emitted]
Entrypoint application 4.85 MiB (1.44 MiB) = js/runtime-938f80c4f9c18e83a52d.js 7.04 KiB js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-ecb112-e2d14a05ce28ce0ef5c7.js 812 KiB css/application.css 3.96 MiB js/application-3447045abbd41a602e34.js 87 KiB 4 auxiliary assets
runtime modules 3.71 KiB 7 modules
modules by path ./node_modules/core-js/ 428 KiB
modules by path ./node_modules/core-js/modules/.js 240 KiB 215 modules
modules by path ./node_modules/core-js/internals/*.js 188 KiB 214 modules
modules by path ./app/packs/ 10.7 KiB (javascript) 3.96 MiB (css/mini-extract)
modules by path ./app/packs/entrypoints/ 9.96 KiB (javascript) 3.96 MiB (css/mini-extract) 3 modules
modules by path ./app/packs/channels/ 790 bytes
./app/packs/channels/index.js 630 bytes [built] [code generated]
./app/packs/channels/ sync _channel.js$ 160 bytes [built] [code generated]
modules by path ./node_modules/@rails/ 60.2 KiB
./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js 32.6 KiB [built] [code generated]
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js 27.6 KiB [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24.3 KiB [built] [code generated]
./node_modules/turbolinks/dist/turbolinks.js 37.6 KiB [built] [code generated]
3 WARNINGS in child compilations (Use ‘stats.children: true’ resp. ‘–stats-children’ for more details)
ERROR in tsconfig.json
TS18003: No inputs were found in config file ‘tsconfig.json’. Specified ‘include’ paths were ‘["/*"]’ and ‘exclude’ paths were '["/*.spec.ts",“node_modules”,“vendor”,“public”]’.
webpack 5.73.0 compiled with 1 error and 3 warnings in 56325 ms
[Webpacker] Everything’s up-to-date. Nothing to do
Rendered layouts/_nav.html.erb (Duration: 28.2ms | Allocations: 463)
Rendered layout layouts/application.html.erb (Duration: 80450.6ms | Allocations: 6810)
Completed 200 OK in 80782ms (Views: 80484.2ms | ActiveRecord: 23.7ms | Allocations: 18028)
I think you are fine if the site is displaying – the tsconfig file reflects that there are no TypeScript files to compile yet.
Thanks for sticking with it.
Noel
