Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating from 0.2.3 to 0.4.0 Html Webpack Plugin - ReferenceError: window is not defined #564

Closed
FranciscoGileno opened this issue Sep 3, 2016 · 5 comments

Comments

@FranciscoGileno
Copy link

I tried to update to 0.4.0 following the changelog, and got this after "npm start"

Have I done something wrong?

OBS: I am using Windows 10 and Git Bash as my Terminal.


Html Webpack Plugin:
ReferenceError: window is not defined

  • addStyles.js?:14 eval
    C:\Projects\cantina-self-service\control-panel//react-scripts//style-loader/addStyles.js?:14:30
  • addStyles.js?:9 eval
    C:\Projects\cantina-self-service\control-panel//react-scripts//style-loader/addStyles.js?:9:47
  • addStyles.js?:31 module.exports
    C:\Projects\cantina-self-service\control-panel//react-scripts//style-loader/addStyles.js?:31:68
  • material.css?:7 eval
    C:\Projects\cantina-self-service\control-panel/~/react-mdl/extra/material.css?:7:93
  • index.html:561 Object.
    C:/Projects/cantina-self-service/control-panel/index.html:561:2
  • index.html:519 webpack_require
    C:/Projects/cantina-self-service/control-panel/index.html:519:30
  • index.html:50 fn
    C:/Projects/cantina-self-service/control-panel/index.html:50:20
  • loader.js:1 eval
    C:\Projects\cantina-self-service\control-panel/index.html?.//react-scripts//html-webpack-plugin/lib/loader.j s:1:367
  • index.html:552 Object.
    C:/Projects/cantina-self-service/control-panel/index.html:552:2
  • index.html:519 webpack_require
    C:/Projects/cantina-self-service/control-panel/index.html:519:30
  • From previous event:
  • index.js:108 Compiler.
    [control-panel]/[react-scripts]/[html-webpack-plugin]/index.js:108:8
  • Tapable.js:71 Compiler.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:71:13
  • Compiler.js:226 Compiler.emitAssets
    [control-panel]/[react-scripts]/[webpack]/lib/Compiler.js:226:7
  • Compiler.js:54 Watching.
    [control-panel]/[react-scripts]/[webpack]/lib/Compiler.js:54:18
  • Compiler.js:403
    [control-panel]/[react-scripts]/[webpack]/lib/Compiler.js:403:12
  • Tapable.js:67 Compiler.next
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:67:11
  • CachePlugin.js:40 Compiler.
    [control-panel]/[react-scripts]/[webpack]/lib/CachePlugin.js:40:4
  • Tapable.js:71 Compiler.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:71:13
  • Compiler.js:400 Compiler.
    [control-panel]/[react-scripts]/[webpack]/lib/Compiler.js:400:9
  • Compilation.js:577 Compilation.
    [control-panel]/[react-scripts]/[webpack]/lib/Compilation.js:577:13
  • Tapable.js:60 Compilation.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:60:69
  • Compilation.js:572 Compilation.
    [control-panel]/[react-scripts]/[webpack]/lib/Compilation.js:572:10
  • Tapable.js:60 Compilation.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:60:69
  • Compilation.js:567 Compilation.
    [control-panel]/[react-scripts]/[webpack]/lib/Compilation.js:567:9
  • Tapable.js:60 Compilation.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:60:69
  • Compilation.js:563 Compilation.
    [control-panel]/[react-scripts]/[webpack]/lib/Compilation.js:563:8
  • Tapable.js:60 Compilation.applyPluginsAsync
    [control-panel]/[react-scripts]/[tapable]/lib/Tapable.js:60:69
  • Compilation.js:525 Compilation.seal
    [control-panel]/[react-scripts]/[webpack]/lib/Compilation.js:525:7
  • Compiler.js:397 Compiler.
    [control-panel]/[react-scripts]/[webpack]/lib/Compiler.js:397:15
@gaearon
Copy link
Contributor

gaearon commented Sep 3, 2016

Can you show what your index.html looks like?

@FranciscoGileno
Copy link
Author

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cantina Self Service - Control Panel</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="node_modules/react-mdl/extra/material.css">
    <script src="node_modules/react-mdl/extra/material.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Aaah.. probably is the script / stylesheet pointing to node_modules right?

@gaearon
Copy link
Contributor

gaearon commented Sep 3, 2016

Yea, this was not really supported.
Does

import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';

in src/index.js instead work for you?

@FranciscoGileno
Copy link
Author

It worked! Thanks.

@gaearon
Copy link
Contributor

gaearon commented Sep 3, 2016

Sent a PR to react-mdl to document this: tleunen/react-mdl#388.
Also documented here: 6da2955.

stayradiated pushed a commit to stayradiated/create-react-app that referenced this issue Sep 7, 2016
feiqitian pushed a commit to feiqitian/create-react-app that referenced this issue Oct 25, 2016
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants