0

Link to branch

I have to use the latest stable version of node, while trying to use Webpack 2.

node v.6.11 npm 3.10.10 webpack 2.6.1

I fixed the deprecated fallback and loader -> use errors, however now when I run npm run dev I get the following error:

enter image description here

My npm scripts

"scripts": {
  "dev": "webpack-dev-server",
  "production": "webpack -p",
  "test": "jest"
}

My webpack.config.babel.js

import fs from 'fs'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'

const coinhover = path.resolve(__dirname, "coinhover")
const src = path.resolve(__dirname, "public/src")

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/public/src/index.html',
  filename: 'index.html',
  inject: 'body'
})

const PATHS = {
  app: src,
  build: coinhover,
}

const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === 'production'

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
})

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"],
          publicPath: coinhover
        })
      }
    ],
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [ExtractTextPlugin, HtmlWebpackPluginConfig]
}

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [ExtractTextPlugin, HtmlWebpackPluginConfig, productionPlugin]
}

console.log('LAUNCH_COMMAND npm run', LAUNCH_COMMAND)

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
)

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/Users/leongaban/.nvm/versions/node/v6.11.0/bin/node',
1 verbose cli   '/Users/leongaban/.nvm/versions/node/v6.11.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: /Users/leongaban/.nvm/versions/node/v6.11.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/leongaban/projects/personal/CoinHover/coinhover.io/node_modules/.bin:/Users/leongaban/google-cloud-sdk/bin:/Users/leongaban/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/leongaban/projects/GoogleSDK:/Users/leongaban/projects/go/bin:/Users/leongaban/projects/GoogleSDK/bin
10 verbose lifecycle [email protected]~dev: CWD: /Users/leongaban/projects/personal/CoinHover/coinhover.io
11 silly lifecycle [email protected]~dev: Args: [ '-c', 'webpack-dev-server' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `webpack-dev-server`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/Users/leongaban/.nvm/versions/node/v6.11.0/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/Users/leongaban/.nvm/versions/node/v6.11.0/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:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/leongaban/projects/personal/CoinHover/coinhover.io
17 error Darwin 16.6.0
18 error argv "/Users/leongaban/.nvm/versions/node/v6.11.0/bin/node" "/Users/leongaban/.nvm/versions/node/v6.11.0/bin/npm" "run" "dev"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error [email protected] dev: `webpack-dev-server`
22 error Exit status 1
23 error Failed at the [email protected] dev script 'webpack-dev-server'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the coinhover package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs coinhover
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls coinhover
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

1 Answer 1

1

It looks like your problem is with your plugins. ExtractTextPlugin needs to be initialized, and takes either a filename or an object. On lines 65 and 70, you should have something like new ExtractTextPlugin('style.css').

For future reference, I realised that by adding a console.trace on the line above where webpack-dev-server was throwing that error.

Sign up to request clarification or add additional context in comments.

1 Comment

That was it! Thanks :)

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.