Cannot find module error when Hot module replacement is enabled

[volkanunsal]

I have been getting the following error lately when Hot module replacement is enabled:

ERROR in ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js
Module build failed: Error: Cannot find module '/Users/newuser/w/idnyc/site/node_modules/react-hot-loader/index.js!/Users/newuser/w/idnyc/site/node_modules/jsx-loader/index.js?harmony!/Users/newuser/w/idnyc/site/bootstrap-sass.config.js'

[volkanunsal]

Sorry, this is an issue with React Hot Loader library.

[justin808]

@volkanunsal There's no problem with the hot-reloader. See

https://github.com/justin808/react-webpack-rails-tutorial

[volkanunsal]

It looks like the test condition for jsx-loader was matching bootstrap-sass.config.js file, and that was the reason for the error above. I simply excluded that one file from jsx-loader and everything magically worked. :smile:

[justin808]

I just made some updates to this project (0.0.10 on npm) as well as I just pushed changes to the sample: https://github.com/justin808/bootstrap-sass-loader-example/pull/2

If you can try those out and give me some feedback on the README's etc., I'd really appreciate it!

[mmahalwy]

@volkanunsal can you show example?

[justin808]

@mmahalwy The latest version has a number of updates. You can use the file for customization or you can use the defaults which load everything, but that doesn't allow using the bootstrap variables for your own Sass files.

[mmahalwy]

I keep getting this awful error:

ERROR in ./~/bootstrap-sass-loader/index.loader.js!./bootstrap-sass.config.js
Module build failed: Error: Cannot find module '/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/react-hot-loader/index.js!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/jsx-loader/index.js?harmony!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/babel-loader/index.js?optional=runtime!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/jsxhint-loader/index.js!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/bootstrap-sass.config.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.module.exports.pitch (/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/bootstrap-sass-loader/index.loader.js:15:16)
 @ multi main

And as in the example:

entry: [
      'webpack/hot/only-dev-server',
      './src/scripts/app.js',
      'bootstrap-sass!./bootstrap-sass.config.js',
  ],

[justin808]

@mmahalwy Please make sure you have the latest version. And did you create a file: ./bootstrap-sass.config.js?

[mmahalwy]

I do have the latest versions

And I did already create that file too

[justin808]

Please compare your project to this one: https://github.com/justin808/bootstrap-sass-loader-example.

The next step would be to put some print statements in the source code for the loader. It's a very tiny bit of code. I'm almost certain that your path is not lining up.

[mmahalwy]

Yeah, not sure why index.loader.js tries to require the config file as this:

 modules/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/react-hot-loader/index.js!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/jsx-loader/index.js?harmony!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/babel-loader/index.js?optional=runtime!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/node_modules/jsxhint-loader/index.js!/Users/mmahalwy/Desktop/Code/quran.com/beta.quran.com-reactjs/bootstrap-sass.config.js

[justin808]

@mmahalwy The location of the config file is a webpack thing. The loader gets file and takes the information in it. So If the config file is not found, there's probably an issue with your webpack config.

[paul-sachs]

I am also encountering this issue. And I encountered it with both sass and vanilla versions of bootstrap-loader. It always complains like this: Module build failed:

Error: Cannot find module '/Users/paulsachs/Dev/Projects/isomorphic500/node_modules/bootstrap-webpack/index.loader.js!/Users/paulsachs/Dev/Projects/isomorphic500/node_modules/react-hot-loader/index.js!/Users/paulsachs/Dev/Projects/isomorphic500/node_modules/babel-loader/index.js?cacheDirectory!/Users/paulsachs/Dev/Projects/isomorphic500/bootstrap.config.js

I know the config is there because if I remove it, it provides a different error that makes sense.

[justin808]

@psachs21 are you sure all the paths listed above are valid?

[paul-sachs]

Yes, all those paths are valid files in my project, all the files contain what I expect them to contain. It all works until I add the bootstrap entry point.

"bootstrap-webpack!./bootstrap.config.js"

[justin808]

There's 2 ways to configure -- with and wtihout a configuration file. Does this work without a configuration file?

[paul-sachs]

Hmm, different error when it's not the configuration file:

Module not found: Error: Cannot resolve module 'imports'.....

That's strange, it looks like a bunch of modules weren't installed. I'll need to correct that before confirming the problem.

[paul-sachs]

Now it's just this:

./~/bootstrap/fonts/glyphicons-halflings-regular.woff2 Module parse failed: /Users/paulsachs/Dev/Projects/isomorphic500/node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2 Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./~/bootstrap-webpack/~/css-loader!./~/bootstrap-webpack/~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 2:54039-54100

[justin808]

you're getting closer

[paul-sachs]

Works now. The problem was this RegExp to match fonts and other images: test: /.woff(\?v=\d+.\d+.\d+)?$/ If I'm not mistaken, this will not match .woff2. Is this regexp correct? I am not familiar with javascript regexp syntax.

[rclai]

Don't know if this is related, but I'm getting this error:

ERROR in ../~/bootstrap-sass-loader/bootstrap-sass-scripts.loader.js!./bootstrap-sass.config.js
Module not found: Error: Cannot resolve module 'imports' in /root/vuexx/webpack
 @ ../~/bootstrap-sass-loader/bootstrap-sass-scripts.loader.js!./bootstrap-sass.config.js 1:0-90

[justin808]

@rclai I think there is something wrong with your configuration in terms of paths. Paths should be relative.

[rclai]

I put this in my webpack config:

module.exports = {
  entry: [
    "bootstrap-sass!./bootstrap-sass.config.js"
  ]

And the intention for this is that my bootstrap-sass.config.js is in the same folder as my webpack config file, which is why I put ./bootstrap-sass.config.js after the !. Is this right? The path is relative to where the webpack config is right?

This is what my folder structure looks like:

- parentAppFolder
  - appFolder (where the app actually is)
  - webpackFolder (where my webpack config is + the bootstrap-sass config)
  - node_modules (I `cd` into the `parentAppFolder` to do `npm install`s

Also, my bootstrap-sass.config.js looks (partially) like this:

module.exports = {
  preBootstrapCustomizations: '../appFolder/styles/_pre-bootstrap-customizations.scss',
  bootstrapCustomizations: '../appFolder/styles/_bootstrap-customizations.scss',
  mainSass: '../appFolder/styles/_main.scss',

Am I not doing the folder structure right?

[justin808]

I'm not sure you can refer to files at a higher level. I used sym links to get around this. Please take a look at how this is used here: https://github.com/shakacode/react-webpack-rails-tutorial/.

Also, you can edit the source (very simple) and put in some tracing on the path variables. If we need to to change the source for your example, please let me know. Thanks.