I am trying to configure my application (https://github.com/freeCodeCamp/meeting-for-good) for testing. I am using jest. However, I get an error when I run my test. It looks like path to my AboutDialog component is failing to transpile.
zach#zach-VirtualBox:~/Documents/Code/fcc-for-good/meeting-for-good$ npm run test
> meeting-for-good#1.0.12 test /home/zach/Documents/Code/fcc-for-good/meeting-for-good
> cross-env NODE_ENV=test jest
FAIL __tests__/test.js
● Test suite failed to run
/home/zach/Documents/Code/fcc-for-good/meeting-for-good/client/components/AboutDialog/about-dialog.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.AboutDialog {
^
SyntaxError: Unexpected token .
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (client/components/AboutDialog/AboutDialog.js:7:20)
at Object.<anonymous> (__tests__/test.js:2:20)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 8.204s
Ran all test suites.
I am trying to import my AboutDialog component to my test.
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import cssModules from 'react-css-modules';
import PropTypes from 'prop-types';
import styles from './about-dialog.css';
const inlineStyles = {
modal: { content: { width: '630px', maxWidth: '630px' }, bodyStyle: { paddingTop: 10, fontSize: '25px' } },
};
const AboutDialog = (props) => {
const { cbOpenModal, openModal } = props;
const actions = [
<FlatButton label="close" primary onTouchTap={() => cbOpenModal()} />,
];
return (
<Dialog
contentStyle={inlineStyles.modal.content}
bodyStyle={inlineStyles.modal.bodyStyle}
actions={actions}
modal
styleName="AboutDialog"
open={openModal}
>
<h1 styleName="titleStyle">Meeting for Good</h1>
<h6 styleName="versionStyle">Version {process.env.versionNumber}</h6>
<h4 styleName="descStyle">THE BEST MEETING COORDINATION APP</h4>
<h6>Created by campers from FreeCodeCamp</h6>
<h6> License and GitHub Repository</h6>
</Dialog>
);
};
AboutDialog.propTypes = {
cbOpenModal: PropTypes.func.isRequired,
openModal: PropTypes.bool.isRequired,
};
export default cssModules(AboutDialog, styles);
My test. If I remove the AboutDialog import from my test , the test suite runs.
import React from 'react';
import AboutDialog from '../client/components/AboutDialog/AboutDialog';
import { shallow } from 'enzyme';
describe('Test', () => {
it('should test', () => {
});
});
My .babelrc file.
{
"presets": ["react", "es2015", "stage-1"],
"plugins": [
"transform-decorators-legacy",
"react-hot-loader/babel",
["transform-runtime", { "polyfill": false, "regenerator": true }]
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
My package.json
{
"name": "meeting-for-good",
"version": "1.0.12",
"description": "Schedule events with ease!",
"homepage": "https://github.com/FreeCodeCamp/meeting-for-good/#readme",
"main": "index.js",
"scripts": {
"clean": "rimraf build",
"build:server": "babel -d ./build ./server -s",
"build:client": "cross-env NODE_ENV=production babel-node ./tools/build.js",
"build": "npm run clean && npm run copy && npm run build:server && npm run build:client",
"start": " node ./build/app.js",
"copy": "node tools/copy.js",
"serve": "npm run clean && npm run copy && npm run build:server && npm run dev",
"dev": "cross-env NODE_ENV=development node -r dotenv/config ./build/app.js",
"test": "cross-env NODE_ENV=test jest",
"heroku-postbuild": "npm run build",
"postinstall": "node tools/postInstall.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FreeCodeCamp/meeting-for-good"
},
"author": "Jean Philip de Rogatis <jrogatis#rogatis.eti.br>",
"contributors": [
{
"name": "Aniruddh Agarwal",
"email": "aaniruddh99#gmail.com"
},
{
"name": "Bob Sutton",
"email": "anischyros#gmail.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/FreeCodeCamp/meeting-for-good/issues"
},
"engines": {
"node": "^8.0.0",
"npm": "^5.0.0"
},
"dependencies": {
"autobind-decorator": "^2.1.0",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.2.1",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.22.0",
"babel-runtime": "^6.25.0",
"bluebird": "^3.5.0",
"body-parser": "^1.17.2",
"chai": "^4.1.0",
"chalk": "^2.0.1",
"chroma-js": "^1.3.3",
"chunk-manifest-webpack2-plugin": "^1.0.1",
"clipboard": "^1.6.1",
"compression": "^1.7.0",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"copy-webpack-plugin": "^4.0.1",
"cpy-cli": "^1.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"dialog-polyfill": "^0.4.6",
"dotenv": "^4.0.0",
"ejs": "^2.5.5",
"email-templates": "^2.5.6",
"es6-promise": "^4.1.1",
"express": "^4.15.3",
"express-session": "^1.15.4",
"express-sessions": "^1.0.6",
"extract-text-webpack-plugin": "^2.1.0",
"fast-json-patch": "^2.0.4",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.1",
"google-calendar": "^1.3.2",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.29.0",
"image-webpack-loader": "^3.3.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jstimezonedetect": "^1.0.6",
"lodash": "^4.17.2",
"material-ui": "^0.18.5",
"mocha": "^3.4.2",
"moment": "^2.18.1",
"moment-range": "^3.0.3",
"mongoose": "^4.11.3",
"morgan": "^1.8.2",
"nodemailer": "^4.0.1",
"nodemailer-ses-transport": "^1.5.0",
"nprogress": "^0.2.0",
"offline-plugin": "^4.8.3",
"opbeat": "^4.14.2",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-google-oauth": "^1.0.0",
"passport-oauth2-refresh": "^1.0.0",
"pngquant-bin": "^3.1.1",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-update": "^15.5.2",
"react-css-modules": "^4.3.0",
"react-day-picker": "^5.5.1",
"react-dom": "^15.6.0",
"react-ga": "^2.2.0",
"react-hot-loader": "^3.0.0-beta.7",
"react-infinite": "^0.11.0",
"react-input-range": "^1.2.1",
"react-masonry-component": "^5.0.3",
"react-moment-proptypes": "^1.4.0",
"react-notification-system": "^0.2.14",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"react-tooltip": "^3.3.0",
"react-transform-hmr": "^1.0.4",
"request": "^2.81.0",
"rimraf": "^2.6.1",
"shelljs": "^0.7.7",
"style-loader": "^0.18.1",
"url-loader": "^0.5.7",
"webpack": "^2.7.0",
"webpack-assets-manifest": "^0.7.0",
"webpack-bundle-analyzer": "^2.8.3",
"webpack-config": "^7.0.0",
"write-file-webpack-plugin": "^4.0.0",
"yargs": "^8.0.1"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"babel-preset-jest": "^20.0.3",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.0.1",
"jest": "^20.0.4",
"jest-css-modules": "^1.1.0",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1",
"webpack-hot-middleware": "^2.18.2"
},
"jest": {
"transform": {
".*": "<rootDir>/node_modules/babel-jest"
}
}
}
My webpack config for development.
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSS = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const WebpackAssetsManifest = require('webpack-assets-manifest');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const cssNano = require('cssnano');
const packageJSON = require('./package.json');
const noVisualization = process.env.ANALYSE_PACK.toString() === 'false';
const lintCode = process.env.LINT_CODE.toString() === 'false';
const VENDOR_LIBS = [
'autobind-decorator',
'bluebird',
'clipboard',
'chroma-js',
'es6-promise',
'fast-json-patch',
'immutable',
'isomorphic-fetch',
'jstimezonedetect',
'lodash',
'material-ui',
'moment',
'moment-range',
'nprogress',
'react',
'react-addons-update',
'react-day-picker',
'react-tap-event-plugin',
'react-dom',
'react-css-modules',
'react-infinite',
'react-input-range',
'react-masonry-component',
'react-notification-system',
'react-router',
];
module.exports = {
context: __dirname,
entry: {
bundle: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
'./client/main.js',
],
vendor: VENDOR_LIBS,
},
output: {
path: path.resolve('./build/client'),
publicPath: '/client/',
filename: '[name].[hash].js',
},
module: {
rules: [
(!lintCode ? {
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
},
} : {}),
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
use: 'file-loader',
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1000,
},
},
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 4,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
},
],
},
{
test: /\.css$/,
exclude: [/node_modules/, /no-css-modules/],
use: [{
loader: 'style-loader?sourceMap',
},
{
loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
},
],
},
{
test: /\.css$/,
include: [/node_modules/, /no-css-modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader?sourceMap',
use: 'css-loader',
}),
},
],
},
plugins: [
(!noVisualization ?
new BundleAnalyzerPlugin({
analyzerMode: 'static',
}) : null),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.GOOGLE_ANALYTICS_ID': JSON.stringify(process.env.GOOGLE_ANALYTICS_ID),
'process.env.GOOGLE_ANALYTICS_DEBUG': JSON.stringify(process.env.GOOGLE_ANALYTICS_DEBUG),
'process.env.versionNumber': JSON.stringify(packageJSON.version),
}),
new ExtractTextPlugin('vendor.css'),
new OptimizeCSS({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: cssNano,
cssProcessorOptions: {
discardComments: {
removeAll: true,
},
canPrint: true,
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[hash].js',
minChunks: 'Infinity',
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new WriteFilePlugin({
test: /\.(html|ejs)$/,
}),
new FaviconsWebpackPlugin({
logo: './client/assets/favicons/logo.png',
icons: {
appleStartup: false,
},
background: 'transparent',
persistentCache: true,
inject: true,
}),
new HtmlWebpackPlugin({
title: 'Meeting for Good',
template: 'html-loader!./client/index.html',
filename: '../index.html',
inject: 'body',
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new WebpackAssetsManifest({
writeToDisk: true,
merge: true,
done(manifest) {
console.log(`The manifest has been written to ${manifest.getOutputPath()}`);
},
apply(manifest) {
manifest.set('manifest_version', '2');
manifest.set('start_url', '/?homescreen=1');
manifest.set('version', '1');
manifest.set('default_locale', 'en');
manifest.set('description', 'THE BEST MEETING COORDINATION APP');
manifest.set('display', 'fullscreen');
manifest.set('short_name', 'MeetingFG');
manifest.set('name', 'Meeting For Good');
manifest.set('background_color', '#FBFFFB');
manifest.set('theme_color', '#FBFFFB');
},
}),
].filter(p => p),
resolve: {
extensions: ['.js', '.css'],
},
devtool: 'source-map',
};
I figured it out. I just needed to use jest-css-modules (https://www.npmjs.com/package/jest-css-modules).
So I just have to add to make package.json
"jest": {
"transform": {
".*": "<rootDir>/node_modules/jest-css-modules"
}
}
Related
I'm trying to setup webpack in my react.js application based on this starter kit
When I start development server, application is build successfully and I can see a list of chunks generated, but then application doesn't load and I got an error in console indicating that chunks were not found.
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');
const SRC_DIR = path.join(__dirname, '/src');
const PUB_DIR = path.join(__dirname, '/public');
const DIST_DIR = path.join(__dirname, '/dist');
module.exports = {
entry: { main: `${SRC_DIR}/index.js` },
output: {
path: DIST_DIR,
chunkFilename: '[chunkhash].chunk.js',
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src/')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'source-map-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
},
},
{ loader: 'sass-loader' }
]
}
],
},
optimization: {
splitChunks: {
cacheGroups: {
css: {
test: /\.(css|sass|scss)$/,
name: 'commons',
chunks: 'all',
minChunks: 2,
enforce: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: true,
title: 'React-Redux-Webpack-Starter-Kit',
template: `${PUB_DIR}/index.html`,
filename: 'index.html',
favicon: `${PUB_DIR}/favicon.ico`,
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
},
}),
new WebpackMd5Hash(),
new Dotenv(),
],
devServer: {
port: 3003,
historyApiFallback: true,
},
};
My packate.json
{
"name": "FillRX",
"author": "Zoran Jeremic",
"email": "zoran.jeremic#gmail.com",
"licence": "UNLICENSED",
"version": "1.0.0",
"private": true,
"scripts": {
"lint": "eslint ./src",
"start": "webpack-dev-server --open --mode development --watch",
"prod": "webpack --mode production",
"build": "cross-env NODE_ENV=production && npm run prod",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#date-io/core": "^2.5.0",
"#date-io/moment": "^1.3.13",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/list": "^4.4.0",
"#fullcalendar/react": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#fullcalendar/timeline": "^4.4.0",
"#material-ui/core": "^4.9.9",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.48",
"#material-ui/pickers": "^3.2.10",
"#material-ui/styles": "^4.9.6",
"#mdx-js/react": "^1.5.8",
"#react-pdf/renderer": "^1.6.8",
"#redux-saga/core": "^1.1.3",
"apexcharts": "^3.18.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.17.0",
"babel-loader": "^8.1.0",
"change-case": "^4.1.1",
"chart.js": "^2.9.3",
"clsx": "^1.1.0",
"css-loader": "^4.2.1",
"dotenv-webpack": "^2.0.0",
"draft-js": "^0.11.5",
"formik": "^2.1.4",
"history": "^4.10.1",
"immer": "^6.0.3",
"immutable": "^4.0.0-rc.12",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"jss": "^10.1.1",
"jss-rtl": "^0.3.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.19",
"moment": "^2.24.0",
"nan": "^2.14.1",
"node-sass": "^4.14.1",
"notistack": "^0.9.9",
"nprogress": "^0.2.0",
"prismjs": "^1.20.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-app-polyfill": "^1.0.6",
"react-beautiful-dnd": "^13.0.0",
"react-big-calendar": "^0.24.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-draft-wysiwyg": "^1.14.4",
"react-dropzone": "^10.2.2",
"react-feather": "^2.0.3",
"react-helmet": "^5.2.1",
"react-markdown": "^4.3.1",
"react-modal-image": "^2.5.0",
"react-perfect-scrollbar": "^1.5.8",
"react-quill": "^1.3.5",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.2",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"sass-loader": "^9.0.3",
"socket.io-client": "^2.3.0",
"source-map-loader": "^1.0.1",
"uuid": "^7.0.3",
"webpack-dev-server": "^3.11.0",
"webpack-md5-hash": "^0.0.6",
"yup": "^0.28.3"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.8",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"html-webpack-plugin": "^4.3.0",
"mdx-loader": "^3.0.2",
"mini-css-extract-plugin": "^0.9.0",
"prettier": "^1.19.1",
"typescript": "^3.8.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
This is the error I'm getting in console:
All these chunks that are not found are generated during the application build, but I guess my configuration can't find it:
I didn't use webpack earlier so I'm not sure how to investigate this problem since error doesn't indicate what could be the problem, and google search gave me results indicating network problem which I don't think is the case here.
I would appreciate any help and suggestion.
The following configuration to the webpack should help :
{
path: DIST_DIR,
chunkFilename: "[chunkhash].chunk.js",
publicPath: "/",
}
Read more about this configutation here https://webpack.js.org/configuration/output/#outputpublicpath
Thanks
My project environment is , React with redux and redux-saga , webpack
Jenkins is used for CI/CD
since a month , we are getting a strange issue, the Jenkins (webpack) build & deployment is successful however when I access the portal it shows a blank page because of below Javascript error
Uncaught ReferenceError: saga is not defined
at Module.1148 (main.44c97d10353333934fe5.bundle.js:1)
at __webpack_require__ (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at Object.646 (main.44c97d10353333934fe5.bundle.js:1)
at __webpack_require__ (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at checkDeferredModules (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at Array.webpackJsonpCallback [as push] (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at vendor.fef8d73f71dc764a97a1.bundle.js:1
when looked at the failing file in code base the sagas.js file has "export default sagas" , so the s in sagas is truncated during build process hence the javascript error
After re-running the same build in Jenkins then it is producing a clean build and application works normally without above error
and strangely this behaviour doesn't occur on every build it is intermittent
another error similar to this is
built version of utag.js with errors
actual version of utag.js from code base
The main issue is I couldn't replicate the issue locally , I have run the webpack build on the branch which resulted in javascript error - but no luck , everytime webpack produced a clean build locally
Here are my config files
Package.json
{
"name": "portal",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "webpack-dev-server --open --inline --progress --env development --config webpack/dev.config.js",
"build:prod": "webpack --env production --config webpack/prod.config.js",
"build:test": "webpack --env test --config webpack/prod.config.js",
"stylelint": "stylelint '**/*.scss', '**/*.css'",
"stylelint:silentexit": "stylelint '**/*.scss', '**/*.css'; exit 0",
"jslint": "eslint . --fix",
"jslint:silentexit": "eslint .; exit 0",
"test": "npm run jslint && npm run test:unit",
"test:unit": "jest --colors",
"test:watch": "jest --watch --passWithNoTests",
"test:coverage": "jest --coverage -u --colors",
"storybook": "start-storybook -p 9001 -c .storybook",
"generateSvgIconComponents": "styled-svg src/icons/*.svg --size=small:18x18 --size=medium:24x24 --size=large:36x36"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#rebass/components": "^4.0.0-1",
"acorn": "^6.2.0",
"babel-plugin-react-css-modules": "^5.2.6",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"connected-react-router": "^6.5.2",
"fixed-data-table-2": "^0.8.26",
"glamor": "^2.20.40",
"history": "^4.9.0",
"html-webpack-plugin": "^3.2.0",
"javascript-excel": "^1.0.3",
"jspdf": "^1.5.3",
"jspdf-react": "^1.0.10",
"lodash": "^4.17.14",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"qs": "^6.6.0",
"react": "^16.8.2",
"react-bootstrap": "^0.32.4",
"react-compound-slider": "^2.3.0",
"react-csv": "^1.1.1",
"react-data-export": "^0.5.0",
"react-draggable": "^4.0.3",
"react-list-drag-and-drop": "^0.9.1",
"react-markdown": "^4.2.2",
"react-pdf": "^4.1.0",
"react-redux": "^6.0.1",
"react-router-dom": "^5.0.1",
"react-tooltip": "^3.10.0",
"react-virtualized": "^9.21.1",
"redux": "^4.0.1",
"redux-actions": "^2.6.4",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"styled-components": "^4.3.1",
"styled-system": "^4.2.4",
"validate.js": "^0.13.1",
"webpack-merge": "^4.2.2",
"whatwg-fetch": "^3.0.0",
"xlsx": "^0.14.3"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-react-jsx-source": "^7.5.0",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#storybook/react": "^4.1.18",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-root-import": "^6.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"clean-webpack-plugin": "^2.0.2",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^2.1.1",
"deep-freeze": "0.0.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.14.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-react": "^7.13.0",
"faker": "^4.1.0",
"html-loader": "^0.5.5",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.1",
"jest-react-hooks-mock": "^1.1.0",
"node-fetch": "^2.6.0",
"pdf2json": "^1.1.8",
"react-dom": "^16.7.0",
"redux-mock-store": "^1.5.3",
"redux-saga-testing": "^1.0.5",
"sinon": "^7.3.2",
"style-loader": "^0.23.1",
"styled-svg": "^2.4.7",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"svg-url-loader": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "4.41.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
}
}
webpack/base.config.js
'use strict'
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const dirName = __dirname.replace('webpack','');
const util = require('./util');
// cleans 'dist' folder everytime before a new build
const cleanPLugin = env => (new CleanWebpackPlugin({
root: path.join(dirName, util.getRootContext(env) ),
verbose: true,
dry: false
}));
const AnalyzerPlugin = new BundleAnalyzerPlugin(
{
analyzerMode: 'none'
}
);
const copyWebpackPlugin = env => ( new CopyPlugin([ {
from : path.join(dirName, 'src/assets/static'),
to : path.join(dirName, `dist/${util.getRootContext(env)}/assets`)
}, {
from : path.join(dirName, 'src/assets/pages'),
to : path.join(dirName, `dist/${util.getRootContext(env)}`)
}
]));
const HTMLPlugin = new HtmlWebpackPlugin({
template: path.join(dirName, 'src/scripts/index.html'),
chunksSortMode: 'none'
});
module.exports = (env) => {
// BUILDING WEBPACK
const config = {};
config.plugins = [cleanPLugin(env), AnalyzerPlugin, HTMLPlugin, copyWebpackPlugin(env)]
config.entry = ["whatwg-fetch", "babel-polyfill", path.join(dirName, '/src/scripts/index.js')]
config.output = {
path: path.join(dirName, '/dist'),
filename: '[name].build.js',
chunkFilename: '[name].bundle.js',
}
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif|woff|ttf|woff2)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
{
test: /\.(css|less)$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
config.resolve = {
extensions: [ '.js', '.jsx', '.json', '.css' ],
alias: {
DesignSystem: path.resolve(dirName, 'src/design-system/'),
Icons: path.resolve(dirName, 'src/icons/'),
Scripts: path.resolve(dirName, 'src/scripts/'),
CMS: path.resolve(dirName, 'cms/'),
}
}
config.node = { fs: 'empty' }
return config
}
webpack/prod.config.js
const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const util = require('./util');
const dirName = __dirname.replace('webpack','');
module.exports = env => (merge(baseConfig(env),
{
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial'
}
}
},
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
mangle: false,
keep_classnames: true,
keep_fnames: true
}
})
]
},
output: {
path: path.join(dirName, `./dist/${util.getRootContext(env)}`),
publicPath: `/${util.getRootContext(env)}/`,
chunkFilename: '[name].[chunkhash].bundle.js',
filename: '[name].[chunkhash].bundle.js'
},
mode: 'production'
}
));
npm run build:prod is the command which runs this build
Any tips or help would be greatly appreciated.
Thanks!!
I am getting TypeError: __webpack_require__.i(...) is not a function error when I am trying import FullCalendar from '#fullcalendar/react' on my project which is configured with webpack.
I tried manipulating webpack.config.dev.js but couldn't figure out how to implement it in a right way.
whenever I am trying to import any of the component from #fullcalendar it is throwing me the webpack error
webpack.config.dev.js:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
import CopyWebpackPlugin from 'copy-webpack-plugin';
export default {
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
entry: [
// must be first entry to properly set public path
'babel-polyfill',
'./src/webpack-public-path',
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
// new CopyWebpackPlugin([ { from: './src/scripts', to: 'assets' } ]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
// template: 'src/index.ejs',
// minify: {
// removeComments: true,
// collapseWhitespace: true
// },
// inject: true
// }),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
noInfo: true, // set to false to see a list of every file being bundled.
options: {
sassLoader: {
includePaths: [path.resolve(__dirname, 'src', 'scss')]
},
context: '/',
postcss: () => [autoprefixer],
}
})
],
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }
]
}
};
Package.json File:
{
"name": "MedFix",
"version": "1.0.0",
"description": "Project Tracking and Management",
"engines": {
"npm": ">=3"
},
"scripts": {
"start": "npm-run-all --parallel open:src",
"open:src": "babel-node tools/srcServer.js",
"test": "mocha -w tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"open:dist": "babel-node tools/distServer.js",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist build:html",
"build": "babel-node tools/build.js && npm run open:dist",
"analyze-bundle": "babel-node ./tools/analyzeBundle.js"
},
"author": "789",
"license": "123",
"dependencies": {
"#fullcalendar/bootstrap": "4.1.0",
"#fullcalendar/core": "4.1.0",
"#fullcalendar/daygrid": "4.1.0",
"#fullcalendar/interaction": "4.1.0",
"#fullcalendar/list": "4.1.0",
"#fullcalendar/react": "^4.1.0",
"#fullcalendar/timegrid": "4.1.0",
"#material-ui/core": "4.0.1",
"auth0-js": "7.6.1",
"auto-bind": "1.2.0",
"awesomplete": "1.1.2",
"axios": "0.16.2",
"babel-helper-bindify-decorators": "6.24.1",
"block-ui": "2.70.1",
"bootstrap-daterangepicker": "3.0.3",
"bootstrap-tagsinput": "0.7.1",
"cheerio": "1.0.0-rc.2",
"color": "2.0.0",
"copy-webpack-plugin": "4.0.1",
"country-currency-map": "1.0.9",
"country-data": "0.0.31",
"country-list": "2.1.0",
"currency-codes": "1.5.0",
"currency-symbol-map": "4.0.4",
"download-url-file": "0.0.2",
"downloadjs": "1.4.7",
"enzyme": "2.6.0",
"expect": "1.20.2",
"express": "4.15.3",
"fs": "0.0.1-security",
"fullcalendar": "3.10.0",
"geo-tz": "4.0.2",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jsdom": "11.1.0",
"mini-css-extract-plugin": "0.7.0",
"mocha": "3.4.2",
"mock-local-storage": "1.0.3",
"moment": "2.18.1",
"moment-timezone": "0.5.21",
"npm": "4.6.1",
"object-assign": "4.1.0",
"opentok-react": "0.7.0",
"path": "0.12.7",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-autobind": "1.0.6",
"react-autocomplete": "1.8.1",
"react-autosize-textarea": "0.4.8",
"react-autosuggest": "9.3.2",
"react-big-calendar": "0.14.0",
"react-block-ui": "1.1.1",
"react-bootstrap-daterangepicker": "3.4.0",
"react-bootstrap-datetimerangepicker": "2.0.4",
"react-bootstrap-table": "4.0.3",
"react-bootstrap-time-picker": "1.0.3",
"react-bootstrap-typeahead": "3.2.0",
"react-bootstrap-validation": "0.1.11",
"react-bootstrap-xeditable": "0.2.7",
"react-calendar": "2.14.0",
"react-checkbox-group": "4.0.1",
"react-ckeditor-component": "1.0.7",
"react-confirm-alert": "2.0.2",
"react-cookie-consent": "1.7.0",
"react-credit-card-input": "1.0.9",
"react-currency-input": "1.3.4",
"react-datepicker": "1.5.0",
"react-device-detect": "1.6.2",
"react-display-name": "0.2.4",
"react-dom": "15.4.1",
"react-dropzone": "4.2.7",
"react-edit-inline": "1.0.8",
"react-escape-html": "1.0.5",
"react-geocode": "0.1.2",
"react-google-autocomplete": "1.0.18",
"react-html-parser": "2.0.2",
"react-idle": "3.0.0",
"react-imask": "3.4.0",
"react-input-mask": "0.9.1",
"react-js-pagination": "3.0.2",
"react-ladda": "5.0.7",
"react-loadable": "5.3.1",
"react-loading": "2.0.2",
"react-maskedinput": "4.0.1",
"react-modal-bootstrap": "1.1.1",
"react-moment": "0.7.0",
"react-notification-system": "0.2.15",
"react-paginate": "5.0.0",
"react-pdf": "3.0.5",
"react-pull-to-refresh": "1.1.2",
"react-redux": "5.0.1",
"react-redux-toastr": "7.2.6",
"react-reorder": "3.0.0-alpha.6",
"react-responsive-modal": "2.0.1",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-rte": "0.11.0",
"react-scripts": "1.1.4",
"react-scrollable-anchor": "0.6.1",
"react-select": "1.0.0-rc.4",
"react-signature-pad-wrapper": "0.0.9",
"react-star-rating-component": "1.4.1",
"react-stripe-checkout": "2.6.3",
"react-switch": "3.0.4",
"react-tag-input": "5.0.2",
"react-tagsinput": "3.17.0",
"react-text-mask": "5.1.0",
"react-textarea-count": "1.0.3",
"react-times": "3.0.0",
"react-timezone": "2.1.0",
"react-toastify": "4.0.1",
"react-tooltip": "3.6.1",
"react-typeahead": "2.0.0-alpha.8",
"react-validation": "3.0.7",
"react-x-editable": "0.0.5-beta",
"reactstrap": "6.0.1",
"recharts": "1.0.1",
"redux": "3.6.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.1.0",
"sortablejs": "1.7.0",
"sweetalert": "1.1.3",
"text-mask-addons": "3.7.1",
"timezoner": "0.2.0",
"toastr": "2.1.2",
"video-react": "0.13.6"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.51",
"#babel/preset-react": "^7.0.0-beta.51",
"autoprefixer": "6.5.4",
"babel-cli": "6.18.0",
"babel-core": "6.20.0",
"babel-loader": "6.2.10",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-polyfill": "6.20.0",
"babel-preset-env": "1.3.2",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.16.0",
"browser-sync": "2.18.5",
"chalk": "1.1.3",
"compression": "1.6.2",
"compression-webpack-plugin": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"css-loader": "0.26.1",
"datatables.net": "1.10.16",
"enzyme": "2.6.0",
"express": "4.15.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.24.1",
"identity-obj-proxy": "3.0.0",
"json-loader": "0.5.4",
"mockdate": "2.0.1",
"node-sass": "4.12.0",
"npm-run-all": "3.1.2",
"open": "0.0.5",
"opn-cli": "^3.1.0",
"optimize-css-assets-webpack-plugin": "3.2.0",
"postcss-loader": "1.2.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"redux-immutable-state-invariant": "1.2.4",
"redux-logger": "3.0.6",
"replace": "0.3.0",
"riek": "1.1.0",
"rimraf": "2.5.4",
"sass-loader": "6.0.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-bundle-analyzer": "2.1.1",
"webpack-cli": "^3.3.0",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.17.1"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
},
"babel": {
"presets": [
"react",
"stage-1"
],
"env": {
"development": {
"presets": [
"env",
"react-hmre"
]
},
"production": {
"presets": [
[
"env",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
},
"test": {
"presets": [
"env"
]
}
}
}
}
Please help me with the problem when building the project.
I'm using webpack 4.17.2, and when I try to run the build, I'm constantly getting an error.
As you can see from the configuration files, I declared the plug-in quite correctly, but this error goes out again and again
Cause:
ERROR in Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin
There is configs:
utils.js
const fs = require('fs');
const path = require('path');
module.exports = {
parseVersion,
root,
isExternalLib
};
const parseString = require('xml2js').parseString;
// return the version number from `pom.xml` file
function parseVersion() {
let version = null;
const pomXml = fs.readFileSync(path.resolve(__dirname, '../../asterisk-prime/pom.xml'), 'utf8');
parseString(pomXml, (err, result) => {
if (err) {
throw new Error('Failed to parse pom.xml: ' + err);
}
if (result.project.version && result.project.version[0]) {
version = result.project.version[0];
} else if (result.project.parent && result.project.parent[0] && result.project.parent[0].version && result.project.parent[0].version[0]) {
version = result.project.parent[0].version[0];
}
});
if (version === null) {
throw new Error('pom.xml is malformed. No version is defined');
}
return version;
}
const _root = path.resolve(__dirname, '..');
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}
function isExternalLib(module, check = /node_modules/) {
const req = module.userRequest;
if (typeof req !== 'string') {
return false;
}
return req.search(check) >= 0;
}
webpack.common.js
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rxPaths = require('rxjs/_esm5/path-mapping');
const utils = require('./utils.js');
module.exports = (options) => ({
resolve: {
extensions: ['.ts', '.js'],
modules: ['node_modules'],
alias: {
app: utils.root('src'),
...rxPaths()
}
},
stats: {
children: false
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
caseSensitive: true,
removeAttributeQuotes: false,
minifyJS: false,
minifyCSS: false
},
exclude: ['./src/index.html']
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loader: 'file-loader',
options: {
digest: 'hex',
hash: 'sha512',
name: 'assets/[hash].[ext]'
}
},
// Ignore warnings about System.import in Angular
{test: /[\/\\]#angular[\/\\].+\.js$/, parser: {system: true}},
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `'${options.env}'`,
BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
VERSION: `'${utils.parseVersion()}'`,
DEBUG_INFO_ENABLED: options.env === 'development',
SERVER_API_URL: `''`
}
}),
new CopyWebpackPlugin([
{ from: './src/assets/images', to: 'assets/images' },
{ from: './src/favicon.ico', to: 'favicon.ico' }
]),
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['polyfills', 'global', 'main'],
chunksSortMode: 'manual',
inject: 'body'
})
]
});
webpack.prod.js
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');
const ENV = 'production';
const sass = require('sass');
const extractSASS = new ExtractTextPlugin(`styles/[name]-sass.[hash].css`);
const extractCSS = new ExtractTextPlugin(`styles/[name].[hash].css`);
module.exports = webpackMerge(commonConfig({env: ENV}), {
entry: {
polyfills: './src/polyfills',
global: './src/styles/global.scss',
main: './src/main'
},
output: {
path: utils.root('dist/asterisk'),
filename: 'app/[name].[hash].bundle.js',
chunkFilename: 'app/[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '#ngtools/webpack'
},
{
test: /\.scss$/,
use: extractSASS.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {implementation: sass}
}],
publicPath: '../'
}),
exclude: /node_moduels/
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: ['css-loader'],
publicPath: '../'
}),
exclude: /node_modules/
}
]
},
optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
},
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
terserOptions: {
ie8: false,
// sourceMap: true, // Enable source maps. Please note that this will slow down the build
compress: {
dead_code: true,
warnings: false,
properties: true,
drop_debugger: true,
conditionals: true,
booleans: true,
loops: true,
unused: true,
toplevel: true,
if_return: true,
inline: true,
join_vars: true
},
output: {
comments: false,
beautify: false,
indent_level: 2
}
}
})
]
},
plugins: [
extractSASS,
extractCSS,
new MomentLocalesPlugin({
localesToKeep: []
}),
new Visualizer({
// Webpack statistics in dist folder
filename: '../stats.html'
}),
new AngularCompilerPlugin({
mainPath: utils.root('src/main.ts'),
tsConfigPath: utils.root('tsconfig-aot.json'),
sourceMap: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
})
],
mode: 'production'
});
package.json
{
"name": "asterisk-prime-ui",
"version": "1.0.0",
"main": "main.ts",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"cleanup": "rimraf dist/{aot,asterisk}",
"clean-asterisk": "rimraf dist/asterisk/app/}",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --watch-content-base --env.stats=minimal",
"webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=normal",
"webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-asterisk",
"webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.7",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.1.7",
"#angular/compiler": "^6.1.7",
"#angular/core": "^6.1.7",
"#angular/flex-layout": "^6.0.0-beta.18",
"#angular/forms": "^6.1.7",
"#angular/http": "^6.1.7",
"#angular/material": "^6.4.7",
"#angular/platform-browser": "^6.1.7",
"#angular/platform-browser-dynamic": "^6.1.7",
"#angular/router": "^6.1.7",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"moment-locales-webpack-plugin": "^1.0.7",
"net": "^1.0.2",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
"swagger-ui": "^3.18.2",
"terser-webpack-plugin": "^1.0.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.7.0",
"#angular/cli": "~6.1.5",
"#angular/compiler-cli": "^6.1.7",
"#angular/language-service": "^6.1.7",
"#babel/core": "^7.0.0",
"#ngtools/webpack": "^6.1.5",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"#types/sockjs-client": "^1.1.0",
"#types/stompjs": "^2.3.4",
"angular-router-loader": "^0.8.5",
"angular2-template-loader": "^0.6.2",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.2",
"browser-sync": "^2.24.7",
"browser-sync-webpack-plugin": "^2.2.2",
"cache-loader": "^1.2.2",
"codelyzer": "~4.2.1",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"fork-ts-checker-webpack-plugin": "^0.4.9",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.3",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"lodash": "^4.17.10",
"mini-css-extract-plugin": "^0.4.2",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^5.3.0",
"protractor": "~5.4.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.0",
"sass": "^1.13.2",
"sass-loader": "^7.1.0",
"simple-notifier": "^1.1.0",
"simple-progress-webpack-plugin": "^1.1.2",
"sockjs-client": "^1.1.5",
"stompjs": "^2.3.3",
"style-loader": "^0.23.0",
"sugarss": "^2.0.0",
"thread-loader": "^1.2.0",
"to-string-loader": "^1.1.5",
"ts-loader": "^5.0.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"tslint-loader": "^3.6.0",
"typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "^1.3.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.2.0",
"webpack-dev-server": "^3.1.7",
"webpack-merge": "^4.1.4",
"webpack-notifier": "^1.6.0",
"webpack-visualizer-plugin": "^0.1.11",
"workbox-webpack-plugin": "^3.4.1",
"write-file-webpack-plugin": "^4.4.0",
"xml2js": "^0.4.19"
}
}
I do not understand where my mistake is.Thank you all in advance for
your help.
I just decided to give up webpack completely, because angular-cli uses the same webpack. Sorry for the pointless question.
I want to use webpack so that it will automatically compile any and all .scss files in my /src/app folder into a single .css file without me having to explicity point to all of the .scss files / import them.
I am trying to use ExtractTextPlugin to do this but it does not seem to be working. Do I need to provide a more specific entry point? Are my loaders not configured correctly? Or is there something else wrong? Thanks!
webpack.config.js:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
devtool: 'inline-source-map',
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js"
SRC_DIR + "/app/"
],
target: 'web',
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
plugins: [
new ExtractTextPlugin({filename: "foo.css", allChunks: true})
],
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
};
module.exports = config;
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"watch": "webpack --progress --watch",
"start": "yarn build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
"build:dev": "webpack && cp src/index.html dist/index.html",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"babel-cli": "7.0.0-beta.3",
"babel-eslint": "7",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"eslint": "3.x",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.0",
"fetch-mock": "^6.0.0-beta.7",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.4.2",
"jest": "^23.1.0",
"jest-enzyme": "^4.0.0",
"jest-fetch-mock": "^1.6.4",
"node-sass": "^4.9.0",
"redux-mock-store": "^1.5.3",
"sass-loader": "^6.0.6",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"#trendmicro/react-toggle-switch": "^0.5.7",
"babel-polyfill": "^6.26.0",
"cross-fetch": "^1.1.1",
"font-awesome": "^4.7.0",
"highcharts": "^6.0.4",
"history": "^4.7.2",
"js-cookie": "^2.2.0",
"less-loader": "^4.0.5",
"libphonenumber-js": "^0.4.42",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.1",
"rc-time-picker": "^3.1.0",
"react": "^16.0.0",
"react-animations": "^1.0.0",
"react-autosuggest": "^9.3.4",
"react-circular-progressbar": "^0.8.0",
"react-datepicker": "^0.59.0",
"react-dom": "^16.0.0",
"react-highcharts": "^15.0.0",
"react-list": "^0.8.8",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-select": "^1.0.0-rc.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "3.2.3",
"twilio-client": "^1.4.33"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}
without me having to explicity point to all of the .scss files /
import them.
You can't do that, webpack is not like gulp or other task runner that you can just point patterns and it will apply transformations to them.
Webpack works with dependency graphs, and these graphs are going to start from your entry points. On each entrypoint it reads the dependencies and apply those loaders specified for each file extension. Webpack only knows the existence of that file, if it is imported in any file that is part of the dependency graph.
If you want to transform css the way that you described, i suggest you moving towards a more task runner library such as gulp.