I am using Webpack with Vuetify and I get a SASS error when compiling. My webpack config file is:
'use strict'
const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'js'),
},
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{
test: /\.(scss|sass|css)/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
// options: {
// implementation: require('sass'),
// fiber: require('fibers'),
// indentedSyntax: true // optional
// },
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
}
]
},
plugins: [new VueLoaderPlugin()]
};
The error I receive when building is:
ERROR in ./node_modules/vuetify/dist/vuetify.min.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--1-2!./node_modules/vuetify/dist/vuetify.min.css)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
╷
1 │ #charset "UTF-8";
│ ^
I'm convinced I must be missing some setting in the options for the style loaders somewhere, but I don't know what. Can anyone see where I'm going wrong?
Related
My project works fine but after installing and importing react-virtuoso it throws error.
ERROR in ./~/react-virtuoso/dist/index.mjs
Module parse failed: C:\Users\Rocky\Documents\betterdash\node_modules\react-virtuoso\dist\index.mjs Unexpected token (364:22)
You may need an appropriate loader to handle this file type.
| }
| const Component = forwardRef((propsWithChildren, ref) => {
| const { children, ...props } = propsWithChildren;
| const [system2] = useState(() => {
| return tap(init(systemSpec), (system22) => applyPropsToSystem(system22, props));
# ./src/components/order-viewer.jsx 13:21-46
# ./src/main.js
# multi whatwg-fetch ./src/main.js
Here is my webpack.config.js
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ["whatwg-fetch", "./src/main.js"],
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: "babel-loader",
include: path.join(__dirname, "src"),
exclude: /node_modules/,
query: {
presets: ["es2015", "react", "flow"],
plugins: ["transform-flow-strip-types"],
},
},
{
test: /\.s?css$/,
loaders: ExtractTextPlugin.extract({
use: ["css-loader", "sass-loader"],
fallback: "style-loader",
}),
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new ExtractTextPlugin({
filename: "style.css",
allChunks: true,
disable: process.env.NODE_ENV === "development",
}),
],
devtool: "source-map",
};
I tried deleting node_modules then run npm install but it doesn't solve the problem. If I remove the part of code that imports the react-virtuoso the error also gone.
import { Virtuoso } from "react-virtuoso";
I had the same problem with Jest and I noticed they have renamed the index.js file to index.cjs from version 4.0.0 to version 4.0. I would assume you have to do something similar with Webpack.
transform: {
'^.+\\.(cjs|js|jsx)$': [
'babel-jest',
{ configFile: './babel.config.js' }
]
},
If you install V4.0.0 it will work if that is the same issue.
I am trying to use scss with tailwindcss, but I cannot get webpack to transpile the tailwind code into destination site.css.
This is my scss used.
_base.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
// Also tried below
#import '~tailwindcss/base.css';
#import '~tailwindcss/components.css';
#import '~tailwindcss/utilities.css';
Once transpiled, I expected the file to have bunch of tailwind styling, like below:
site.css
from-green-500{--gradient-from-color:#48bb78;--gradient-color-stops:var(--gradient-from-color),var(--gradient-to-color,rgba(72,187,120,0))}.from-green-600{--gradient-from-color:#38a169;--gradient-color-stops:var(--gradient-from-color),var(--gradient-to-color,rgba(56,161,105,0))}...
But instead, I got the raw import statements below.
#tailwind base;#tailwind components;#tailwind utilities; ...
My webpack.common.js is below. Does anyone have suggestions on how to properly get the actual transpiled the css content into site.css?
webpack.common.js
'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TSConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const SOURCE_ROOT = __dirname + '/src/main/webpack';
const resolve = {
extensions: ['.js', '.ts'],
plugins: [new TSConfigPathsPlugin({
configFile: './tsconfig.json'
})]
};
module.exports = {
resolve: resolve,
entry: {
site: SOURCE_ROOT + '/site/main.ts'
},
output: {
filename: (chunkData) => {
return chunkData.chunk.name === 'dependencies' ? 'clientlib-dependencies/[name].js' : 'clientlib-site/[name].js';
},
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
},
{
loader: 'glob-import-loader',
options: {
resolve: resolve
}
}
]
},
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
}
}
},
{
loader: 'sass-loader',
},
{
loader: 'glob-import-loader',
options: {
resolve: resolve
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new ESLintPlugin({
extensions: ['js', 'ts', 'tsx']
}),
new MiniCssExtractPlugin({
filename: 'clientlib-[name]/[name].css'
}),
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site/' }
]
})
],
stats: {
assetsSort: 'chunks',
builtAt: true,
children: false,
chunkGroups: true,
chunkOrigins: true,
colors: false,
errors: true,
errorDetails: true,
env: true,
modules: false,
performance: true,
providedExports: false,
source: false,
warnings: true
}
};
I am developing a web application using Node.js, Express & Webpack. Everything was going well until Webpack was upgraded to Webpack 5 and lots of bugs appeared. I have managed to solve all the errors but there is a warning I can't solve. I have seen this post but it's related to Angular so I don't think it helps me much: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
WARNING in ./node_modules/terser-webpack-plugin/dist/minify.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
This is my webpack.config.js; resolve fields and node-polyfill-webpack-plugin are used to solve Webpack 5 bugs and errors.
const path = require("path")
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
resolve:{
fallback: {
"fs": false,
"path": false,
"worker_threads":false,
"child_process":false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
}
},
entry: {
main: './src/js/main.js',
index:'./src/js/'
},
output: {
path: path.join(__dirname, 'dist'),
//publicPath: '/',
filename: '[name].js'
},
mode:"development",
target: 'web',
devtool: 'source-map',
module: {
rules: [
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.bpmn$/,
use: 'raw-loader'
},
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.html$/,
use: [
{
loader: "html-loader",
//options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: '!!raw-loader!./src/views/pages/index.ejs',
filename: "./index.ejs",
excludeChunks: [ 'server', 'main' ]
}),
new HtmlWebPackPlugin({
template: '!!raw-loader!./src/views/pages/bmv.ejs',
filename: "./bmv.ejs",
excludeChunks: [ 'server', 'index' ]
}),
new webpack.NoEmitOnErrorsPlugin(),
new NodePolyfillPlugin()
]
}
configure the webpack:
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
'terser-webpack-plugin': path.resolve(__dirname, 'node_modules/terser-webpack-plugin/dist/minify.js'),
},
},
};
I am trying to configurate my NodeJs project. If I add any async/await in the code, the following error appears:
1] import _Object$defineProperty from "../../core-js/object/define-property";
[1] ^^^^^^^^^^^^^^^^^^^^^^
[1]
[1] SyntaxError: Unexpected identifier
My .babelrc:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": true
},
}
]
],
"plugins": ["#babel/plugin-transform-regenerator"]
}
My webpack.config.js is
const path = require("path")
const nodeExternals = require("webpack-node-externals")
const config = {
entry: "./src/index.js",
target: "node",
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
output: {
filename: "[name].js",
publicPath: "/client/dist/",
chunkFilename: "[name].bundle.js",
path: `${__dirname}/client/dist`
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: ["node_modules/"],
include: [/src/],
use: {
loader: "babel-loader"
},
plugins: ["#babel/plugin-transform-runtime"]
},
{
test: /\.(woff2?|eot|ttf|otf)$/,
loader: "file-loader",
options: {
limit: 10000,
name: "[name].[hash:7].[ext]"
}
}
]
},
watch: true
}
module.exports = config
I tried to add #babel/plugin-transform-runtime, but it did not solve my problem.
Could somebody give me the clue, what I am doing not right?
Thanks in advance
Try adding babel-polyfill to your project, and as an entry for webpack:
yarn add babel-polyfill -D
and in webpack.config.js:
const path = require("path")
const nodeExternals = require("webpack-node-externals")
const config = {
entry: {
polyfill: "babel-polyfill",
app: "./src/index.js"
},
...
I use karma + jasmine to write test cases for vue and webpack, and it once worked. But after I upgrade vue for 1 to 2, and update vue-loader accordingly, it starts to give error.
Now when I run karma start karma.config.js, it give me error like:
Chrome 53.0.2785 (Windows 7 0.0.0) ERROR
Uncaught SyntaxError: Unexpected token export
at test/index.js:8995
My karma.config.js is:
var webpackConf = require('./webpack.config.js')
delete webpackConf.entry
module.exports = function (config) {
config.set({
browsers: ['Chrome'],
frameworks: ['jasmine'],
reporters: ['progress', 'html'],
htmlReporter: {
outputFile: 'tests/unit-test.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: 'A sample project description',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
},
// this is the entry file for all our tests.
files: [
{pattern: './test/index.js', watched: false},
],
// we will pass the entry file to webpack for bundling.
preprocessors: {
'./test/index.js': ['webpack']
},
// use the webpack config
webpack: webpackConf,
// avoid walls of useless text
webpackMiddleware: {
noInfo: true
},
singleRun: true,
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-webpack',
'karma-htmlfile-reporter'
]
})
}
My webpack.config.js is:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: ['webpack-hot-middleware/client','./index.js'],
output: {
path: path.resolve(__dirname, '../output/static'),
publicPath: '/',
//filename: '[name].[hash].js'
filename: 'main.js'
//chunkFilename: '[id].[chunkhash].js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
},
extensions: ['', '.js', '.vue']
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?presets=es2015',
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'index.html'),
inject: true
})
]
}
Looks like the es6 export syntax is not translated correctly. Also, I did not know where to take a look at the test/index.js:8995 because this is auto generated by webpack. The real index.js is quite simple, just 2 lines:
var testsContext = require.context('.', true, /\.spec\.js$/)
testsContext.keys().forEach(testsContext)
How to debug this and what can I do to solve the problem?