Can't resolve 'file-loader'

[VincentLanglet]

When I run

yarn install --production
NODE_ENV=production ./node_modules/.bin/encore production

I get

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve 'file-loader' in '/var/www/vagrant.assurancevie.com/current'

But the module file-loader is installed. It's not in node_modules but in node_modules/@symfony/webpack-encore/node_modules because I have another library requiring another version of file-loader.

[weaverryan]

Hey @VincentLanglet!

Can you post your package.json? What is the other library that requires another version of file-loader? Do you also get the error when you do a normal yarn install and a normal Encore build? Or only with the production flags?

Cheers!

[VincentLanglet]

Can you post your package.json?

This should be enough.

"dependencies": {
        "@babel/core": "7.9.*",
        "@babel/plugin-proposal-class-properties": "7.8.*",
        "@babel/plugin-transform-runtime": "7.9.*",
        "@babel/preset-react": "7.9.*",
        "@etalab/decoupage-administratif": "0.8.*",
        "@symfony/webpack-encore": "0.28.*",
        "autoprefixer": "9.7.*",
        "awesome-bootstrap-checkbox": "1.0.*",
        "bootstrap": "3.4.1",
        "bootstrap-datepicker": "1.9.*",
        "chart.js": "2.6.0",
        "ckeditor-notification": "4.11.*",
        "ckeditor-wordcount-plugin": "1.17.*",
        "copy-webpack-plugin": "5.1.*",
        "core-js": "3.6.*",
        "devbridge-autocomplete": "1.4.*",
        "file-loader": "1.1.*",
        "font-awesome": "4.7.0",
        "hard-source-webpack-plugin": "0.13.*",
        "jquery": "3.4.*",
        "jquery-cookiebar": "1.0.*",
        "js-yaml": "3.13.*",
        "less": "3.11.*",
        "less-loader": "4.1.*",
        "lodash": "4.17.*",
        "postcss-loader": "3.0.*",
        "prop-types": "15.7.*",
        "react": "16.13.*",
        "react-dom": "16.13.*",
        "react-intl": "2.9.0",
        "react-is": "16.13.*",
        "react-modal": "3.11.*",
        "react-on-rails": "11.3.*",
        "react-pdf": "4.1.*",
        "react-redux": "7.2.*",
        "react-table": "6.10.*",
        "redux": "4.0.*",
        "redux-devtools-extension": "2.13.*",
        "styled-components": "5.1.*"
    },
    "devDependencies": {
        "@storybook/addon-actions": "5.3.*",
        "@storybook/addons": "5.3.*",
        "@storybook/react": "5.3.*",
        "babel-eslint": "10.1.*",
        "babel-loader": "8.1.*",
        "enzyme": "3.11.*",
        "enzyme-adapter-react-16": "1.15.*",
        "enzyme-to-json": "3.4.*",
        "eslint": "6.8.*",
        "eslint-config-prettier": "6.10.*",
        "eslint-plugin-import": "2.20.*",
        "eslint-plugin-prettier": "3.1.*",
        "eslint-plugin-react": "7.19.*",
        "husky": "4.2.*",
        "jest": "25.3.*",
        "jest-styled-components": "7.0.*",
        "lint-staged": "10.1.*",
        "prettier": "2.0.*",
        "stylelint": "13.3.*",
        "stylelint-config-prettier": "8.0.*",
        "stylelint-config-standard": "20.0.*",
        "stylelint-prettier": "1.1.*",
        "yarn-deduplicate": "2.0.*"
    },

What is the other library that requires another version of file-loader?

@storybook which is a dev-dependency.

Do you also get the error when you do a normal yarn install and a normal Encore build? Or only with the production flags?

I don't get the error in dev since @storybook require file-loader and the version provided by @storybook is installed in node_modules directly.

So webpack-encore is using the file-loader required by @storybook (which is version ^4.2.0) when it especially required to installed the version 1 in node_modules/@symfony/webpack-encore/node_modules...

[VincentLanglet]

I still have the issue with the 0.29 version.

encore doesn't find the following module file-loader.

[Lyrkan]

"file-loader": "1.1.*",

You shouldn't add that one to your project manually.

That being said you should have one version of file-loader at the root of node_modules no matter what because of the hoisting mechanism (especially if you require it manually).

I see you have yarn-deduplicate in your dependencies... I suspect it could be related if it is the cause of that missing top-level file-loader. Try tuning it to exclude file-loader if that's the case.

Also, which version of Yarn are you using?

[VincentLanglet]

"file-loader": "1.1.*",

You shouldn't add that one to your project manually.

I agree.
Sorry, I copy-pasted my package.json after my workaround.

If I don't add this line, I get the error can't resolve file-loader because the dependency is only in @symfony/webpack-encore/node_modules.

That being said you should have one version of file-loader at the root of node_modules no matter what because of the hoisting mechanism (especially if you require it manually).

I need to require it manually in order to have one at the root of my node_modules.

When I don't require it manually, I don't have one at the root. I think it's more a yarn bug than a webpack-encore bug, BUT I still considere there is a bug with encore, because webpack-encore should be able to use the hoisted dependency.

Indeed, when I do yarn install --production=false, I have

• file-loader: ^4.2 at the root of the node_modules
• 'file-loader: 1.1hoisted bywebpack-encore`

And webpack-encore is using the one in the root node_modules. Hopefully it works. But if webpack-encore wasn't able to work with this version, I would be blocked.

It's more a general issue: When webpack-encore needs a dependency, it should try to require the hoisted one, and if not found, try to require the root one.

I see you have yarn-deduplicate in your dependencies... I suspect it could be related if it is the cause of that missing top-level file-loader. Try tuning it to exclude file-loader if that's the case.

It's not related. I tried without this package.

Also, which version of Yarn are you using?

1.22.4

[Lyrkan]

When I don't require it manually, I don't have one at the root. I think it's more a yarn bug than a webpack-encore bug, BUT I still considere there is a bug with encore, because webpack-encore should be able to use the hoisted dependency.

The issue is that Encore currently builds a Webpack config that looks like this:

{
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
        loader: 'file-loader'
      }
    ]
  }
}

This config is then used by Webpack that does the resolving of file-loader.
Node checks if webpack has that dependency in its node_modules folder, then at the top-level. In your case both of them are missing and it has no reason to use the one from node_modules/@symfony/webpack-encore/node_modules.

I tried to fix that by moving the resolving part in Encore, would you be able to test if that works for you?

$ yarn remove @symfony/webpack-encore
$ yarn add git://github.com/lyrkan/webpack-encore.git#loaders-resolving

[VincentLanglet]

I tried to fix that by moving the resolving part in Encore, would you be able to test if that works for you?

$ yarn remove @symfony/webpack-encore
$ yarn add git://github.com/lyrkan/webpack-encore.git#loaders-resolving

Yes it works !

With no file-loader at the root of my node_modules