Comments (4)
@opportunato babel is not the problem here – you are trying to require an image directly from node, which doesn't work because you must require a js modules (indeed node is trying to read the JPG as javascript).
In this case, just use the relative url:
this.images.push('/assets/images/fb.jpg');
To make express to serve the content in assets
, you need to configure it in server.js
:
import path from "path"
// snip...
const assetsDir = path.resolve(__dirname, "assets");
server.use("/assets", express.static(assetsDir, { maxAge: 365 * 24 * 60 * 60 } ));
Note that i've set a max-age
header, so browser will cache the image. If you need to skip the cache because you update the image, you could just do
this.images.push('/assets/images/fb.jpg?v=1.1');
from isomorphic500.
After including this code in server.js, I've started getting this error:
/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:446
throw new TypeError('Router.use() requires middleware function but got a
^
TypeError: Router.use() requires middleware function but got a Object
at Function.<anonymous> (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:446:13)
at Array.forEach (native)
at Function.use (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/router/index.js:444:13)
at EventEmitter.<anonymous> (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/application.js:216:21)
at Array.forEach (native)
at EventEmitter.use (/Users/opportunato/projects/grabr-web-client/node_modules/express/lib/application.js:213:7)
at Object.<anonymous> (/Users/opportunato/projects/grabr-web-client/src/server.js:28:8)
at Module._compile (module.js:460:26)
at normalLoader (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/api/register/node.js:150:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/opportunato/projects/grabr-web-client/node_modules/babel-core/lib/babel/api/register/node.js:163:7)
Also, shouldn't every asset you require go through the webpack pipeline? Isn't it the main idea behind every build system?
from isomorphic500.
Yeah sorry there was a misplaced parenthesis in the middleware, I've updated my comment :) anyway check the express documentation for serving static files.
As for the build thing, there's no need to build the server-side code: webpack here is used only to build the files that run on the client. In your case, your require
won't be parsed by webpack.
from isomorphic500.
Thank you very much, everything is clear now!
from isomorphic500.
Related Issues (20)
- Is it possible to set up an absolute path for import in css and js? HOT 6
- Error Cannot use [chunkhash] on "npm run dev" HOT 1
- Google Analytics route change handling mistake HOT 2
- Service set up with onSave reload HOT 1
- Troubles using <FormattedMessage... > HOT 3
- "Page not found" hardcoded in NotFoundPage HOT 4
- TypeError: Cannot read property 'map' of undefined HOT 5
- Can't run "17 error [email protected] dev: `NODE_ENV=development DEBUG=isomorphic500 nodemon index.js`" HOT 1
- webpack/write-stats.js HOT 3
- Routing help to new page on click HOT 3
- You may remove NoErrorsPlugin with React Hot Loader 1.3.0 HOT 1
- What is benefits of using fluxible? HOT 7
- importing imagesLoaded and other modules that required browser environment HOT 2
- react-intl server rendering and the markup generated on the server was not what the client was expecting
- SEO multi Language perspective HOT 4
- How to load specific locales like es-MX or en-GB HOT 2
- Locale Urls
- Running the development version using Node 4
- Npm install -- Throws be python error HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from isomorphic500.