Example : ReferenceError: ExtractTextPlugin is not defined

[theophanemayaud]

I have cloned the repo onto my mac, cd into the example, ran npm install (fires some warnings about peer dependencies not installed), firebase --add but then when trying to build I get this :

$ npm run build

> @ build /Users/dev/DEVInternet/firebaseui-web-react/example
> npm run createfirebaseconf; NODE_ENV=production webpack -p;


> @ createfirebaseconf /Users/dev/DEVInternet/firebaseui-web-react/example
> firebase setup:web --json > ./src/firebase-config.json

/Users/dev/DEVInternet/firebaseui-web-react/example/webpack.config.js:37
  plugins: [new ExtractTextPlugin('./bundle.css')],
                ^

ReferenceError: ExtractTextPlugin is not defined
    at Object.<anonymous> (/Users/dev/DEVInternet/firebaseui-web-react/example/webpack.config.js:37:17)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at requireConfig (/Users/dev/DEVInternet/firebaseui-web-react/example/node_modules/webpack/bin/convert-argv.js:97:18)
    at /Users/dev/DEVInternet/firebaseui-web-react/example/node_modules/webpack/bin/convert-argv.js:104:17
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `npm run createfirebaseconf; NODE_ENV=production webpack -p;`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2018-02-06T08_58_52_818Z-debug.log

I tried to add : var ExtractTextPlugin = require('extract-text-webpack-plugin');
In webpack.config.js, but then got some more errors after building :

$ npm run build

> @ build /Users/dev/DEVInternet/firebaseui-web-react/example
> npm run createfirebaseconf; NODE_ENV=production webpack -p;


> @ createfirebaseconf /Users/dev/DEVInternet/firebaseui-web-react/example
> firebase setup:web --json > ./src/firebase-config.json

Packing for production
Hash: 214e9b6af19f8cf21a35
Version: webpack 3.10.0
Time: 1710ms
        Asset       Size  Chunks             Chunk Names
    bundle.js  768 bytes       0  [emitted]  main
bundle.js.map    6.03 kB       0  [emitted]  main
chunk    {0} bundle.js, bundle.js.map (main) 255 bytes [entry] [rendered]
    [0] ./src/App.jsx 255 bytes {0} [built] [failed] [2 errors]
   [0] ./src/App.jsx 255 bytes {0} [built] [failed] [2 errors]

ERROR in ./src/App.jsx

/Users/dev/DEVInternet/firebaseui-web-react/example/src/App.jsx
  20:8   error  There should be no space after '{'             object-curly-spacing
  20:23  error  There should be no space before '}'            object-curly-spacing
  33:50  error  Block must not be padded by blank lines        padded-blocks
  39:53  error  Missing trailing comma                         comma-dangle
  43:9   error  Unexpected 'this'                              no-invalid-this
  45:8   error  Missing trailing comma                         comma-dangle
  46:6   error  Missing trailing comma                         comma-dangle
  50:20  error  Missing trailing comma                         comma-dangle
  59:1   error  Line 59 exceeds the maximum line length of 80  max-len
  63:1   error  Line 63 exceeds the maximum line length of 80  max-len
  72:6   error  Missing semicolon                              semi

✖ 11 problems (11 errors, 0 warnings)
  8 errors, 0 warnings potentially fixable with the `--fix` option.


ERROR in ./src/App.jsx
Module parse failed: Unexpected token (35:11)
You may need an appropriate loader to handle this file type.
| export default class App extends React.Component {
| 
|   uiConfig = {
|     signInFlow: 'popup',
|     signInOptions: [
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ build: `npm run createfirebaseconf; NODE_ENV=production webpack -p;`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dev/.npm/_logs/2018-02-06T08_53_47_725Z-debug.log

Could someone please help me ? :) And if needs be let's fix the example !

[ed-ilyin]

exactly same for me

[nicolasgarnier]

Just fixed the example app. It should build fine now :)

[jtan4nih]

But I got "missing script: createfirebaseconf;". Is it related issue? Full error as the following:

C:\Users\jimtan\firebaseui-web-react\example>npm run build
npm WARN lifecycle The node binary used for scripts is C:\Nodist\bin\node.exe but npm is using C:\Nodist\v-x64\8.9.4\node.exe itself. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.

@ build C:\Users\jimtan\firebaseui-web-react\example
npm run createfirebaseconf; NODE_ENV=production webpack -p;

npm ERR! Windows_NT 10.0.17134
npm ERR! argv "C:\Nodist\v-x64\8.9.4\node.exe" "C:\Nodist\npmv\4.0.5\bin\npm-cli.js" "run" "createfirebaseconf;" "NODE_ENV=production" "webpack" "-p;"
npm ERR! node v8.9.4
npm ERR! npm v4.0.5

npm ERR! missing script: createfirebaseconf;
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\jimtan\firebaseui-web-react\example\npm-debug.log

npm ERR! Windows_NT 10.0.17134
npm ERR! argv "C:\Nodist\v-x64\8.9.4\node.exe" "C:\Nodist\npmv\4.0.5\bin\npm-cli.js" "run" "build"
npm ERR! node v8.9.4
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! @ build: npm run createfirebaseconf; NODE_ENV=production webpack -p;
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script 'npm run createfirebaseconf; NODE_ENV=production webpack -p;'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run createfirebaseconf; NODE_ENV=production webpack -p;
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\jimtan\firebaseui-web-react\example\npm-debug.log

C:\Users\jimtan\firebaseui-web-react\example>
C:\Users\jimtan\firebaseui-web-react\example>