Unexpected character '#' in #import at webpack config - javascript

So right now I am having the issue I set up my webpack config as such
var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
entry: [
path.join(parentDir, 'index.js')
],
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"]
}, {
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}]
},
output: {
path: parentDir + '/dist',
filename: 'bundle.js'
},
devServer: {
contentBase: parentDir,
historyApiFallback: true
}
}
The error that I am getting is
Module parse failed: Unexpected character '#' (11:0)
You may need an appropriate loader to handle this file type.
| *
| */
| #import url(https://fonts.googleapis.com/css?
family=Lato:400,700,400italic,700italic&subset=latin);/*!
I know I need to add a rule for this import I am just not sure which kind I am new to webpack and can't find anything referencing this type, also this #import exists in the semantic-ui-css package

Adding this bit to modules in the config file seemed to do the trick:
{
test: /\.css$/,
use: [
'to-string-loader',
'css-loader',
'resolve-url-loader'
]
}

Related

Unexpected token given when loading import() with Webpack 4.24.0 or higher

I've been on a dependencies upgrade mission and I have found when upgrading Webpack to 4.24.0 or above I get this failure:
ERROR in ./src/js/components/App.jsx 35:9
Module parse failed: Unexpected token (35:9)
You may need an appropriate loader to handle this file type.
| import ReactModal from 'react-modal';
| var RoomListings = React.lazy(function () {
> return import('./RoomListings.jsx');
| });
| var RoomDetails = React.lazy(function () {
# ./src/js/index.js 3:0-39 6:74-77
# multi ./src/js/index.js
It's failing on the import but what is frustrating is that nothing has changed in either my Webpack or Babel config which are below:
webpack.config.js
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: PATHS.build,
filename: "js/[name].js"
},
devServer: {
contentBase: path.join(__dirname, 'src'),
publicPath: '/'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.html$/, loader: "html-loader" },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|jp(e*)g|svg)$/, use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
.babelrc
{
"presets": ["#babel/env", "#babel/react"],
"plugins": ["add-react-displayname", "#babel/plugin-syntax-dynamic-import", "emotion"],
"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
}
I am assuming something is either missing or misconfigured, but after hours of searching SO and Google, none of the existing answer appear to help.

Compile scss with webpack for an Angular App

I'm using webpack 3 for my angular app. I have some issues with compiling my scss files. Here is full webpack config file:
const path = require('path')
const autoprefixer = require('autoprefixer')
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const config = {
context: __dirname + '/src',
entry: {
app: './index.js',
vendor: [
'angular',
'angular-animate',
'angular-bootstrap',
'angular-route',
'animate',
'bootstrap',
'bootstrap-filestyle',
'jquery',
'ng-file-upload',
'ng-parallax'
]
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'app'),
publicPath: path.join(__dirname, 'app')
},
resolve: {
extensions: ['.js', '.jsx', '.scss']
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader',
'css?minimize!postcss!sass')
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
loader: 'file?name=fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
loader: 'file?name=images/[name].[ext]'
}
],
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.svg$/,
loader: 'url-loader'
},
{
test: /\.php$/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /\.zip$/,
loader: 'file-loader?name=[name].[ext]'
},
{
test: /(\.png|\.jpg|\.gif)$/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
plugins: [
new ExtractTextPlugin('./bundle.css'),
new CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js'
}),
new UglifyJSPlugin({})
// new ExtractTextPlugin({
// filename: '[name].min.css'
// })
]
}
module.exports = config
After running webpack i've got this error:
ERROR in ./assets/sass/main.scss
Module parse failed: /home/git/project/src/public/src/assets/sass/main.scss Unexpected token (1:13)
You may need an appropriate loader to handle this file type.
| $header-color: #ffffff;
| $admin-panel-height: 40px;
|
# ./index.js 3:0-34
Also i tried to use this loader: https://github.com/webpack-contrib/sass-loader
After webpack build there no errors appeared, but css file also was not created in /app folder.
file main.scss imports in index.js:
import './assets/sass/main.scss'
Can anyone give me an advice how can i build and watch scss files with webpack 3 ?
You have used some of the loader configs that suppose to be for webpack 1.
That section of the config:
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader',
'css?minimize!postcss!sass')
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
loader: 'file?name=fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
loader: 'file?name=images/[name].[ext]'
}
],
There are breaking changes when you move to Webpack 2 (or 3).
One of them was module.loaders => module.rules.
You will need to convert that section to the new structure.
In addition, ExtractTextPlugin changes it config style as well, please read it README.

webpack Error :Module parse failed You may need an appropriate loader to handle this file type

I want extract and compile css code from sass file with extract-text-webpack-plugin , but webpack give me this Error :
ERROR in ./style.scss
Module parse failed: H:\projects\new\app\style.scss Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
| background-color: #d9534f;
| }
# ./index.js 2:0-22
my version of webpack and extract-text-webpack-plugin :
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"webpack": "^2.1.0-beta.22"
my webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('test.css');
module.exports = {
context:path.resolve(__dirname, 'app'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'app'),
filename: 'bundle.js'
},
module: {
loader: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
, {
test: /\.s?css$/,
loader: extractCSS.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' })
}
, {
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.(jpe?g|png|gif)$/,
exclude: /(node_modules)/,
loader: 'url-loader?limit=10000'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff'
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
}
]
},
plugins: [
extractCSS,
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'app')+'/index.html',
inject: 'body'
})
]
};
and my simple .scss file :
body{
background-color: #d9534f;
}
Works for me this way.
Add const ExtractTextPlugin = require("extract-text-webpack-plugin"); in the top.
and add this to loaders:
test: /\.s?css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader'}),
},
I Solve it :
module: {
loaders: [
{
instead of
module: {
loader: [
{
here you go buddy
{ test: /\.sass$/, use: extractText.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }) }

Why webpack gives back the mistake ReferenceError: document is not defined?

The text of the mistake
ERROR in ./static/main.sass
Module build failed: ModuleBuildError: Module build failed:ReferenceError: document is not defined
ERROR in ./~/css-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./static/main.sass
Module build failed: ReferenceError: document is not defined
at Object.resolveUrl (/home/andrew/Test/node_modules/resolve-url/resolve-url.js:21:25)
The webpack.config.js
webpack = require('webpack');
path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
webpackConfig = {
context: __dirname,
entry: {
bundle: './static/app.js',
styles: './static/main.sass'
},
output: {
filename: '[name].js',
path: './static/build'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devtool: '#cheap-module-source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-0', 'stage-1']
}
},
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract( 'css-loader!resolve-url!sass-loader?sourceMap')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
loader: 'file-loader'
}
]
},
plugins: [
new ExtractTextPlugin('styles.css', {
allChunks: true
})
]};
module.exports = webpackConfig;
I thought it may be not having some of the loaders but that's not it.
Besides app.js does not compile in bundle.js too but it doesn't give a mistake. Maybe there is some mistake in entry but I don't know.
You need to include the SCSS file in your app.js (either require or import) and only pass your app.js file as entry for Webpack instead of passing the 2 files as entry.

Use webpack with jade-loader without explicitly requiring assets

I am trying to use Webpack jade-loader in combination with html-loader to be able to omit requires in jade templates + use a path relative to a certain folder. I have tried a few things, none of them worked.
By default jade-loader works when using img(src=require("../../../../assets/images/imac.png") alt="computer"), with the following webpack config:
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/app.js'
],
context: path.resolve(__dirname + "/client"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
// placed here so we know that it is done before transpiling
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: [/node_modules/, /\.config\.js/, /\.conf\.js/ ] }
],
loaders: [
{ test: /\.html$/, loader: 'raw' },
{ test: /\.jade$/, loader: 'jade-loader' },
{ test: /\.less$/, loader: 'style!css!less' },
{ test: /\.css/, loader: 'style!css' },
{ test: /\.(png|jpg|jpeg|svg)$/, loader: 'file' },
{ test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
]
},
eslint: {
configFile: './.eslintrc'
}
};
If I add the html-loader ({ test: /\.jade$/, loader: 'html-loader!jade-loader' }) which is supposed to require sources by default, I keep getting the 'Error: Module not found'. The console logs all the paths that it tried, all relative to the current working file.
I tried to give it some context, with context: path.resolve(__dirname + "/client"). It didn't work either.
I also tried to combine with the raw loader: raw-loader!html-loader!jade-loader. I don't get the error but the wepback output that is served is not my app at all, but instead something along the lines of:
var jade = require(/......) ....
Do you have any idea ?
Thanks for your help
Had the same Problem.
https://www.npmjs.com/package/pug-html-loader worked for me:
module.exports = {
// your config settings ...
module: [
//your modules...
loaders: [{
include: /\.jade/,
loader: 'pug-html-loader'
}]
]
};
I don't know what do you want. My need is to load a template from a directive (component in 1.5)
angular.module('app').component('myComponent', {
bindings: {},
template: require('./mytemplate.jade')()
});
You can to note that I'm invoking the returned function.

Categories