ERROR in Path must be a string. Received undefined

[naprirfan]

Hi,

I got this error in terminal when following the hello world tutorial (it's in page 32 of your ebook):

 ...
  [229] ./~/react/lib/ReactServerBatchingStrategy.js 673 bytes {0} [built]
  [230] ./~/react/lib/ReactServerRenderingTransaction.js 2.3 kB {0} [built]
  [231] ./~/react/lib/ReactIsomorphic.js 2.05 kB {0} [built]
  [232] ./~/react/lib/ReactDOMFactories.js 3.36 kB {0} [built]
  [233] ./~/react/lib/ReactElementValidator.js 10.8 kB {0} [built]
  [234] ./~/fbjs/lib/mapObject.js 1.47 kB {0} [built]
  [235] ./~/react/lib/onlyChild.js 1.21 kB {0} [built]
  [236] ./~/react/lib/deprecated.js 1.77 kB {0} [built]
  [237] ./~/react-dom/index.js 63 bytes {0} [built]
  [238] ./app/components/Game.jsx 231 bytes {0} [built]

ERROR in Path must be a string. Received undefined
webpack: bundle is now VALID.

and http://localhost:4000 gave me this error:

TypeError: Path must be a string. Received undefined

How can I fix this? Thanks

[pkosenko]

I think there's a second edition of this book and GIT repository. But I downloaded THIS one and had the same problem that you had.

So here are my fixes:

Webpack is apparently not generating the index.html file correctly.
I noticed that the webpack configuration file wasn't listing a template for the html-webpack-plugin, so I installed the html-webpack-template module to install the default template.

But that gave me an out of sync error between html-webpack-plugin and html-webpack-template.

So I UNINSTALLED BOTH html-webpack-template and html-webpack-plugin and reinstalled the latest of both.

$ npm uninstall html-webpack-plugin html-webpack-template --save-dev
$ npm install html-webpack-plugin html-webpack-template --save-dev

That seems to have solved the problem.

I think that you can just uninstall html-webpack-plugin ( it comes with [email protected]) and then install both, if you haven't already tried installing the template first.

$ npm uninstall html-webpack-plugin --save-dev
$ npm install html-webpack-plugin html-webpack-template --save-dev

The that isn't all that is wrong with the project. Keep reading.

---

I should also mention that I ALSO got the following error:

ERROR in ./app/components/CourseControl.jsx
Module not found: Error: Cannot resolve module 'jquery-ui/autocomplete' in c:\software\react\react-under-the-hood-first-edition\gitcopy\react-under-the-hood-first-editio
n\finished\app\components
@ ./app/components/CourseControl.jsx 3:0-33

I solved that by installing an alternative module.

 $ npm install jquery-autocomplete --save

Then edit the CourseControl.jsx fiile to reflect the new module rather than the old:

 require('jquery-autocomplete');

Don't ask me to explain why "jquery-ui/autocomplete" no longer works.

[pkosenko]

Spoke too soon. The "star search" input box and autocomplete in the application is not working, even though "jquery-autocomplete" now compiles into the application. I see that webpack is not injecting the script tag for Jquery.js into the generated index.html (webpack.config.js looks like it is trying to set that up). That might be an issue..

So there is still something left for me or someone else to fix.

But with the fixes I mention above, the application should display and mostly work.

[pkosenko]

webpack.config.js uses the following, which automatically includes JQuery in the bundle.js file without having to reference it in particular code files. So . . . there should be no need for injecting a JQuery script tag into index.html. JQuery already exists in the bundle.

plugins: [
. . . .
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],

But this still leaves us with the enigma of why the Jquery autocomplete plugin still isn't working. It is also included in the bundle.js. Versioning incompatibility?