I was trying to run Cucumber files (.feature) with last version of Cypress 10.0.3, but I couldn't run it. After I finished the configuration, I could see the featur file in Cypress interface but if I try to run it, Cypress give me an error back (see screenshot).
My webpack file:
module.exports = {
resolve: {
extensions: [".cy.ts", ".cy.js"]
},
node: {fs: "empty", child_process: "empty", readline: "empty"},
module: {
rules: [
{
test: /\.cy.ts$/,
exclude: [/node_modules/],
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.cy.feature$/,
use: [
{
loader: "cypress-cucumber-preprocessor/loader"
}
]
},
{
test: /\.cy.features$/,
use: [
{
loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
}
]
}
]
}
};
My Cypress.config.ts:
import { defineConfig } from "cypress";
export default defineConfig({
fileServerFolder: ".",
fixturesFolder: "./cypress/fixtures",
video: true,
videosFolder: "./cypress/videos",
videoUploadOnPasses: false,
screenshotsFolder: "./cypress/screenshots",
chromeWebSecurity: false,
requestTimeout: 60000,
responseTimeout: 60000,
defaultCommandTimeout: 60000,
reporter: "cypress-multi-reporters",
numTestsKeptInMemory: 1,
reporterOptions: {
configFile: "cypress/reporter-config.json",
},
e2e: {
specPattern: "**/*.cy.feature",
// testFiles:
},
})
Screenshot:
https://user-images.githubusercontent.com/93645203/172401189-52032d06-7ffa-45a6-8be7-fc7df2ecdf4e.png
Please install cypress-cucumber-preprocessor#l1.0.0 for a fix for this issue.
It's fixed with Cypress V 10.3.0
Related
I am struggling with setting up my webpack config properly... I tried many things without result. When I am trying to compile bundle I receive loads of errors regarding path to .svg files however the path is ok.
> ERROR in ./client/components/home-page/SocialMediaAuthentication.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './assets/icons/facebook.svg' in '/Users/elegancko/Projects/YesChef/client/components/home-page'
at factoryCallback (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/Compilation.js:276:40)
at factory (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
at resolver (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3694:9
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:356:16
at iteratorCallback (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:934:13)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:840:16
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3691:13
at apply (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:21:25)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:56:12
at resolvers.normal.resolve (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
# ./client/components/home-page/SocialMediaAuthentication.js 11:0-43
# ./client/components/home-page/ForgotPasswordForm.js
# ./client/App.js
# ./client/index.js
Does anyone know how to fix it? Please find the code of my webpack config below
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/client/index.html'),
filename: 'index.html',
inject: true
})
const ExtractWebpackPluginConfig = new ExtractWebpackPlugin({
filename: 'index.css',
allChunks: true
})
module.exports = {
entry: './client/index.js',
output: {
path: path.join(__dirname, '/build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './client',
hot: true,
historyApiFallback: true,
port: 3000
},
module: {
loaders: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'standard-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
},
{
test: /\.scss$/,
loader: ExtractWebpackPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.css$/,
exclude: [/\.global\./, /node_modules/],
loader: ExtractWebpackPlugin.extract(
{
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
autoprefixer: true,
minimize: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
})
},
{
test: /\.css/,
include: [/\.global\./, /node_modules/],
loader: ExtractWebpackPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'font/[name].[ext]',
},
},
],
},
{
test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
exclude: /\.glyph.svg/,
use: [
{
loader: 'url-loader',
options: {
limit: 6000,
name: 'image/[name].[ext]',
},
},
],
},
{
test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,
exclude: /\.glyph.svg/,
use: [
{
loader: 'file-loader',
options: { name: 'audio/[name].[ext]' },
},
],
},
]
},
plugins: [
HtmlWebpackPluginConfig,
ExtractWebpackPluginConfig
]
}
I was looking at many tutorials how to set webpack properly to use SASS + CSS modules + Webpack (I am not using Create React App package)
its like looking for svg in different path
And paths
The problem was in path to svg files.
I can't import background image through scss file in my react project using webpack. I followed all the recent advice on stackexchange but to no avail. I get this error message when I try to import images through either scss or css files:
Module not found: Error: Can't resolve 'marker.svg'
in the scss file
.marker {
background-image: url('./marker.svg');
scss config in webpack
{
test: /\.s[ac]ss$/,
use: [{
loader: 'style-loader',
options: { sourceMap: IS_DEV }
}, {
loader: 'css-loader',
options: {
localIdentName: '[hash:base64:5]',
modules: true,
sourceMap: IS_DEV
}
}, {
loader: 'postcss-loader',
options: { sourceMap: IS_DEV }
}, {
loader: 'sass-loader',
options: {
sourceMap: IS_DEV,
}
}]
},
image config in webpack
{
test: /\.(svg|png|jpg)$/,
use: {
loader: 'url-loader',
loader: 'svg-url-loader',
loader: 'file-loader',
loader: 'resolve-url-loader',
},
},
devserver config
devServer: {
historyApiFallback: true,
hot: true,
contentBase: dest,
compress: true,
port: 9000,
publicPath: 'http://localhost:9000/dest',
},
Is it the devserver? css-module? sourceMap? I have trouble importing image files in css as well. Please help
If you are using css-loader ^3.0.0 you should set url: false (marked with "---->"):
...
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: {
-----> url: false,
importLoaders: 2,
modules: {
mode: 'local',
localIdentName: isProduction ? '[hash:base64:5]' : '[local]_[hash:base64:5]'
},
},
},
{ loader: 'postcss-loader' },
{ loader: 'sass-loader', options: {
includePaths: ['./src']
}
},
],
})
},
{
test: /\.(svg|png)$/,
use: {
loader: 'url-loader', options: {
name: 'assets/[hash].[ext]',
limit: 5000,
},
}
},
...
use resolve-url-loader before sass-loader like so
{
test: /\.s[ac]ss$/,
use: [{
loader: 'style-loader',
options: { sourceMap: IS_DEV }
}, {
loader: 'css-loader',
}, {
loader: 'postcss-loader',
},
{ loader: 'resolve-url-loader', }
{
loader: 'sass-loader',
options: {
sourceMap: IS_DEV,
}
}]
},
My scss files are not getting compiled. It doesn't understand what I do with my code. I want to be able to use Sass instead of CSS but I can't find the right way to compile Sass.
I am using the webpack template with Vue.js
My webpack config file looks like this:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/main.js',
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/,
use: [ 'style-loader','css-loader','sass-loader' ],
loaders: ['style', 'css', 'sass']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
One way of doing it is to have a single scss file as an entry. This is where all your different scss file gets imported. Something like this. Then you import that scss file in source code of your js entry file (in this case ./src/main.js). So when webpack reads your main.js it will see import './myscssfile.scss' and looks for a loader (or I think it does). Here is how I do my scss module in webpack2:
module: {
rules: [
// my js stuff
{ test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },
// my scss stuff
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'autoprefixer-loader',
options: {
browsers: 'last 2 version'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
}
]
}
I hope it works.
Just use <style lang="sass"></style in your component. Let me know if it helps.
WEBPACK # 2.2
WEBPACK-MERGE # 2.4
I am using webpack merge to do a smart dev or production config.
My start script looks like
}
"scripts": {
"start": "webpack --env=production & node start.js",
"dev": "webpack-dev-server --env=dev",
},
and my webpack-config looks like this:
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = function(env) {
return {
output: {
path: '/public/',
filename: 'index.js',
publicPath: '/public/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader",
publicPath: "/public/",
}),
},
],
},
resolve: {
extensions: ['.js', '.css'],
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(env) },
}),
new ExtractTextPlugin({
filename: "bundle.css",
disable: false,
allChunks: true,
}),
],
}
}
module.exports = function(env) {
return webpackMerge(baseConfig(env), env === 'dev' ? {
devtool: 'cheap-module-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/index.js',
],
devServer: {
hot: true,
publicPath: '/public/',
proxy: {
"/api/**": "http://localhost:3333",
"/auth/**": "http://localhost:3333",
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
} : {
devtool: 'inline-source-map',
entry: [
'./app/index.js',
],
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
new webpack.optimize.AggressiveMergingPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
],
})
}
Webpack successfully compiles locally but when I attempt to deploy it to heroku, the output in papertrail is as seen below:
> webpack --env=production & node start.js
Config did not export an object.
Any ideas?
I had the same issue, I forgot to install webpack dev server:
npm install --save-dev webpack-dev-server
Hope it helps!
After hours of pulling my hair out, I finally got webpack to run on an existing project, that I'm trying to port to Laravel.
When I run webpack it compiles now...
...but when I run gulp in the root, which executes Elixir, I get this error message:
node_modules/webpack/lib/NullFactory.js:9 undefined is not a function
My webpack.config.js looks like this:
var path = require('path');
var webpack = require('webpack');
var debug = process.env.NODE_ENV !== "production";
module.exports = {
devtool: 'source-map',
entry: debug ? [
'webpack-hot-middleware/client',
'./resources/assets/js/client/index'
] : [
'./resources/assets/js/client/index'
],
output: {
path: path.join(__dirname, 'public/js'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: debug ? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false,warnings: false })
],
resolve: {
root: [
path.resolve('./resources/assets/js/client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'resources/assets/js/client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'resources/assets/js/client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
},
{
test: /\.json?$/,
loader: 'json'
},
{ test: /\.html$/, loader: "html" }
/* {
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}*/
]
}
};
Ok, I have very outdated version of Node... upgrading fixed it.