Webpack loaders do not work when using `require`/`import` in nested components
See original GitHub issueI have a react app which uses react-router
and babel
. I use code splitting in my router.
Each route is assigned to some component which then includes other components and assets (.scss
, .png
).
When I include just components without any assets all works perfect.
When I include assets (e.g. logo.png
) directly on a code-split component (e.g. Home.js
) it works perfect, too.
However, the problem appears when I include assets in a component that is used by Home.js
, e.g. Navigation.js
includes logo.png
.
Is this a bug, or is it not supported?
Could you guide me where in the code loaders are applied to require
/import
? Perhaps I could do a fork.
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Allow extensions to add webpack loaders · Issue #4328 - GitHub
I'm currently working on an extension that includes webgl shaders (require(. ... it fails as the webpack build does not bundle these shaders....
Read more >Module Resolution - webpack
A resolver is a library which helps in locating a module by its absolute path. A module can be required as a dependency...
Read more >How to load a component inside a nested folder using webpack
There seems to be a problem ( dont know if its a bug in webpack ) when there is a match in import...
Read more >A Guide to Managing Webpack Dependencies - Toptal
The Webpack module bundler processes JavaScript code and all static assets ... Relative paths are not directly related to dependencies, but we use...
Read more >Building Static Sites without React - Using React (Part 3/3)
Webpack is so popular that it comes hand-in-hand with every web ... through the component tree by invoking React's render function and ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The problem was with webpack’s path
resolve
configuration. Before implementinguniversal-webpack
on our project I usedroot
but I needed to addalias
to make path resolution work forrequire
.I must have done adding
alias
wrong. After fixing it all works like a charm 😃 !I will do some more research and get back to you.