I have an issue with upgrading to webpack 2 and the extract text plugin. I have the dev version (without this plugin) working and I cant see whats different. The error I get is
node_modules\webpack\lib\Chunk.js:62
return this.entrypoints.length > 0;
TypeError: Cannot read property 'length' of undefined
I have gulp running webpack 2 and this plugin for a single css file. This is the main part of my webpack config (happy to provide it all if needed):
...
modules: { rules :[ ... {
test: /\.scss/,
exclude: /node_modules/,
use: [
"style-loader?sourceMap",
{
loader: "css-loader",
options: {
minimize: true,
modules: true,
importLoaders: true,
localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
},
},
{
loader: "postcss-loader",
options: { ...postCSSConfig },
},
{
loader: "sass-loader",
options: { includePaths: [path.join(process.cwd(), "src", "Styles", "Includes")] },
},
],
}, ]},
plugins: [
new ExtractTextPlugin({
filename: "[contenthash].css",
allChunks: true,
}), ...
Im using the following versions:
Webpack: 2.3.3
Extract text plugn: 2.0.1
Edit: Here is my entry point,
context: path.resolve(process.cwd(), "./src/"),
entry: [
"babel-polyfill",
"whatwg-fetch",
"Boot",
],
devtool: "eval",
resolve: {
modules: ["src", "node_modules"],
extensions: [".js", ".jsx"],
},
Any ideas would be great.
Thanks in advance.
According to docs, you also have to create proper rule for loading styles.
Please take a look at that, it's my rule. Please let me know if it helped you.
{
test: /\.(scss|css)$/,
exclude: /node_modules/
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
Anyway, yet I didn't manage to use ExtractTextPlugin with sourceMaps, so I can't give you solution to use this plugin with source maps.
Related
Tools:
React 16.8.3
reactstrap 7.1.0
I followed the instructions here https://reactstrap.github.io/ but I'm still getting errors. I'm aware of this solution from their github page:
{ test: /\.css$/, loader: 'style-loader!css-loader' }
but that config file seems to be outdated. I'm only getting this error:
Module not found: Can't resolve 'style-loader!css-loader'
Here's my webpack config:
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
{
loader: 'style-loader!css-loader',
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean);
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
}
(I have no enough reputation to add a comment to your question)
well, I wanted to enable CSS modules so I ended up doing this.
It took me a while to figure out in the new version.
after you have successfully ejected, just only edit webpack.config.js file and add the two lines of code (check the code below)
....
....
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true, // add this line
localIdentName: "[name]__[local]__[hash:base64:5]", // add this line too
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment
}),
....
....
some more pics how to use CSS loaders:
my Layout.css file:
my Layout.js file:
I'm getting an error for css loader invalid option and my webpack.conifg.js code is as follows :
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./public/index.html"
});
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve('dist'),
filename: 'bundled.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName:"[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [htmlWebpackPlugin]
};
I don't know where I'm doing wrong.Please help me to solve this issue. I'm using webpack for reactjs 4 and webpack version is 4. Thanks
This is what resolved my case:
css-loader 2.1.1
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]',
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}
css-loader 3.0.0
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[local]',
},
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}
Try commenting out:
// minimize: true
Commenting out minimize worked previously, though I began a new project with a fresh install of css-loader, and the culprit this time around is importLoader: 1. Just remove importLoader and it should work.
I'm using css modules with React, and everything is running properly.
This worked for my VUE Js project:
Browse to the /build/utils.js file and in the object of thecss-loader comment on the option that is marking you in the error. In my case I had to comment:
minimize: process.env.NODE_ENV === 'production',
To add images into the project i'm using content: url() css property inside sass file and specify relative path to src folder e.g. content: url('/images/right-arrow.svg');.
The problem is that in production build i need to get rid of the first slash to have such path ('images/right-arrow.svg') inside of a bundled css file.
The only way i could get desired behaviour is to use url: false option for css-loader, and writing path without slash in sass file: content: url('/images/right-arrow.svg'), but such option don't add necessary file from node_modules e.g. fonts and images.
Webpack Config:
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public/'),
filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
url: true
}
},
'sass-loader'
]
},
{
test: /\.(svg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images'
}
}
},
{
test: /\.(otf|woff2|ttf|eot|woff)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
}
]
}
What am i missing in webpack config to achieve paths to work correcty?
Ok, I've solved the issue. I was using resolve-url-loader with no results, before #Ujin suggested to use it. After his comment I've clarified what resolve-url-loader does and cofigured it propertly to solve my issue. The main problem is that I've missed to read important paragraph of resolve-url-loader docs, which says:
source-maps required for loaders preceding resolve-url-loader (regardless of devtool).
Also I didn't use root option of resolve-url-loader plugin. So, webpack config for .scss files looks like this:
test: /\.s?css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'resolve-url-loader',
options: {
root: path.join(__dirname, 'src')
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sourceMapContents: false
}
}
]
}
Check the documentation about problems with url(...).
It suggests using resolve-url-loader.
Also you can try to use copy-webpack-plugin
I've been struggling with getting my source-maps working in my app for quite a while. I have set
devtool: 'source-map',
in the webpack configuration, but they are still not available in the Chrome devtools.
I pushed a really simple app using my FE Stack hoping someone could identify the issue, whether it is with webpack, angular, or some other library. https://github.com/coreysnyder/Angular-Webpack3-Seed
Here are the versions I'm running:
{
CoreyApp: '1.0.0',
npm: '4.4.4',
ares: '1.10.1-DEV',
http_parser: '2.7.0',
icu: '57.1',
modules: '48',
node: '6.9.0',
openssl: '1.0.2j',
uv: '1.9.1',
v8: '5.1.281.84',
zlib: '1.2.8'
}
OSX 10.12.6
You will probably have to setup source map for different loaders individually.
For 'ng-annotate-loader' (Docs)
use: [{
loader: 'ng-annotate-loader',
options: {
add: true,
single_quotes: true ,
map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }}
}]
For less you can use documentation option like #ahmedelgabri suggested
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "less-loader", options: {
sourceMap: true
}
}]
Old post before OP github changes.
Other option is to add devtoolLineToLine: true in your output, if you want to use devtool: 'source-map'. But devtoolLineToLine is deprecated, so consider changing devtool to something else. devtool: 'source-map' demo image
output: isTest ? {} : {
devtoolLineToLine: true, // <= this line
sourceMapFilename: '[name].map',
path: __dirname + '/dist',
filename: '[name].bundle.js',
publicPath: publicPath
},
Alternatively you could use devtool: 'eval' or some variation of eval, like cheap-module-eval-source-map (similar behavior, but without file names) also works fine for me
I could fix your source maps for JS files, by adding the babel-loader. To do this, you need to install babel-loader:
npm i -D babel-loader#8.0.0-beta.0 #babel/core #babel/preset-env
and then extend your rule for .js
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'ng-annotate-loader',
options: { add: true, single_quotes: true }
},
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
]
}, [...]
]
Ready further details on babel-loader github repo
There is nothing wrong with the Webpack config here https://github.com/coreysnyder/Angular-Webpack3-Seed
here is a gif using your code & setting a breakpoint in view1 file
And here is why the text is blue
And I can see the source just fine
The main issue is the less-loader you need to pass the source-maps options for both, the less-loader & css-loader check the readme
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'less-loader',
options: {
sourceMap: true,
},
},
],
},
After doing this you will be able to debug from the styles panel like this
If you want to edit directly the .less files the readme mentions a blog post that can help with this https://github.com/webpack-contrib/less-loader#source-maps
I hope this answers your question
I have a React-based web application and I'm trying to build an electron app out of it. I have gotten quite far and the app seems to load but somewhere in between I get an error saying require is not defined.
These are the versions of the tools I'm using:
webpack 3.6
react 15.6.1
electron 1.7.6
Here's a screenshot of the line where the error occurs:
Note that require is defined in Console - I read somewhere that this could be a race condition, but even if that's the case, what do I do about it?
Here's my webpack.config.js (note that I'm using the electron-renderer target):
var path = require('path');
var webpack = require('webpack');
var StatsPlugin = require('stats-webpack-plugin');
var devServerPort = 3808;
var presets = ['es2015', 'react', 'stage-0'];
var options = {
entry: {
'application': [
'react-hot-loader/patch',
'app/application.jsx'
]
},
output: {path: __dirname, filename: 'js/bundle.js' },
resolve: {
modules: [
path.join(__dirname, 'node_modules/'),
path.join(__dirname, 'app/')
],
extensions: ['.js', '.jsx']
},
node: {
__dirname: false,
__filename: false
},
plugins: [
// must match electron.webpack.manifest_filename
new StatsPlugin('manifest.json', {
// We only need assetsByChunkName
chunkModules: false,
source: false,
chunks: false,
modules: false,
assets: true
}),
new webpack.ProvidePlugin({
"React": "react",
}),
new webpack.ProvidePlugin({
"ReactDOM": "react-dom",
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'process.env.BASE_URL': JSON.stringify('localhost:3000'),
'global': {}, // bizarre lodash(?) webpack workaround
'global.GENTLY': false // superagent client fix
})
],
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: ['react', 'es2015', 'stage-0'] }},
{ test: /\.jsx$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: presets }},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.(png|)$/, loader: 'url-loader?limit=100000' },
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{ test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] },
{
test: /\.json$/,
loaders: ['json-loader']
}
]
},
};
options.target = 'electron-renderer';
module.exports = options;
I even tried using webpack-target-electron-renderer but it caused more problems.
I've had a similar issue in the past, if it is in fact the same problem here's how to solve it.
The require you have shown is within the wrapping IIFE, which means that this is not window but the function, meaning that when you try to find require it's not in scope. In order to fix this you need use imports-loader.
In your case, under module and then loaders, add:
{
test: require.resolve("/*require/import path which requires the file where require("url") is*/"),
use: "imports-loader?this=>window"
}
Hope this solves your problem.
You need to use something like browserify or babelify.
See a more in-depth explanation here.