Files contains a reference to the file?

[fisherspoons]

Hi, I am upgrading symphony version and need to migrate to webpack-encore. But when compiling files, I get a very strange error, it happens when compiling js and css files.

package.json

  "dependencies": {
    "webpack-notifier": "^1.15.0"
  },
  "devDependencies": {
    "@symfony/stimulus-bridge": "^3.2.1",
    "@symfony/webpack-encore": "^3.0.0",
    "core-js": "^3.23.5",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2"
  },
  "scripts": {
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },

webpack-config

const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('web/assetic/')
    .setPublicPath('/web/assetic/')
    .setManifestKeyPrefix('web/assetic/')

    .configureFilenames({
        js: '[name].js?v=[fullhash]',
        css: '[name].css?v=[fullhash]',
    })

    .addEntry('cookies_preferences.min', './web/js/cookies-preferences.js')
    .addEntry('skins_js.min', './web/sites/skins/js/common.js')

    .addStyleEntry('skins_css.min', [
        './web/sites/skins/libs/bootstrap/scss/bootstrap.scss',
        './web/sites/skins/scss/main.scss',
        './web/sites/skins/libs/slider/slick.css'
    ])

    .enableStimulusBridge('./assets/controllers.json')

    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    .enableSassLoader()
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

When I try use build I have errors

 ERROR  Failed to compile with 6 errors                                                                                                                                                                                                                                           8:03:03 PM

Module build failed: Module not found:
"./web/js/cookies-preferences.js" contains a reference to the file "jquery".
This file can not be found, please check it for typos or update it if the file got moved.

"./web/sites/skins/js/common.js" contains a reference to the file "jquery".
This file can not be found, please check it for typos or update it if the file got moved.

"./web/sites/skins/scss/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!./web/sites/skins/scss/main.scss" contains a reference to the file "/sites/fonts/Geometria/Geometria-Bold.woff2".
This file can not be found, please check it for typos or update it if the file got moved.

"./web/sites/skins/scss/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!./web/sites/skins/scss/main.scss" contains a reference to the file "/sites/fonts/Geometria/Geometria-Bold.woff".
This file can not be found, please check it for typos or update it if the file got moved.

"./web/sites/skins/scss/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!./web/sites/skins/scss/main.scss" contains a reference to the file "/sites/fonts/Geometria/Geometria-Regular.woff2".
This file can not be found, please check it for typos or update it if the file got moved.

"./web/sites/skins/scss/main.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!./web/sites/skins/scss/main.scss" contains a reference to the file "/sites/fonts/Geometria/Geometria-Regular.woff".
This file can not be found, please check it for typos or update it if the file got moved.

I found same problem https://github.com/symfony/stimulus-bridge/issues/47 but it did not help

[stof]

I don't think [name].js?v=[fullhash] works as filename. I guess you expected to have a file named [name.js] with the full hash in the query string of the URL when accessing it. But then, that's not the filename anymore.

[fisherspoons]

I don't think [name].js?v=[fullhash] works as filename. I guess you expected to have a file named [name.js] with the full hash in the query string of the URL when accessing it. But then, that's not the filename anymore.

Yes, I try to add the version to the filename, I remove it, but the problem remains. In CSS files it cannot resolve the file path, but in JS files there are no jquery imports, just using $

.autoProvidejQuery() nothing effect

  .configureFilenames({
        js: '[name].js',
        css: '[name].css',
    })

[fisherspoons]

I have already spent a lot of time and I do not understand what could be the problem?

addEntry('skins_js.min', [
        './web/sites/skins/libs/jquery/dist/jquery.min.js',
        './web/sites/skins/libs/slider/slick.min.js',
        './web/sites/skins/libs/vibrant/vibrant.min.js',
        './web/sites/skins/js/common.js'
    ])

"./web/sites/skins/libs/slider/slick.min.js" contains a reference to the file "jquery".
This file can not be found, please check it for typos or update it if the file got moved.

Perhaps this is related to babel, tell me where to look?

[stof]

Well, if you want webpack to auto-provide jquery for non-UMD/non-ESM packages, you still need to have jquery in your project as part of the dependencies.

@weaverryan maybe we should check the presence of jquery in dependencies when using .autoProvidejQuery()

[weaverryan]

That is a good idea 👍

[maykino]

Were you able to resolve this?