I am building a project but i am facing an issue where React doesn’t load the images even with the require syntax <img src={require('./images/Jonas.jpg')} alt="test" />
It works perfectly fine when i import the image import image from './images/Jonas.jpg' but for some reason it is not working with require which is absolutely crucial for the project...
Any ideas what might be the problem here ? Thanks in advance
You can use file-loader for this
Follow these steps
npm install file-loader --save-dev
Then add the loader to your webpack config.
webpack.config.js
{
test: /\.(jpg|png|svg|gif)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
},
Related
I want to switch the theme dynamically in my React project and my react app is build and served using Webpack. So I took inspiration from this starter app. This repo contains the example of switching between two themes at run time and is built using Craco. I tried to migrate from Craco to Webpack (Webpack sample).
After migrating to Webpack, theme switching is stopped working. When I inspect using the Chrome debugger, the code is changing, but the colors are not reflected in this change.
Can anyone help to resolve the issue? Thanks in advance.
carco sample -> https://github.com/bandrewfisher/theming-react-components.git
webpack sample -> https://github.com/bannarisoftwares/tailwind-theme-webpack-issue.git
This is working for tailwind css 2.X version, not working for tailwind css 3.X version
Seems like need to add for tailwind css 2.X version
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
}
in postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
autoprefixer: {},
tailwindcss: {},
}
}
does this work for you?
I have a React component library that is used in a React app. The component library is setup using Styleguidist and webpack. I've setup webpack to use absolute paths using:
webpackConfig: {
resolve: {
modules: [path.resolve(__dirname, 'src/'), 'node_modules'],
}
}
This works within the context of the component library. When I build the component library, the package looks like this:
/core
/components
/Table
/Row
When I import the components into my app, I get an error:
Module not found: Can't resolve components/Row in /Users/myusername/Sites/mysite/node_modules/#mypackage/core/components/Table
I understand why the paths don't match in the context of node_modules, but I would've expected Webpack to transform those import paths during the build process. Is there something I'm missing? Or is this not possible?
While Styleguidist uses webpack, it turns out the build script we were using does not, so the webpack config is irrelevant. Instead, our build script (https://www.npmjs.com/package/cod-scripts) uses babel.
We ended up having to add a separate babel.config.js file to define absolute paths for babel using the babel-plugin-module-resolver package.
npm install babel-plugin-module-resolver --saveDev
npm install #babel/preset-react --saveDev
babel.config.js
module.exports = {
plugins: [
[
'module-resolver',
{
root: ['./src'],
},
],
],
presets: ['#babel/preset-react'],
};
I have been using storybook for a while now but I still couldn't understand the reason behind storybook has its own webpack config.
For example, if I config an absolute path in tsconfig.json, I have to do the same thing for storybook.
Or if I want to use a loader for a file type, I have to do it again for storybook and it's kind of annoying.
Can anyone explain this or how did you overcome this hassle in your previous projects?
#nishkaush I have to post a comment for you to read. So I did resolve that (loader for svg) even it took a lot of my time. Take a look if you're interested.
webpackFinal: async (config) => {
const fileLoaderRule = config.module.rules.find(
(rule) => rule.test && rule.test.test('.svg'),
)
fileLoaderRule.exclude = /\.svg$/
config.module.rules.push({
test: /\.svg$/,
enforce: 'pre',
loader: require.resolve('#svgr/webpack'),
})
return config
},
You can put that in your storybook webpack config (main.js)
And this one for project webpack config:
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/,
},
use: ['#svgr/webpack'],
})
return config
},
Don't forget to install #svgr/webpack
I was having the same issue today. Storybook's webpack config uses SVG-loader whereas my webpack config uses file-loader.
So, even though using an SVG as an img's src worked for my project, it didn't work for Storybook.
Really annoyed me.
Had to re-write all my icons that were using img tag to use inline SVG. Wasted Afternoon!
I want to use React CSS modules with Bootstrap.
First, I created a project with the create-react-app command. Then, I installed Bootstrap 4 with NPM and included it in my app.js like:
import 'bootstrap/dist/css/bootstrap.css';
I also did npm eject to have access to my Webpack config file.
Meanwhile I wanted to use CSS modules in my layout.js file, so I went to webpack.config.dev.js and changed modules to true:
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true
}
When I change modules to true Bootstrap CSS is not showing correctly. If I change modules to false then Bootstrap is working. Any idea?
Modules: true
Modules: false
Here's a good discussion how to use CSS-modules with other global CSS (e.g. Bootstrap)
https://github.com/css-modules/css-modules/pull/65
Hope it helps.
I had same issue and just loaded bootstrap directly in the index.html from public folder. My project not so big to include bootstrap in the same bundle
P.S.
Actually, I also tried this solution and it works good for me.
https://github.com/css-modules/css-modules/issues/113
I just renamed all of my global css files as .global..css
{
test: /^((?!\.global).)*\.css$/, // anything with .global will not
go through css modules loader
loaders: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=
[name]__[local]___[hash:base64:5]',
'postcss-loader'
]
}
I've built a wrapper package for drag and drop in React, and I added storybook examples.
Since in my consumer React is exposed globally, i'm not importing React explicitly.
In the storybook examples I need to supply React as part of the custom webpack config, but for some reason it can't resolve React and I get a ReferenceError: React is not defined
This is the package - https://github.com/fiverr/drag_n_drop_package
And this is the custom webpack config file:
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
],
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!raw!sass'
}
]
}
};
This is really strange but your storybook webpack.config.js is mixing webpack v1/v2.
Importing webpack as
const webpack = require('#kadira/storybook/node_modules/webpack');
solves it because it uses the same webpack reference that storybook is using (v1).
I found the following code in webpack.config.js at github:
externals: {
react: 'React'
}
It looks as this question. If it needs to load the React lib from external, like CDN. The page has to be sure have a script tag for importing React lib. And make sure this script tag is in front of the bundle.js or the file which it generated by webpack, so the Object of React will exist when the following code needs to use React, such as:
<script src="./react.js"></script>
<script src="./bundle.js"></script>