CODEWITHSUNDEEP
javascriptreactjsnpmwebpackzurb-foundation
Varun Pozhath
Varun Pozhath

Reputation: 626

Cannot find module "script!foundation-sites/dist/foundation.min.js on Heroic

These are the contents of webpack.config.js file

var webpack = require('webpack');
var path = require('path');

process.env.NODE_ENV = process.env.NODE_ENV || 'development';
module.exports =  {
  entry: [
  'script!jquery/dist/jquery.min.js',
  'script!foundation-sites/dist/foundation.min.js',
  './app/app.jsx'
  ],
  externals:{
    jquery: 'jQuery'
  },
  plugins:[
  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery'
  }),
  new webpack.optimize.UglifyJsPlugin({
    compressor: {
      warnings: false
    }
  })
  ],

  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve:{
    root: __dirname,
    modulesDirectories: [
    'node_modules',
    './app/components',
    './app/api'
    ],
    alias: {
        app: 'app',
        applicationStyles:'app/styles/app.scss',
        actions:'app/actions/actions.jsx',
        reducers:'app/reducers/reducers.jsx',
        configureStore:'app/store/configureStore.jsx'

      },
    extensions: ['','.js',['.jsx']]
  },
  module:{
    loaders: [
    {
      loader: 'babel-loader',
      query: {
        presets: ['react','es2015','stage-0']
      },
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/
    }
      ]
  },
  sassLoader:{
    includePaths:[
    path.resolve(__dirname,'./node_modules/foundation-sites/scss')
    ]
  },
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'inline-source-map'
};

and these are the contents of package.json file

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "Simple react app",
  "main": "index.js",
  "scripts": {
    "test": "NODE_ENV=test karma start",
    "build":"webpack",
    "start": "npm run build && node server.js"
  },
  "author": "varun",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.15.3",
    "express": "^4.14.0",
    "firebase": "^3.0.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.16.0",
    "css-loader": "^0.23.1",
    "deep-freeze-strict": "^1.1.1",
    "expect": "^1.14.0",
    "foundation-sites": "^6.2.0",
    "jquery": "^2.2.1",
    "moment": "^2.12.0",
    "node-sass": "^3.13.0",
    "node-uuid": "^1.4.7",
    "react-addons-test-utils": "^0.14.7",
    "react-redux": "^4.4.1",
    "redux": "^3.3.1",
    "redux-mock-store": "^1.0.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.2",
    "script-loader": "^0.6.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.13"
  },
  "devDependencies": {

    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.2",
    "karma-mocha": "^0.2.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.4.5"

  }
}

When I deploy this app to heroku and open the app using the command 'heroku open', I get the following error

Error: Cannot find module "script!foundation-sites/dist/foundation.min.js"

Would be great if anyone could point out what is wrong here. Cant seem to get around this one. PS. The app works perfectly when I run it locally

Upvotes: 2

Views: 1835

Answers (2)

Paul Hiers
Paul Hiers

Reputation: 61

I'm not a Webpack expert by any means, but I was having the same problem using a boilerplate I'd set up a while back. After an hour of frustration, I realized that the structure of the foundation-sites directory in node_modules has changed, and the file foundation_min.js has been moved into a js directory inside of dist.

Long story short, I replaced 'script!foundation-sites/dist/foundation.min.js' with ''script!foundation-sites/dist/**js**/foundation.min.js' and everything is working fine now. I'm also using version 6.2.0 of foundation-sites, so this is probably your problem.

Upvotes: 6

Dhaval Shekhada
Dhaval Shekhada

Reputation: 71

In webpack.config.js file, you need to change the path as following .

module.exports =  {
     entry: ['script!jquery/dist/jquery.min.js',
     'script!foundation-sites/dist/js/foundation.min.js',
     './app/app.jsx'
        ]
 }

same path you can assign for app.jsx for CSS 

require('style!css!foundation-sites/dist/css/foundation.min.css');

Upvotes: 4

Related Questions