webpack: Cannot read property 'match' of undefined

SymfonyNpmWebpackWebpack Encore

Symfony Problem Overview


I have installed webpack (Symfony encore) using npm as follows:

sudo npm install -g @symfony/webpack-encore --save-dev

I ran this from /var/www/project

I was required to install globally due to issues with package managers and shared folders when dealing with Windows host / Linux guest.

I cannot install webpack (node_modules) in the same directory (or under it) as the /var/www/project

So my package.json file looks like this:

{
  "name": "test",
	"version": "1.0.0",
  "description": "This is a test",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "@symfony/webpack-encore": "^0.15.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex",
	"license": "MIT"
}

I run encore from /var/www/project using this

/usr/local/bin/encore dev

I get this lovely output in return:

Running webpack ...

  TypeError: Cannot read property 'match' of undefined
  
  - index.js:125 parse
    [lib]/[webpack-encore]/[yargs-parser]/index.js:125:12
  
  - index.js:761 Function.Parser.detailed
    [lib]/[webpack-encore]/[yargs-parser]/index.js:761:10
  
  - yargs.js:938 Object.Yargs.self._parseArgs
    [lib]/[webpack-encore]/[yargs]/yargs.js:938:27
  
  - yargs.js:927 Object.get [as argv]
    [lib]/[webpack-encore]/[yargs]/yargs.js:927:19
  
  - index.js:725 Object.configureRuntimeEnvironment
    [lib]/[@symfony]/webpack-encore/index.js:725:54
  
  - index.js:770 Proxy.parameters
    [lib]/[@symfony]/webpack-encore/index.js:770:45
  
  - webpack.config.js:3 Object.<anonymous>
    /var/www/project/webpack.config.js:3:8
  
  - module.js:573 Module._compile
    module.js:573:30
  
  - module.js:584 Object.Module._extensions..js
    module.js:584:10
  
  - module.js:507 Module.load
    module.js:507:32

What am I missing?

Symfony Solutions


Solution 1 - Symfony

Simple answer just run

rm -rf package-lock.json

Solution 2 - Symfony

Try to delete package-lock.json and node_modules folder and after that run npm install or yarn install

Solution 3 - Symfony

Simply remove package-lock.json with this cmd command:

rm -rf package-lock.json

Solution 4 - Symfony

An additional reason for this message can be a mismatch between the npm major version that the package-lock.json was generated with and the version the npm install is run on.

If for example the lockfile was generated using npm@5 and later you try to npm install on npm@6 because of lets say a minor node@8 update you will see this error.

The solution here is like mentioned in the other answers to remove node_modules and package-lock.json and npm install on npm@6 again. Or stay on npm@5 for lockfile and later install.

Solution 5 - Symfony

You need to remove package-lock.json from the root directory of the application. After this, you can update your new package.

Solution 6 - Symfony

Try the below:

  1. Remove or delete both the 'node_modules' folder and 'package-lock.json' file.
  2. Run npm install in CMD or Terminal inside the project directory.

The issue should be fixed.

Solution 7 - Symfony

Delete package-lock.json file and retry installing by command - npm install.

Solution 8 - Symfony

Try "npm cache clean --force"

This will clear the nmp cache and may resolve your issue

Solution 9 - Symfony

I have this same issue since Java 11. Try to run yarn install ... instead. It works for me.

Solution 10 - Symfony

If you're having trouble with NPM, use YARN. (Especially Windows users)

But you MUST first:

  1. Delete the node_modules folder before switching over
  2. Use Git bash as your default editor if you're using - I have found that on my system it just plays a little less rough
  3. Ensure that you have followed this guide to set up SSH key on your machine with Github (https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent). Don't skip this, otherwise packages will not download correctly

Also, you might want to think of using Laragon to have a standardized development environment instead of having to ensure you have installed WAMP and all sort of goodies by yourself.

I've pulled my hair out for ages trying to figure this out, wondering why sometimes things just weren't working.

I hope this helps someone out there.

Solution 11 - Symfony

Installing webpack-encore globally is currently not supported. The error message however is not really explanatory.

There is an issue open to improve this error message: https://github.com/symfony/webpack-encore/issues/36

You should try to install webpack-encore locally, this is the real issue here.

Solution 12 - Symfony

After adding an argument to the configureRuntimeEnvironment method it started working for me:

Encore.configureRuntimeEnvironment('dev');

Somehow if you omit the argument(s) the error keeps showing up.

Solution 13 - Symfony

If you are trying to npm install with a lock file, you might actually be looking for the npm ci command which installs the version-locked dependencies.

npm-ci documentation: https://docs.npmjs.com/cli/ci.html

Solution 14 - Symfony

Try rebuilding node-sass inside your project directory

npm rebuild node-sass

Solution 15 - Symfony

If your having the following error when running: npm install

npm ERR! Cannot read property 'matches' of null

Then do the following delete on Windows: C:\Users/{User-Name}\AppData\Roaming\npm C:\Users/{User-Name}\AppData\Roaming\npm-cache

Then re-run: npm install

Worked for me enjoy. :)

Solution 16 - Symfony

Follow the steps below:

npm cache clear --force(after execution, NPM install is ineffective, and then proceed to step 2) Delete package-lock.json under the project folder, and then run NPM install (step 3 is ineffective)

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlex.BarylskiView Question on Stackoverflow
Solution 1 - SymfonyDavid S LeeView Answer on Stackoverflow
Solution 2 - SymfonyMuhoView Answer on Stackoverflow
Solution 3 - SymfonyMuhammad UsmanView Answer on Stackoverflow
Solution 4 - SymfonycrackmiggView Answer on Stackoverflow
Solution 5 - SymfonySinhaView Answer on Stackoverflow
Solution 6 - SymfonySwaraj LahaView Answer on Stackoverflow
Solution 7 - SymfonyPankaj ChauhanView Answer on Stackoverflow
Solution 8 - SymfonyEhsan MohammadiView Answer on Stackoverflow
Solution 9 - SymfonyAchillesVanView Answer on Stackoverflow
Solution 10 - SymfonyTheGasManView Answer on Stackoverflow
Solution 11 - SymfonyKristof FeysView Answer on Stackoverflow
Solution 12 - SymfonywhitebrowView Answer on Stackoverflow
Solution 13 - SymfonyEddie HongView Answer on Stackoverflow
Solution 14 - SymfonyLearn MoreView Answer on Stackoverflow
Solution 15 - SymfonyNicoView Answer on Stackoverflow
Solution 16 - SymfonyAli TorkiView Answer on Stackoverflow