search

creativetimofficial / ct-paper-dashboard-pro-react

17 stars 6 forks source link

Cannot build with Webpack + Babel #2

Closed donfmorrison closed 5 years ago

donfmorrison commented 5 years ago

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

I followed your YouTube tutorial series https://www.youtube.com/watch?v=5Vt08L5EgHc to use webpack and babel; but, instead of using the src files from material-dashboard-pro-react I used source from paper-dashboard-pro-react.

Expect webpack should build without errors.

Current Behavior

webpack fails to build, errors indicate issues with nucleo-icons - see log below

Failure Information (for bugs)

Probably a config error on my part...

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. clone https://github.com/creativetimofficial/react-webpack-babel-md-tutorial.git
  2. use Part 3 as starting point
  3. replace src directory of Part 3 with src directory from ct-paper-dashboard-pro-react

  4. modify contents of index.html

    <!DOCTYPE html>
<html lang="en" class="perfect-scrollbar-off">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<!--     Fonts and Icons     -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">

<title>Paper Dashboard React</title>
</head>
<body>
<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>
</html>
  5. update dependencies in package.json to those required by paper-dashboard-pro-react 
    "devDependencies": {
"@babel/core": "7.1.6",
"@babel/node": "7.0.0",
"@babel/plugin-proposal-class-properties": "7.1.0",
"@babel/preset-env": "7.1.6",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.4",
"css-loader": "1.0.1",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"node-sass": "4.10.0",
"path": "0.12.7",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"webpack": "4.26.1",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.1.10"
},
"dependencies": {
"react": "16.6.3",
"react-dom": "16.6.3",
"@types/googlemaps": "3.30.16",
"@types/markerclustererplus": "2.1.33",
"@types/react": "16.7.1",
"ajv": "6.5.5",
"bootstrap": "4.1.3",
"chart.js": "2.7.3",
"classnames": "2.2.6",
"history": "4.7.2",
"jquery": "3.3.1",
"moment": "2.22.2",
"nouislider": "12.1.0",
"perfect-scrollbar": "1.4.0",
"prop-types": "15.6.2",
"react-big-calendar": "0.20.2",
"react-bootstrap-sweetalert": "4.4.1",
"react-bootstrap-switch": "15.5.3",
"react-bootstrap-wizard": "0.0.5",
"react-chartjs-2": "2.7.4",
"react-datetime": "2.16.2",
"react-google-maps": "9.4.5",
"react-jvectormap": "0.0.4",
"react-notification-alert": "0.0.8",
"react-router-dom": "4.3.1",
"react-select": "2.1.1",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"reactstrap": "6.5.0"
}
  6. execute command npm run webpack

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Failure Logs

Please include any relevant log snippets or files here.

> babel-node ./node_modules/webpack/bin/webpack

Hash: 3f1ec23dc6170320fa85
Version: webpack 4.26.1
Time: 6550ms
Built at: 2018-11-26 22:37:07
                               Asset       Size  Chunks             Chunk Names
04f0390102a515ab4bb092d34f01eed8.jpg    262 KiB          [emitted]
2051e0e847124c536df9c01a3f672032.jpg   49.6 KiB          [emitted]
366f794ab7bc18b1b7acffa361d9f700.png   3.22 KiB          [emitted]
5730493f536fca3afdfb64833a4bd7ed.png   3.51 KiB          [emitted]
5b98f6f3041409dd54d4684ef14a9876.png   3.23 KiB          [emitted]
5c449284c8bffd8a1a7b5cea411206cb.png   3.04 KiB          [emitted]
76ff47ae5c64ccda5af18326bb272058.jpg   67.9 KiB          [emitted]
7907591946eee451e53d97d92cc238c9.png   67.2 KiB          [emitted]
80954654631af8ffb5ef4453a9caa3ec.jpg    198 KiB          [emitted]
8d7e0c569f553eeb5dcbc98a5811a811.png   3.46 KiB          [emitted]
8d8721fccbbf6354d182a43bb1270067.jpg   9.51 KiB          [emitted]
8e04f24a8013fe52d0851ce14713ab2a.png    326 KiB          [emitted]
8f9581dbf863fcb3494a8bbe0f89d6eb.jpg    201 KiB          [emitted]
a6f24e7dd5470a8bd2f48ebb53dbe8d5.jpg    258 KiB          [emitted]
a9615bac158705203261e8348f574cc8.png    2.8 KiB          [emitted]
aab414f7b69d0d4ad897e75e735f240a.jpg   74.9 KiB          [emitted]
af300b6e21dff8e136aa4f4acdb8dd11.jpg    334 KiB          [emitted]
bb4b9ac9fd07e48f86c719495b65341c.jpg   79.1 KiB          [emitted]
bfc688ca490f0079051aea5b8ec75cbe.jpg   75.4 KiB          [emitted]
c411a67eb76ab9a7ad26ca5d19b61392.png    319 KiB          [emitted]
e06d84cb846db2a463ac3d904ac0c362.jpg   65.4 KiB          [emitted]
ebe9884b2152a08a525fcd5054019532.jpg   43.5 KiB          [emitted]
f26c34bb88eb83d5aae99c7dbf3ddd48.jpg    311 KiB          [emitted]
f410303b095b7faecea2088dff0746ff.png   3.41 KiB          [emitted]
f771455e07d39b0841a3f0d4a2143c5d.jpg   17.1 KiB          [emitted]
                     index.bundle.js   6.13 MiB    main  [emitted]  main
                          index.html  758 bytes          [emitted]
Entrypoint main = index.bundle.js
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./src/assets/demo/demo.css] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/demo/demo.css 2.92 KiB {main} [built]
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss 342 KiB {main} [built]
[./src/assets/demo/demo.css] 1.21 KiB {main} [built]
[./src/assets/fonts/nucleo-icons.eot] 177 bytes {main} [built] [failed] [1 error]
[./src/assets/fonts/nucleo-icons.ttf] 182 bytes {main} [built] [failed] [1 error]
[./src/assets/fonts/nucleo-icons.woff] 182 bytes {main} [built] [failed] [1 error]
[./src/assets/fonts/nucleo-icons.woff2] 182 bytes {main} [built] [failed] [1 error]
[./src/assets/img/faces/ayo-ogunseinde-2.jpg] 82 bytes {main} [built]
[./src/assets/img/react-logo.png] 82 bytes {main} [built]
[./src/assets/scss/paper-dashboard.scss] 1.24 KiB {main} [built]
[./src/index.js] 912 bytes {main} [built]
[./src/layouts/Admin/Admin.jsx] 6.8 KiB {main} [built]
[./src/layouts/Auth/Auth.jsx] 4.54 KiB {main} [built]
[./src/routes.js] 4.96 KiB {main} [built]
[./src/views/Calendar.jsx] 5.86 KiB {main} [built]
    + 867 hidden modules

ERROR in ./src/assets/fonts/nucleo-icons.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/assets/scss/paper-dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss) 7:106728-106764
 @ ./src/assets/scss/paper-dashboard.scss
 @ ./src/index.js

ERROR in ./src/assets/fonts/nucleo-icons.woff2 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/assets/scss/paper-dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss) 7:106572-106610
 @ ./src/assets/scss/paper-dashboard.scss
 @ ./src/index.js

ERROR in ./src/assets/fonts/nucleo-icons.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/assets/scss/paper-dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss) 7:106651-106688
 @ ./src/assets/scss/paper-dashboard.scss
 @ ./src/index.js

ERROR in ./src/assets/fonts/nucleo-icons.eot 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/assets/scss/paper-dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/scss/paper-dashboard.scss) 7:106416-106452 7:106483-106519
 @ ./src/assets/scss/paper-dashboard.scss
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 910 bytes {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
        + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mypaperdashboard@0.1.0 webpack: `babel-node ./node_modules/webpack/bin/webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mypaperdashboard@0.1.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
einazare commented 5 years ago

Hello there @donfmorrison ,

Thank you for your interest in working with our products and for telling us about this issue. Right now I am not at my desk, and I can't test for myself, but I believe I think I've found what the issue is. Could you please change the webpack.config.js to this:

import path from "path";

import HtmlWebpackPlugin from "html-webpack-plugin";

module.exports = {
  entry: path.join(__dirname,'src','index.js'),
  output: {
    path: path.join(__dirname,'build'),
    filename: 'index.bundle.js'
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: {
    modules: [path.resolve(__dirname,'src'),'node_modules'],
    extensions: [ '.js', '.jsx' ]
  },
  devServer: {
    contentBase: path.join(__dirname,'src')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'src','index.html')
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        // i've added here the fonts extensions
        // from your warnings, it may seem so that this will fix the problem
        test: /\.(jpg|jpeg|png|gif|mp3|svg|ttf|woff2|woff|eot)$/,
        loaders: ["file-loader"]
      }
    ]
  }
};

Could you let me know if that worked? I think tomorrow I'll be able to get my hands on a PC and make some tests.

Best, Manu

donfmorrison commented 5 years ago

Yep! That did it. Working good now.

Thank you, @EINazare