I have a project with webpack which uses svg. Certain inline svg files are translated correctly but those from font-awesome are not.
I import font awesome with:
import 'font-awesome-webpack';
On the webpack side I have:
{
test: /\.svg$/,
loaders: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
jsx: true,
},
},
],
}],
This works fine but displays a square instead of font-awesome icons. Now following other fixes I should add a loader config for other non-inline SVGs, such as:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
As soon as I add the above lines and attempt to launch my project the following error is displayed:
Uncaught (in promise) Error: Invalid tag:/f01bf49c263128347d1c47cdc55eff66.svg
The issue comes clearly from the way I load Svgs following my wbepack config, but regardless of the different ways I import my svgs, the same error continues to break my project.
Is it possible that the two webpack config create a conflict?
What am I doing wrong with my webpack config?
FYI solution is:
webpack config file:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
}, {
test: /\.(ttf|otf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'fonts',
publicPath: 'fonts',
},
}],
},
Related
I see on almost every production website made in React (or in almost every other framework), that there are splitted css and js bundles inserted into HTML website.
I am using Webpack 4 with this configuration:
module.exports = {
entry: "./src/client/index.js",
output: {
path: outputPath,
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:8080'
}
},
plugins: [
new CleanWebpackPlugin([outputPath]),
new HtmlWebPackPlugin({
template: "./public/index.html"
})
]
};
But when I build my frontend and serve it by Express, my CSS styles are inlined by <style></style> and also included in main.js file.
How to split CSS,JS and other assets from each other (bundle.css, bundle.js, img/image1.png, etc) instead of inlining CSS and converting images into base64 format?
To create a new file for css, remove style-loader and add https://github.com/webpack-contrib/mini-css-extract-plugin
To do the same with files, remove url-loader and replace it with file-loader
I am trying to build a react application using React Semantic.
I am using webpack-dev-server, webpack-hot-middleware and webpack-dev-middleware to automating the tasks.
I installed react semantic ui through npm.
npm install --save semantic-ui-css semantic-ui-react
however, webpack seems to not loading ./node_modules/semantic-ui-css/themes/assets/fonts/ icons and it is not accessabile for the html page.
there is no errors in console, it just does not show the icon.
If I do not import semantic-ui-css in react app and includ in with CDN, it works fine.
App.js
import React from 'react';
import 'semantic-ui-css/semantic.min.css';
import { Container, Icon } from 'semantic-ui-react';
class App extends React.Component{
render(){
return (
<Container fluid>
<h1 id='test'>ReactJs</h1>
<hr/>
<Icon name='search' />
</Container>
)
}
}
export default App;
webpack.config.dev.js
import path from 'path';
import webpack from 'webpack';
export default {
devtool: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, '/client/index.js')
],
output:{
path: '/',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin,
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module:{
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'client'),
loaders: ['react-hot-loader', 'babel-loader']
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader','sass-loader'],
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
},
{
test: /\.sass$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.svg$/,
loader: 'svg-loader'
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
resolve:{
extensions: ['.js']
}
}
Is there any loader or package to include icons from semantic ui package?
I am also using SUI-React with webpack. I was having a similar problem, however for me the icon files were 'packed' by webpack, but weren't being loaded correctly. Are you sure that webpack isn't finding them at all?
I eventually found that the source of my issue was the webpack configuration: my output path was a dist subdirectory, from which the index.html loaded bundle.js. This meant that webpack (and file-loader) made the urls relative to that directory. Once I changed my output path to the parent directory, and changed the output file to be dist/bundle.js, everything worked as expected.
My webpack.config.js specifies the entrypoint as yours does (although only one entrypoint, I'm not using webpack-hot-middleware), and my loaders are:
loaders: [
{
test: /\.jsx?/,
include: SRC_DIR,
loader: 'babel'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader'
}
]
I'm loading the css using
require("!style-loader!css-loader!semantic-ui-css/semantic.min.css")
in the index file rather than using webpack loaders, however I think that should be equivalent to what you're doing.
Maybe your .css loader rule shouldn't include the sass-loader?
Also, the loader configuration option use seems to have been added in webpack v2, so if you're using webpack v1, that should be loaders as you have for the other rules.
Hope you can figure it out!
I'm using node.js (the last version) and webpack to create a bundle. From what I've read, node.js should contain fs module for managing files. However when I call require("fs") I get an Cannot find module "fs" error. I've stuck with 'require is not defined ' in my console after adding "target: 'node' ". Any help will be usefull, thx.
var webpack = require('webpack');
module.exports = {
entry: "./client/main.js",
output: {
path: __dirname + '/public/build/',
publicPath: "build/",
filename: "bundle.js"
},
node: {fs: "empty"},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel",
exclude: [/node_modules/, /public/]
},
{
test: /\.css$/,
loader: "style-loader!css-loader!autoprefixer-loader",
exclude: [/node_modules/, /public/]
},
{
test: /\.less$/,
loader: "style-loader!css-loader!autoprefixer-loader!less",
exclude: [/node_modules/, /public/]
},
{
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
},
{
test: /\.svg/,
loader: "url-loader?limit=26000&mimetype=image/svg+xml"
},
{
test: /\.jsx$/,
loader: "react-hot!babel",
exclude: [/node_modules/, /public/]
},
{
test: /\.json$/,
loader: "json-loader"
}
]
},
target: 'node',
}
By setting node: {fs: "empty"}, you are telling webpack that when importing fs an empty object should be returned. Remove that and it should work fine. https://webpack.js.org/configuration/node/#node
Instead of marking "fs" as empty, try to decorate it like this:
externals:{
"fs": "commonjs fs"
}
That should tell webpack to load it as a module instead of considering it an environment object/ variable.
Ref:
Node cannot find module "fs" when using webpack
Help appreciated!
My question is how do I get webpack to compile assets from a shared folder into the appropriate content script?
I have a Chrome Extension using react-redux-chrome. Their file structure is:
-build
-content
-event
-popup
package.json
gulpfile.babel.js
manifest.json
The gulp file watches for changes and compiles the appropriate javascript, manifest, and html files into build.
Content, event, and popup all have their own webpack configs.
// content/webpack.config.js
const path = require('path');
module.exports = {
entry: [
'./content/src/scripts/index.js'
],
output: {
filename: 'content.js',
path: path.join(__dirname, '../', 'build'),
publicPath: '/'
},
resolve: {
extensions: ['', '.js', '.jsx', '.scss', '.json'],
modulesDirectories: ['node_modules'],
},
module: {
loaders: [
{
test: /\.(jsx|js)?$/,
loader: 'babel',
exclude: /(node_modules)/,
include: path.join(__dirname, 'src'),
query: {
presets: ['es2015', 'react']
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
]
}
};
My extension has two content scripts, so my folders look like this...
-build
-content1
-content2
-shared
-event
-popup
package.json
gulpfile.babel.js
manifest.json
Everything works fine until I try to import a React module from the shared folder. The shared folder does not have a webpack config. I get the error: Unexpected token. You may need an appropriate loader to handle this file type.
How do I get webpack to compile assets from the shared folder into the appropriate content script? I tried an alias, but it did not work.
alias: {
shared: path.normalize('../../../../../../shared')
}
I had a brain fart... just needed to make a new loader for the directory. In the content1/webpack.config.js and content2/webpack.config.js files...
{
test: /\.(jsx|js)?$/,
loader: 'babel',
exclude: /(node_modules)/,
include: path.join(__dirname, '../shared'),
query: {
presets: ['es2015', 'react']
}
},
I am currently building an electron app to deploy on a raspberry pi3 with a react front end. It's using webpack to bundle everything. I am also trying to use the node-raspicam package to interact with the camera module. I have successfully been able to use the node-raspbicam package on it's own outside of this app. But when I try to import it in this application I get the following error
Module not found: Error: Cannot resolve 'file' or 'directory' ../options in /usr/src/app/node_modules/raspicam/lib
# ./~/raspicam/lib/raspicam.js 7:17-38 8:12-33
in raspicam.js it tries to do parameters = require("../options").parameters which is where it is failing.
In the raspicam tree within node_modules options.json exists one directory up from where it is being called.
My thought is webpack is not bundling this json file properly therefore, it cannot be found.
My webpack loaders :
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.(jpg|png)$/,
loader: 'file?name=[path][name].[hash].[ext]',
include: path.images
},
{
test: /\.json$/,
loader: 'json-loader'
}]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['', '.js', '.jsx'],
packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
},
plugins: [
],
externals: [
// put your node 3rd party libraries which can't be built with webpack here
// (mysql, mongodb, and so on..)
]
I am still fairly new to webpack. What am I missing so that the options.json file in the raspicam node_module gets bundled properly?
Try adding .json to the extensions in the resolve object in the config file. It may work.