Search code examples
node.jsreactjsnpmnpm-package

npm start failed to compile only in a specific folder

I have installed node.js for learning. I have created my very first project in the following path "C:/Programming/React.js/test". Now, when I tried npm start it shows the following:

Failed to compile.

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.cache.cacheDirectory: The provided value "C:\\Programming\\React.js\\test\\node_modules\\.cache" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> Base directory for the cache (defaults to node_modules/.cache/webpack).
 - configuration.module.rules[1].oneOf[3].include: The provided value "C:\\Programming\\React.js\\test\\src" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
 - configuration.output.path: The provided value "C:\\Programming\\React.js\\test\\build" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The output directory as **absolute path** (required).

(Note that I have created a separate folder for all my projects)

I also have another project in this "C:/Users/MYUSERNAME/my-app" path. But when I try to run npm start in that folder, it works.

Here are my package\.json for both of my projects.

Project - test:

package.json

package.json - test

Project - my-app:

package.json

package.json - my-app

P.S. I'm new to react and stackoverflow. If something is missing in my question, please let me know and I'll update it.

Solution

  • The problem occurs when you have an exclamation mark somewhere in your folder path. Considering the error message you provided, you don't have any of them.

    You can try this:

    1. If you configured webpack manually, then check your webpack.config.js (or whatever you named your configuration file) on presence of exclamation marks. You can't use them when declaring a path (neither in folders nor in files names). You can also provide your webpack.config.js here, probably it will help to detect an error.

    2. If you created your app using create-react-app, try to go to /node_modules and delete .cache folder. If it doesn't help - maybe you should rename your folders or just create a new project. Probably something simply went wrong when this one was creating.