Related
I'm trying to configure cypress with a working configuration of webpack with React and Typescript. It seems to me that the babel-loader is not picking up the cypress/support/components.ts file because my webpack entry is ./src/index.tsx and the cypress folder is on the root not inside src.
Here is the error I'm getting...
========
Error: The following error originated from your test code, not from Cypress.
Module parse failed: Unexpected token (28:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Alternatively, can be defined in cypress/support/component.d.ts
| // with a at the top of your spec.
declare global {
| namespace Cypress {
| interface Chainable {
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
===========
Here is my cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
component: {
devServer: {
framework: 'react',
bundler: 'webpack',
webpackConfig: require('./webpack.dev'),
},
includeShadowDom: true,
},
});
Here is my webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
entry: {
main: './src/index.tsx',
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
],
module: {
rules: [
{
test: /\.(js|ts)x$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
},
{
test: /\.svg$/,
use: [
{
loader: '#svgr/webpack',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
],
},
{
test: /\.(woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/fonts/[name][ext][query]',
},
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'],
plugins: [new TsconfigPathsPlugin()],
},
};
Here is my webpack.dev.js
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devServer: {
port: '9500',
static: {
directory: path.join(__dirname, 'src'),
},
open: false,
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', // 2) injects styles into DOM
'css-loader', // 1) turns css into commonjs
],
},
],
},
devtool: 'eval-source-map',
});
Again this config is working and will build, the issue I'm have is bringing in Cypress using Typescript for our testing suite.
I've tried all sorts of different configs and using ts-loader with babel-loader, but I feel like I'm just missing how to get webpack to "pick up" the .ts files in the Cypress folder with is outside of my src.
Any suggestions are very much appreciated!
I've just converted one of my React components to use lazy loading and although it builds OK, I'm getting a scrip-src CSP error because the chunk is attempting to load over HTTP instead of HTTPS which the site is running. (If I switch CSP off, I get a mixed-content error so it isn't the CSP itself that's causing the problem )
Content Security Policy: The page's settings blocked the loading of a resource at http://passport.local//app/assets/bundle/1.bundle.js ("script-src"). bootstrap:128
I'm using Webpack 4.46.0
Am I missing a setting to force it to use the same protocol as the main application?
Many Thanks.
Neil
My webpack config is below
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env, argv ) =>
{
const IS_DEVELOPMENT = argv.mode === "development";
const IS_PRODUCTION = argv.mode === "production";
let plugins = [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: path.join('..', 'css', 'app.css'),
//chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
new webpack.DefinePlugin({
'__DEV__': JSON.stringify(true),
'__API_HOST__': JSON.stringify('https://passport.local/'),
}),
] ;
return {
devtool: 'source-map',
optimization: {
minimize: IS_PRODUCTION
},
entry: {
main: [
'./_devapp/app.js',
'./_devapp/css/app.scss'
],
login: [
'./_devapp/login.js',
]
},
output: {
path: path.resolve(__dirname, 'assets', 'bundle'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
alias: {
ui: path.resolve(__dirname, '_devapp/ui/'),
root: path.resolve(__dirname, '_devapp/')
}
},
module: {
rules: [
{
test: /\.(js|jsx|tsx|ts)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-typescript'
],
plugins: [
["#babel/plugin-proposal-decorators", {"legacy": true}],
'#babel/plugin-syntax-dynamic-import',
['#babel/plugin-proposal-class-properties', {"loose": true}],
["#babel/plugin-proposal-private-property-in-object", { "loose": true }],
["#babel/plugin-proposal-private-methods", {"loose": true}]
]
}
},
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
},
},
'css-loader',
'postcss-loader',
'sass-loader'
],
},
{
test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '../css/[hash].[ext]'
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
},
externals: {
myApp: 'myApp',
},
plugins: plugins,
};
}
I managed to resolve this. It was caused by a webpack_public_path definition buried in my code. I'd inherited this line in the react site template I used many years ago and never knew what it did... until now:
__webpack_public_path__ = `${window.STATIC_URL}/app/assets/bundle/`;
${window.STATIC_URL} is (at least on my platform) an http:// constant and overrides the https:// that the main site is running on.
Commenting out this line resolved the problem :-)
Trying to convert an old system off bower into npm using webpack, and grunt webpack. Just trying to use webpack to load in NPM files, not run anything else, and the rest of the grunt file finishes loading and uglifying and stuff, and runs its own node server. It gets to this point and freezes and never comes back.
Loading "grunt-webpack" plugin
Registering "/Users/***/***/***/node_modules/grunt-webpack/tasks" tasks.
Loading "webpack-dev-server.js" tasks...OK
+ webpack-dev-server
Loading "webpack.js" tasks...OK
+ webpack
Running "webpack" task
Here's my grunt code (super basic obviously)
webpack: {
options: require("./config/webpack.dev.js"),
},
Here's that dev file
const webpack = require('webpack');
const helpers = require('./helpers');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const ngInventory = require('./ng1-vendor-index.js');
const common = require('./webpack.common.js');
const ENV = process.env.NODE_ENV = process.env.ENV = 'dev';
module.exports = merge(common(ENV), {
devtool: 'source-map',
module: {
rules: [
{
test: /\.(ts|js)$/,
loaders: ['angular-router-loader'],
},
{
test: /\.((s*)css)$/,
use: [{
loader: 'style-loader',
},{
loader: 'css-loader',
},{
loader: 'sass-loader',
}]
},
{
test: /src\/.+\.(ts|js)$/,
exclude: /(node_modules|\.spec\.ts$)/,
loader: 'istanbul-instrumenter-loader',
enforce: 'post',
options: {
esModules: true
}
}
]
},
debug: true,
devTool: 'eval',
plugins: [
new ConcatPlugin({
uglify: false,
sourceMap: true,
name: 'vendor',
outputPath: './',
fileName: '[name].[hash].js',
filesToConcat: ngInventory.vendor1
}),
new BaseHrefWebpackPlugin({ baseHref: '/'}),
new HtmlWebpackPlugin({
favicon: helpers.root('client/assets/image/favicon.png'),
template: "./client/index.html",
filename: "./client/index.html",
}),
new webpack.NoEmitOnErrorsPlugin(),
],
});
And here is the common file:
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals')
const helpers = require('./helpers');
module.exports = env => ({
entry: {
server: './server/app.js',
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
path: helpers.root(`dist/${env}`),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
},
externals: [nodeExternals()],
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
include: [
helpers.root('client'),
],
loader: 'html-loader'
},
{
test: /\.((s*)css)%/,
include: [
helpers.root('client/app'),
helpers.root('client/components'),
],
exclude: 'node_modules/',
loaders: ['to-string-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(woff|woff2|eot|tts)$/,
use: [{
loader: 'file-loader'
}]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(env)
}
}),
new webpack.ContextReplacementPlugin(/\#angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client')),
]
});
A sample from the vendor index file:
const helper = require('./helpers');
exports.vendor1 = [
helper.root('node_modules/lodash/lodash.js'),
helper.root('node_modules/lodash-deep/lodash-deep.js'),
...
...
]
I'm just really not sure what to do, couldn't bring up any google results or stack results because theres no errors happening either. I've tried all verbose levels of logging all to no avail. What in the world am I missing?
As the documentation shows, you haven't configured any targets, like dev or prod. You've only specified options. You want
webpack: {
options: {},
dev: require("./config/webpack.dev.js"),
},
As an aside, there's no benefit to using Webpack with Grunt.
I try to upgrade my app from webpack 2 to webpack 4.16.5.
Because I want not again end up in a hard to understand some hundreds line config, I start with a minimal config. This is my current:
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const context = path.resolve(__dirname, "app");
module.exports = {
entry: {
home: "./index.js"
},
context,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
resolve: {
extensions: [".js", ".jsx", ".css", "json"],
modules: [path.resolve(__dirname, "node_modules"), context]
}
};
But I run in problems importing the CSS files from react-toolbox i.e.:
import Dialog from 'react-toolbox/lib/dialog';
in a js file and also
#import "react-toolbox/lib/button/theme.css";
causes errors like this:
ERROR in ../node_modules/react-toolbox/lib/switch/theme.css (../node_modules/css-loader!../node_modules/postcss-loader/src!../node_modules/sass-loader/lib/loader.js!../node_modules/react-toolbox/lib/switch/theme.css)
Module build failed (from ../node_modules/css-loader/index.js):
Error: composition is only allowed when the selector is single: local class name not in ".disabled", ".disabled" is weird
Does anyone have a working application with wbpack4 and react-toolbox? Also, any hints on what may cause these errors are welcome!
I'm learning react.js with the js stack from scratch tutorial and try to using react-toolbox components.
Finnaly, i have a working demo with webpack 4 and the react-toolbox, it's based on the react-toolbox-example.
This is my settings:
add css-modules related packages
$ npm install postcss postcss-cssnext postcss-import postcss-loader css-loader style-loader
add a postcss.config.js
module.exports = {
plugins: {
'postcss-import': {
root: __dirname,
},
'postcss-cssnext': {}
},
};
add a webpack rule
...
{ test: /\.css$/, use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1,
localIdentName: '[name]--[local]--[hash:base64:8]'
}
},
'postcss-loader'
]},
...
add cmrh.conf.js - Using the css-modules-require-hook for SSR（Optional）
module.exports = {
generateScopedName: '[name]--[local]--[hash:base64:8]'
}
You can see all the settings in here, hope it will work for you.
I have a react/express project
I want to be able to customize the Bootstrap 4 and output a CSS file which will contain the customized boostrap.css.
I have npm installed the loaders bootstrap needs ( postcss-loader,sass-loader,style-loader etc), although in web I saw an example with ExtractTextPlugin in order to get output file
when I run the webpack config I get an error
" throw new Error("'output.filename' is required, either in config file or as --output-filename");"
Any tutorial/help how to accomplish compiling customized bootstrap in seperate output file?
webpack config
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: './src/client/client.js',
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:
[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
}
]
},
};
module.exports = {
// root file for the client/browser app
entry: './src/client/styles/main.scss',
// output file and its location
output: {
filename: 'styles2.css',
path: path.resolve(__dirname,'public'),
},
module: {
loaders: [
// ...
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
};
You need to remove the extra module.exports. I do not see the need to have two of these as you can simply achieve the same thing inside a single module.exports.
You can achieve this like so:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
//root file for the client/browser app
entry: [
'./src/client/client.js',
'./src/client/styles/main.scss'
],
//output file and its location
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'public'),
},
//run babel for every filename
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets:[
'react',
'stage-0',
[
'env',
{
targets:
{
browsers:
['last 2 versions']
}
}
]
]
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css-loader!sass-loader')
}
],
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true,
})
]
},};