Static extensions can not be loaded

[talalong]

I am trying to import foundation-icons without defining any loader in the webpack.config.js file. However, the rake assets:precompile command was giving me errors indicating that some files (woff, eot, etc.) could not be loaded. Shakepacker should have these loaders predefined by default, unlike Webpacker v5, right?

This is the error:

Module not found: Error: Can't resolve 'foundation-icons.woff'

This is my webpacker.config.js.

const { generateWebpackConfig, merge } = require('shakapacker')

const webpackConfig = generateWebpackConfig()

const yamlConfig = require('./rules/yaml')

module.exports = merge(yamlConfig, webpackConfig)

My package.json

{
  "packageManager": "npm@8.19.2",
  "name": "app",
  "private": true,
  "version": "0.1.0",
  "babel": {
    "presets": [
      "./node_modules/shakapacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ],
  "dependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-transform-runtime": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/runtime": "^7.24.7",
    "@types/babel__core": "^7.20.5",
    "@types/webpack": "^5.28.5",
    "axios": "^1.7.2",
    "babel-loader": "^8.3.0",
    "coffee-loader": "^5.0.0",
    "coffeescript": "^2.7.0",
    "compression-webpack-plugin": "^9.2.0",
    "css-loader": "^7.1.2",
    "foundation-datepicker": "^1.5.6",
    "foundation-icons": "^2.0.0",
    "mini-css-extract-plugin": "^2.9.0",
    "moment": "^2.30.1",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.77.6",
    "sass-loader": "^14.2.1",
    "shakapacker": "8.0.0",
    "terser-webpack-plugin": "^5.3.10",
    "vue-i18n": "^9.13.1",
    "vue-loading-overlay": "^6.0.4",
    "webpack": "^5.92.1",
    "webpack-assets-manifest": "^5.2.1",
    "webpack-cli": "^4.10.0",
    "webpack-merge": "^5.10.0",
    "yaml-js-loader": "^0.1.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^4.15.2"
  }
}

app/javascript/packs/application.sass

@import "~foundation-datepicker/css/foundation-datepicker"
@import "~foundation-icons/foundation-icons" // <--- This is where it failed !!!!!

This is the sample repo

[justin808]

Are the files published?

[talalong]

@tomdracz So I've tried to import another font lib like material-icons. Same issue. The font files can not be loaded.

Module not found: Error: Can't resolve './material-icons-two-tone.woff2'

[tomdracz]

Hm, I've tried checking the material-icons here tomdracz/shakapacker-css-test@a5bc416 in my toy repo and everything works as expected.

Same with foundation icons tomdracz/shakapacker-css-test@198b559

Tried version with tilde and without and both work the same.

Something might be off in your setup. Any reasons for the custom rules for foundation and sass here https://github.com/talalong/rails-shakapacker/blob/9c5e73a2e0903a0a754a8304e2fe58a2af88c7ad/config/webpack/webpack.config.js#L6-L9 ? Those should come out of the box and work fine in the toy repo as attached.

You can try and compare the configs between yours and mine, but any issue here is bound to be around the webpack config rather than anything Shakapacker brings. We do have rules for sass for example https://github.com/shakacode/shakapacker/blob/main/package/rules/sass.js so I wonder whether your custom ones are not conflicting with that.

[talalong]

@tomdracz Thank you.

Something might be off in your setup. Any reasons for the custom rules for foundation and sass here

Those are there just for the test case. Using the default loader did not work for me at the beginning, so I tried adding some additional loaders. However, it did not work out. Removing them led me to the same issue.

I’ve found the issue. You imported the icons using CSS syntax in your toy repo. However, I am using SASS. Webpacker V5 does not have an issue reading this file. I have cloned your repo and added some imports using SASS syntax, and the error is shown.
As a workaround, I can create another CSS file and put the import statements in there so I can keep my other SASS definitions. However, I don’t know if this is the best solution.

[tomdracz]

Thanks! So this works:
tomdracz/shakapacker-css-test@0020274

But If I try @import 'foundation-icons/foundation-icons.scss' then it goes kaboom. Now it's all lining up.

https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#problems-with-url

I don't see foundation-icons providing any variable to get the paths modified, so hooking up resolve-url-loader is probably the go-to solution here.

Unless you're happy to just import css rather than scss version of that file?

[talalong]

@tomdracz Ok I think I will stick with the CSS solution for now. Adding resolve-url-loader requires me to override the default sass-loader, which causes me more issues.

But I have one more question regarding the setup in your repo (maybe it’s a stupid question 😔). I noticed that the stylesheets were loaded in the header from href packs/css/etc. instead of from asset/etc. Does this have something to do with Shakapacker and Webpacker, or is it just a configuration that I didn’t notice?

// current project
<link rel="stylesheet" href="/packs/css/test_import.css">
<link rel="stylesheet" href="/packs/css/test_require.css">
<link rel="stylesheet" href="/packs/css/test_import_all.css">

// my old project with webpacker v5
<link rel="stylesheet" href="/assets/application-7d50d6728a198883a817a198ac569c9bde9f7edf660ff88e608bf768097e7413.css" media="all" data-turbolinks-track="reload">

[tomdracz]

shakapacker.yml dictates the output here but even in Webpacker v5, by default the assets were served from the packs directory https://github.com/rails/webpacker/blob/5-x-stable/lib/install/config/webpacker.yml#L7

<link rel="stylesheet" href="/assets/application-7d50d6728a198883a817a198ac569c9bde9f7edf660ff88e608bf768097e7413.css" media="all" data-turbolinks-track="reload">

Looks like this might be served through Rails asset pipeline/sprockets rather than Webpacker? That is definitely storing assets in assets folder by default https://guides.rubyonrails.org/asset_pipeline.html#how-to-use-sprockets

[talalong]

@tomdracz ah I see it now. Thank you for the clarification.