TypeError: Path must be a string. Received undefined (4.0.2 + webpack 2.1.0-beta.23 + ?sourceMap) #285
Comments
|
I have the same issue +1 |
|
Ignore my deleted comment. I was incorrect. |
|
This seems to fix the issue: new webpack.LoaderOptionsPlugin({
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/'
}
})Looking at the code in the DllReferencePlugin it looks like there is a new way to get the context. |
|
@phairoh I'm running into a similar issue, I'd love to get your opinion, just not sure where to go from here. It could be a simple configuration issue, but maybe the loaders I'm using need updates. I'm loading bootstrap sass files using bootstrap-loader and sass-loader, which leads to an error... The stack trace starts at bootstrap-loader, but most of it stems from sass-loader. Looking above at your solution, I tried adding something like... ...
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer],
sassLoader: {
includePaths: [helpers.root('node_modules/bootstrap/scss')]
},
context: __dirname,
}
})
...but this did not resolve the issue for me. Again, not sure if the actual issue is bootstrap-loader, sass-loader, or just missing configuration options. Any feedback would be appreciated. |
|
@borysn I'm sorry, but I've never used bootstrap-loader. Taking a quick look, though, it appears that there are 2 versions available on npm: v1 and v2 for webpack v1 and v2, respectively, and v2 is still in beta (as is webpack v2). Just doing |
|
@borysn this took me a bit to figure out because I had sourcemaps enabled in a chain from some of these I use a mix between query params in the loader string, the import {LoaderOptionsPlugin} from 'webpack';
const webpackConfigWhitelist = [
'amd',
'bail',
'cache',
'context',
'dependencies',
'devServer',
'devtool',
'entry',
'externals',
'loader',
'module',
'name',
'node',
'output',
'plugins',
'profile',
'recordsInputPath',
'recordsOutputPath',
'recordsPath',
'resolve',
'resolveLoader',
'stats',
'target',
'watch',
'watchOptions'
];
const skip = ['methods', 'debug'];
/**
* Reduce over the loaders to transform `module.{preLoaders,loaders,postLoaders}` syntax
* @param {Object} moduleConfig webpack config for `.module` property
* @return {Array} match `module.rules` syntax https://github.com/TheLarkInn/angular-cli/blob/63801b48fa4ec0b48005ceed74bd0c03854b4c8e/packages/angular-cli/models/webpack-build-common.ts#L44
*/
function loaderReducer(moduleConfig) {
return Object.keys(moduleConfig).reduce((list, name) => {
const loaderList = moduleConfig[name];
let enforce;
switch (name) {
case 'preLoaders':
enforce = 'pre';
break;
case 'postLoaders':
enforce = 'post';
break;
}
const rules = enforce ?
loaderList.map(loader => Object.assign(loader, {enforce})) :
loaderList;
list.push(...rules);
return list;
}, []);
}
/**
* Utility to transform properties not accepted since `v2.1.0-beta.23`
* @param {Object} webpackConfig config passed to the `webpack` compiler
* @return {Object}
*/
export default function(webpackConfig) {
const keys = Object.keys(webpackConfig);
const options = {};
const webpack2Config = keys.reduce((acc, key) => {
if (skip.includes(key)) return acc;
const val = webpackConfig[key];
if (!webpackConfigWhitelist.includes(key)) {
options[key] = val;
} else if (key === 'module') {
acc[key] = {};
} else {
acc[key] = val;
}
if (key === 'context' || key === 'output') {
options[key] = val;
}
return acc;
}, {});
webpack2Config.module.rules = loaderReducer(webpackConfig.module);
webpack2Config.plugins.push(
new LoaderOptionsPlugin(
Object.assign({}, {options})
)
);
return webpack2Config;
} |
|
I had to add this workaround bholloway/resolve-url-loader#33 (comment) to get rid of these errors: |
|
Hi, i'm using webpack 2.1.0-beta.25 and having this error still, what am i doing wrong? loader: {
test: /\.scss$/,
loaders: [
// ExtractTextPlugin.extract("style", "css?sourceMap"),
'to-string-loader',
'css-loader',
'resolve-url-loader',
'sass-loader' +
'?sourceMap&' +
'outputStyle=expanded&' +
'root=' + helpers.root('src') + '&' +
'&includePaths[]' + helpers.root('node_modules') + '&' +
'&includePaths[]' + helpers.root('src')
]
},LoaderOptions plugin: new LoaderOptionsPlugin({
options: {
context: helpers.root('src'),
outupt: {
path: helpers.root('www')
},
sassLoader: {
includePaths: [
'node_modules', 'bower_components', 'app', '.'
]
}
}
}), |
|
i spend over 10 hr to fight the bugs, My project is based on Angular2-webpack-starter Almost all of my scss file located in except one of the file called app.style.scss located in and the content of it(app.style.scss) is showing below @import "~compass-mixins";
@import "~breakpoint-sass";
@import "~susy";
@import "~font-awesome/scss/font-awesome";
@import "~normalize-scss";
@import "public/scss/abstracts/index";
@import "public/scss/base/reset";
@import "public/scss/CSSObjects/index";
@import "public/scss/utilities/extend";
@import "public/scss/page/index";The following is partial content of webpack.common.js module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: [ 'raw-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}
]
}
i get the ERROR : Cannot read property 'path' of undefined at Object.resolveUrlLoader this is caused by
i get the ERROR : Path must be a string. Received undefined this is caused by |
|
removing the ?sourceMap solved my problem |
|
@LiTiang as mentioned previously if you add plugins: [
new LoaderOptionsPlugin({
context: config.context, // config is your webpack config object
output: config.output,
sassLoader: // your sass loader options
})
] |
|
@dtothefp @LiTiang @imtiazwazir Is this doc issue? Or should we have a code PR? |
|
@dtothefp Can you show how to use it for https://github.com/AngularClass/angular2-webpack-starter ? |
|
following the wiki How to use Bootstrap 3 and Sass and ng2 bootstrap I modify config/webpack.common.js to this and it's work. Not sure what's going on though |
|
Changed |
|
@phairoh his answer has fixed my issue but I had to add it inside webpack.dev.js instead of webpack.common.js (if you are using Angular 2 Starter) |
|
@LiTiang, @borislemke I have this issue as well, using Luchillo/angular2-webpack-starter, a fork of AngularClass/angular2-webpack-starter. The only thing working for me is to either disable source maps, or set the options plugin in the I suspect the one plugin from the At the end i ended up putting the |
|
@Luchillo depending on how much you value your code, it is not recommended to have source maps in production. But glad that you found a fix for your case! |
|
@borislemke I'm not using sourcemaps in production, i only duplicated the |
|
The Usually, you don't need to do that. It is just for compatibility reasons to give you the full control. In all regular cases, you can just use loader options (they are also called loader queries) in your loader configuration. The loader will read these options from |
|
Having this same issue on webpack@2.2.1, when passing source map through query or options object, I get this error: |
|
@vteivans as previously pointed out: If you're using the new LoaderOptionsPlugin({
context: config.context
})But you should not need the |
|
Please update to latest Closing this out, please feel free to reopen if this doesn't resolve your issue. Thanks! |
sass-loader 4.0.2 + webpack 2.1.0-beta.23 + ?sourceMap
TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.relative (path.js:1228:5)
at Object.onRender (/node_modules/sass-loader/index.js
this.options.context is undefined
Problem goes away if I remove ?sourceMap from loader.
The text was updated successfully, but these errors were encountered: