0

I'm following this tutorial on building a React app on top of WordPress, and I'm having trouble starting it.

I modified package.json file a bit and webpack.config.js` and I am getting the following error in my terminal

➜  wp-api git:(development) ✗ npm start

> [email protected] start /Users/myuser/Projects/wp-api
> webpack-dev-server --open

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
 - configuration.resolve.extensions[0] should not be empty.

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --open'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the wp-api package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --open
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs wp-api
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls wp-api
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/myuser/.npm/_logs/2017-05-15T07_40_36_249Z-debug.log

The log file is

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.10.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/myuser/Projects/wp-api/node_modules/.bin:/Users/myuser/.rbenv/shims:/Users/myuser/.rbenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
10 verbose lifecycle [email protected]~start: CWD: /Users/myuser/Projects/wp-api
11 silly lifecycle [email protected]~start: Args: [ '-c', 'webpack-dev-server --open' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `webpack-dev-server --open`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/myuser/Projects/wp-api
17 error Darwin 16.5.0
18 error argv "/usr/local/Cellar/node/7.10.0/bin/node" "/usr/local/bin/npm" "start"
19 error node v7.10.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] start: `webpack-dev-server --open`
23 error Exit status 1
24 error Failed at the [email protected] start script 'webpack-dev-server --open'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the wp-api package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     webpack-dev-server --open
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs wp-api
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls wp-api
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

The package.json and webpack.config.js are:

{
  "name": "wp-api",
  "version": "1.0.0",
  "description": "React based WordPress app",
  "main": "index.js",
  "dependencies": {
    "alt": "^0.18.6",
    "axios": "^0.15.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.2",
    "prop-types": "^15.5.8",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.1",
    "sass-loader": "^6.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "firebase-tools": "^3.6.1",
    "html-webpack-plugin": "^2.28.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  },
  "author": "dingo-d",
  "license": "GPL"
}

and

var webpack = require('webpack');
var path    = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const outputCss = 'styles/[name].css';

var config = {
  devtool: 'inline-source-map', // This will show line numbers where errors are accured in the terminal
  devServer: {
    historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
  },
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:8080/', // Specify the local server port
    'webpack/hot/only-dev-server', // Enable hot reloading
    './src/index' // This is where Webpack will be looking for the entry index.js file
  ],
  output: {
    path: path.join(__dirname, 'public'), // This is used to specify folder for producion bundle. Will not be used here, but it's a good practice to have it
    filename: 'bundle.js' // Filename for production bundle
    // publicPath: '/'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
    extensions: ['', '.js'] // Extensions that Webpack is going to expect
  },
  module: {
    // Loaders allow you to preprocess files as you require() or “load” them. Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps.
    loaders: [
      {
      test: /\.jsx?$/, // Here we're going to use JS for react components but including JSX in case this extension is prefered
      exclude: /node_modules/, // Speaks for itself
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] // Modules that help with hot reloading and ES6 transcription
      }
    ],
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoErrorsPlugin(), // Webpack will let you know if there are any errors
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ]
}

module.exports = config;

I haven't done much projects with webpack, so my knowledge in this aspect is very limited.

What am I doing wrong? I tried deleting the node_modules folder and running npm install again, but that didn't work.

Improve this question

1 Answer 1

Reset to default
1

Solution to the 1st problem:

npm uninstall webpack --save-dev
npm install [email protected] --save-dev

Solution to the

configuration.resolve.extensions[0] should not be empty. :

Remove '' from the array

resolve: {
modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
extensions: ['.js'] // Extensions that Webpack is going to expect
},

Or replace it with '*'

resolve: {
modulesDirectories: ['node_modules', 'src'], // Folders where Webpack is going to look for files to bundle together
extensions: ['*','.js'] // Extensions that Webpack is going to expect
},
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

Strange - does it complain about configuration.resolve.extensions[0] should not be empty. ?
I don't see a complain about that, but configuration.resolve has an unknown property 'modulesDirectories'
Does webpack-dev-server has to be globally installed?
in your case - not. Since you run npm run start
good decision. For any forthcoming errors - check the packages compatibility first
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.