I am learning react looking videos but in one video they are enabling css module by eject>edit webpack.config.dev.js but i can't find the same file in my react , later i came to know that in 16.7 its different so can anyone tell the steps to enable css module in react 16.7
fortunately in react 16.8 no need to run "npm run eject" and you can just add extention ".module.css" in place of ".css" to get the sake of CSS module
To enable CSS module, first of all go to your project directory then open command line and run npm run eject
inside the config folder you will find webpack.config.dev.js and webpack.config.prod.js files.open those files
and add this code to webpack.config.dev.js
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
},
and in filewebpack.config.prod.js add
test: cssRegex,
exclude: cssModuleRegex,
loader: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
sourceMap: shouldUseSourceMap,
}),
After saving this you can now use CSS module
For react version 16.13
In webpack.config.js file find this keyword 'css-loader'.
You will find below code in line number 82 for react version-16.13
{
loader: require.resolve('css-loader'),
options: cssOptions,
}
Replace above object with
{
loader: require.resolve('css-loader'),
options: {
modules: {
mode: "local",
localIdentName: "[name]_[local]_[hash:base64:5]"
},
import: true,
importLoaders: true
}
}
Start the server again by npm start(If changes are not reflected)
Related
We started sharing a number of React components in our SPA as Bit.dev components and ran into an issue: can't use our components on Bit's dashboard due to CSS-modules as Bit's build process does not create them. We use Bit 0.0.687. Use "bit start" to launch Bit dashboard or "bit export" to publish the components to a remote scope, then open a remote dashboard. Our components which use: import style from './style.css' and relay on a CSS module get undefined "style" under Bit. May someone tell, please, if there is a way to alter Bit's build process to generate CSS modules? In our Application's Webpack build we use:
module: {
rules: [
{
test: /\.css$/i,
include: /src/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('style-loader', {
paths: [require.resolve('webpack-config-single-spa')],
}),
},
{
loader: require.resolve('css-loader', {
paths: [require.resolve('webpack-config-single-spa')],
}),
options: {
importLoaders: 1,
sourceMap: true,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
}
]}
and Webpack 5.x.
As Bit uses CRA under the hood, renaming CSS files to style.module.css helps. CRA recognizes "module" suffix and compiles these CSS as modules.
I want to write a reusable UI component library and pack it with Webpack. However, when I import it in another project, where the babelrc has useBuiltIns: 'usage' set, the import will fail with an error:
"export 'default' (imported as 'Component') was not found in 'component'
This is part of my webpack configuration in library project:
output: {
path: path.resolve(process.cwd(), './dist'),
filename: 'component.js',
chunkFilename: '[id].js',
library: 'Component',
libraryTarget: 'commonjs2',
libraryExport: 'default'
},
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
Babel configuration in library project:
module.exports = {
presets: [
[
"env",
{
modules: false,
targets: {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
]
}
Babel configuration in the consuming project:
module.exports = {
presets: [
'#vue/app'
]
}
Where the useBuiltIns: 'usage' is implicitly set.
While the problem could be solve by either set useBuiltIns: false or scriptType: 'unambiguous' in the consuming project. But this is not what I want. Since my goal is to provide a reusable library and it is expected to be used in different projects. I cannot force all the consuming projects to do this.
Am I missing something here?
I've found the answer in the Vue.js forum: https://forum.vuejs.org/t/export-default-imported-as-components-was-not-found-in-mylib/63905
The problem was that I was adding the dependency with a local path, namely:
$ npm install ../component
And in this case, npm is creating a symlink in node_modules. It seems that some babel plugin doesn't really like symlinks.
After I've changed to use git:
$ npm install git+file://localhost/path/to/component
Everything works fine.
I am trying to extract all the CSS files found in the node_modules directory into a single file. My Webpack config is as follows:
{ // node_modules css in /node_modules/**/*.css
test: /\.css$/,
include: /node_modules/,
// extract to the node modules css file
use: ExtractTextPluginNodeMods.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: false,
},
},
],
}),
}
Unfortunately, none of the CSS files in the node_modules directory are being bundled into the file specified with ExtractTextPluginNodeMods. I have another ExtractTextPlugin instance that is successfully extracting CSS from my src directory. Any idea why I cannot get extraction of CSS from node_modules?
For reference, my other ExtractTextPlugin/Webpack config (which is bundling all of my CSS is here:
{
// OUR css in /src/
// the css output from sass loader will be caught here
// fonts are imported by css loader
// after transpiling of sass -> css, css-loader in webpack should take care of this
// https://github.com/webpack-contrib/css-loader
test: /\.css$/,
exclude: /node_modules/,
// extract to our css file
use: ExtractTextPluginSrc.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
// create modular css with the '[name]__[local]___[hash:base64:5]'
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
'postcss-loader',
],
}),
}
Webpack won't include the CSS files unless you explicitly import them from your javascript code. So you'll need:
import 'some_package/css/component.css';
in the part of your app that uses the CSS.
Alternatively you could use something like glob-loader to do
import 'glob-loader?node_modules_pattern_file';
and then have your "node_modules_pattern_file" include a glob like
../node_modules/**/*.css
...but I don't recommend this approach because you'll end up pulling in loads of files you don't need and it will be hard to maintain.
I have a large project that I would like to divide up into multiple package.json's so that the dependencies for each part can be clearly stated and so those packages can be exported as individual parts.
However, I want my app to include each of these packages and compile them using webpack and babel. There are shared dependencies for the packages, so I don't want to just output each one to a /dist folder.
My ideal directory structure looks like this:
\main
\app
\node_modules
package.json
\package1
package.json
node_modules
index.js
\package2
package.json
node_modules
index.js
I tried multiple approaches:
Using webpack's resolve modules with something like path.resolve('app'). This just doesn't work, even though it should in theory.
Using main's package.json to reference others using "package1" : "file:../package1". This doesn't treat package1 as es6 javascript and throws errors. Using resolveLoaders in the webpack configuration does not help.
The webpack config I have is as follows.
module: {
loaders: [
{
test: /\.js?/,
loader: 'babel-loader',
include: [
path.resolve('app'),
path.resolve('../prose'),
],
query: {
plugins: [
['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
// If you use React Native, pass 'react-native' instead:
imports: ['react'],
// This is important for Webpack HMR:
locals: ['module']
}]
}],
['transform-object-assign']
]
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.svg$/, loader: 'file-loader' },
{ test: /\.png$/, loader: 'file-loader' },
{ test: /\.jpg$/, loader: 'file-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
modules: [
path.resolve('app'),
'node_modules',
],
extensions: ['.json', '.js', '.jsx'],
}
Any thoughts or examples of other projects that do this would be appreciated!
You should check out lerna. It enables you to use multiple package.jsons and even packages in one repo. It might help you with you requirements.
I'm using Webpack, and when I run a production build ie.
webpack -p
The build never completes.
A quick search says to disable the sourcemap for uglifyjs... but I cannot find a decent explanation on how to do this.
Ideally I would be able to disable the sourceMap from from the configuration.
Finally, this brings up another question which is... shouldn't I want a source map when I create a production build? Disabling the feature seems like a poor workaround.
module.exports = {
entry: ["./utils", "./app.js" ],
output: { filename: "bundle.js" },
module:{
preLoaders:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'jshint-loader'
}
],
loaders: [
{
test:/\.es6$/,
exclude: /node_modules/,
loader: "babel",
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.es6']
},
watch: true
}
UPDATE: Ok... it looks as if the watch: true portion of my config was the culprit... but still, it would be good to know how to disable sourceMaps.
This is from #user104317 above, in the comments section.
"Watch" tells webpack to keep running and automatically build your files as they change. The build finished. The command will keep running till killed.