question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Analyzer not finding correct entry path with webpack-dev-server

See original GitHub issue

Hi. I tried to install css-blocks in our environment that has Flow-typed React 16 code running on Webpack 3 and Babel 6. We’re using webpack-dev-server for serving the app in dev. It seems the Analyzer plugin does not find the correct entry point but thinks the webpack-dev-server folder is the root folder (error below) ERROR in [css-blocks] JSXParseError: Cannot read JSX entry point file /Users/myname/Documents/myapp/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000: ENOENT: no such file or directory, open '/Users/myname/Documents/myapp/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000' (/Users/myname/Documents/myapp/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000)

Correct path would be: /Users/myname/Documents/myapp/client/main.js

I have this config in webpack config:

  const analyzerInstance = new CssBlocks.Analyzer('client/main.js', {
    baseDir: '/Users/myname/Documents/myapp',
    types: 'flow',
  });

but it doesn’t seem to have effect.

ps. Both our app and webpack-dev-server happen to use client folder as part of the path. So client/index.js is not mistyped path to our entry but the actual entry point of the dev server. (I was confused by this myself for a second)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
nickiaconiscommented, Mar 11, 2019

I’m encountering this too! Although perhaps this issue is misnamed: the analyzer receives the correct entry point, but it also receives two bogus paths from webpack-dev-server.

webpack-dev-server automatically injects two paths into the entry config: /ABSOLUTE/PATH/TO/YOUR/PROJECT/node_modules/webpack-dev-server/client/index.js?http://localhost:PORT_NUMBER and webpack/hot/dev-server. Since neither of these paths represent files that actually exist, an error is thrown when the JSX analyzer runs fs.readFile on them.

Edit: I’m using webpack@^3.12.0

0reactions
fforrescommented, Jul 7, 2018

I updated the code.

running yarn build works w/o issues running yarn dev throws:

(node:13154) UnhandledPromiseRejectionWarning: Error: [css-blocks] JSXParseError: Error parsing '/Users/felipetores/Github/fforres/css-blocks-webpack/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000' Cannot read property '0' of undefined

and

ERROR in [css-blocks] JSXParseError: Cannot read JSX entry point file /Users/felipetores/Github/fforres/css-blocks-webpack/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000: ENOENT: no such file or directory, open '/Users/felipetores/Github/fforres/css-blocks-webpack/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000' (/Users/felipetores/Github/fforres/css-blocks-webpack/node_modules/webpack-dev-server/client/index.js?http:/localhost:3000)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dev server breaks library entry type #4469 - GitHub
webpack-bundle-analyzer: 4.5.0 => 4.5.0 webpack-dev-server: 4.9.1 => 4.9.1. I've looked at: Module exports are not preserved when using dev-server with ...
Read more >
Error in Entry module not found and in webpack - Stack Overflow
Just a suggestion: have you tried resolving the problematic path before passing it to webpack? Something along the lines: ...
Read more >
How I solved and debugged my Webpack issue through trial ...
When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location.
Read more >
Entry and Context - webpack
The base directory, an absolute path, for resolving entry points and loaders from the configuration. ... A dynamically loaded module is not an...
Read more >
How to use the webpack-dev-server function in ... - Snyk
Use Snyk Code to scan source code in minutes - no build needed - and fix ... the Relay app const compiler =...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found