Webpack-encore: TypeError: Cannot read property 'startsWith' of undefined...

[Rikijs]

Hello!

I embarked on the journey to upgrade to Encore v0.21.0. I followed instructions (at https://symfony.com/blog/encore-0-21-0-webpack-4-support-copy-files-support-webpackencorebundle) closely. Yet i get this error and i can not figure out the problem.

Actually, this is second project that i am updating to Encore v0.21.0 and the first one works without a hitch. I compared configurations and can not see what could be wrong.

I tried deleting node_modules and rerunning yarn install but the problem persists.

What may the source of the problem be?
Please advise.
Thank you!

package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.21.0",
        "node-sass": "^4.10.0",
        "sass-loader": "^7.0.1"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "bootstrap": "^4.1.3",
        "cookieconsent": "^3.0.6",
        "countdown": "^2.6.0",
        "jquery": "3.3.1",
        "linearicons": "^1.0.1",
        "magnific-popup": "^1.1.0",
        "moment": "^2.21.0",
        "moment-countdown": "^0.0.3",
        "popper.js": "^1.14.5"
    }
}

webpack.config.js

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    .copyFiles({
        from: './assets/static',

        // optional target path, relative to the output dir
        to: 'static/[path][name].[ext]'

        // only copy files matching this pattern
        //pattern: /\.(png|jpg|jpeg)$/
    })

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as public/build/app.js
    .addEntry('app', './assets/js/app.js')
    .addEntry('gallery', './assets/js/gallery.js')
    .addEntry('contact_us', './assets/js/contact_us.js')

    // will output as public/build/global.css
    .addStyleEntry('main', './assets/css/main.scss')
    .addStyleEntry('admin', './assets/css/admin.scss')

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        moment: 'moment',
        countdown: 'countdown',
        moment_countdown: 'moment-countdown',
        magnific_popup: 'magnific-popup',
        cookieconsent: 'cookieconsent'
    })

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    .splitEntryChunks()

    .enableSingleRuntimeChunk()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

error in console (command prompt)

PS C:\DEV\project123> yarn run encore dev
yarn run v1.12.3
$ C:\DEV\project123\node_modules\.bin\encore dev
Running webpack ...

 ERROR  Failed to compile with 1 errors

TypeError: Cannot read property 'startsWith' of undefined
    at isRelative (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\formatters\moduleNotFound.js:5:17)
    at Array.from.map.module (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\formatters\moduleNotFound.js:64:15)
    at Array.map (<anonymous>)
    at groupModules (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\formatters\moduleNotFound.js:62:43)
    at formatErrors (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\formatters\moduleNotFound.js:74:18)
    at format (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\formatters\moduleNotFound.js:87:10)
    at format (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\core\formatErrors.js:12:33)
    at Array.map (<anonymous>)
    at formatErrors (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\core\formatErrors.js:15:21)
    at FriendlyErrorsWebpackPlugin.displayErrors (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\friendly-errors-plugin.js:110:5)
    at doneFn (C:\DEV\project123\node_modules\friendly-errors-webpack-plugin\src\friendly-errors-plugin.js:51:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\DEV\project123\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (C:\DEV\project123\node_modules\tapable\lib\Hook.js:154:20)
    at emitRecords.err (C:\DEV\project123\node_modules\webpack\lib\Compiler.js:257:22)
    at Compiler.emitRecords (C:\DEV\project123\node_modules\webpack\lib\Compiler.js:371:39)
    at emitAssets.err (C:\DEV\project123\node_modules\webpack\lib\Compiler.js:251:10)
    at hooks.afterEmit.callAsync.err (C:\DEV\project123\node_modules\webpack\lib\Compiler.js:357:14)
    at _err0 (eval at create (C:\DEV\project123\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:20:1)
    at C:\DEV\project123\node_modules\assets-webpack-plugin\dist\index.js:148:9
    at C:\DEV\project123\node_modules\assets-webpack-plugin\dist\lib\output\createQueuedWriter.js:16:7
    at C:\DEV\project123\node_modules\assets-webpack-plugin\dist\lib\output\createOutputWriter.js:74:13
    at C:\DEV\project123\node_modules\graceful-fs\graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:135:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\DEV\project123>

[Lyrkan]

Hi @Rikijs,

This is probably related to this issue in friendly-errors-webpack-plugin (used in Encore to format errors): https://github.com/geowarin/friendly-errors-webpack-plugin/issues/79

A PR was opened for it a while ago, maybe we could try to patch that on our side while we wait for it to be merged.

Anyway, from what I understand it's probably related to an import that contains an invalid path... maybe you could try commenting some of your entrypoints or the copyFiles() method (it triggers that bug if the path indicated in the from option doesn't exist) to pinpoint where it is located.

[weaverryan]

Maybe we can try to bump the PR forward. We could take their commit, add a test, open a new PR

[Rikijs]

Hello @Lyrkan and @weaverryan

I managed to find out the source of the problem i was having!
I had configured copyFiles() to look in ./assets/static, yet folder static did not exist.
When i created folder static error disappeared and builds, from this moment on, where created successfully!

Though, the error message sure could be more descriptive in this case.
Something along the line of "Source path does not exist." would be helpful.

EDIT
I found my mistake separately - before reading @Lyrkan and @weaverryan comments on this issue.
Now reading geowarin/friendly-errors-webpack-plugin#79 thoroughly - the issue matches exactly the problem i was having.

Thanks.

[weaverryan]

See https://github.com/geowarin/friendly-errors-webpack-plugin/pull/82 - I tried to push it along ;)

[arendjantetteroo]

Also got this by forgetting to first install some asset modules on a new ci build. A clear error message would definitly help :)

[mikemix]

One of your paths must be invalid somewhere. Just had the same issue.

Me, I was trying to import images from the ./images directory, but the valid path was ../images instead.

[veteran29]

If you're using npm ^6.9.0 you can fix this by aliasing version required by encore to one that was forked and fixed.

Either run:

npm i friendly-errors-webpack-plugin@npm:@soda/friendly-errors-webpack-plugin

or add this to your package.json:

"friendly-errors-webpack-plugin": "npm:@soda/friendly-errors-webpack-plugin@^1.7.1"

This fork is used by vue-cli so it should be kept updated.

[tianyong90]

Same issue when I use Encore.addAliases() method.

Encore.addAliases({
  '~': path.join(__dirname, './resources/js'),
})

[Lyrkan]

Should be fixed by #590

[rajeshrajesh35]

Hey Guys,

I have found the issue, you are not passing the auth details that's why these error you are getting.

Try to pass auth, still you get error just drop you message here

[Lyrkan]

@rajeshrajesh35 AFAIK this error was triggered by an invalid import and was hiding the real error message. I'd guess that your issue was an entirely different thing.