no-unresolved https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
After installing eslint-import-resolver-webpack
My .eslintrc config
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"],
"semi": ["error", "always"],
"react/jsx-filename-extension": 0,
"react/prop-types": 0,
"react/no-find-dom-node": 0,
"jsx-a11y/label-has-for": 0
},
"globals": {
"document": true,
"window": true
},
"env": {
"jest": true
},
"settings": {
"import/resolver": "webpack"
}
}
My package.json
{
"name": "coinhover",
"version": "0.0.1",
"main": "index.js",
"author": "Leon Gaban",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dev-server",
"production": "webpack -p",
"build": "webpack -p",
"test": "eslint app && jest",
"test:fix": "eslint --fix app"
},
"now": {
"name": "coinhover",
"engines": {
"node": "7.4.x"
},
"alias": "coinhover.io"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.16.1",
"babel-runtime": "6.11.6",
"jsonwebtoken": "^7.4.1",
"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "next",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"enzyme-to-json": "^1.5.1",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-addons-test-utils": "15.0.0-rc.2",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
Webpack
import fs from 'fs'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'
import chalk from 'chalk'
const coinhover = path.resolve(__dirname, "coinhover")
const src = path.resolve(__dirname, "public/src")
const log = console.log
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/src/index.html',
filename: 'index.html',
inject: 'body'
})
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: "coinhover.css",
disable: false,
allChunks: true
})
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: "public/src/static", to: "static" }])
const PATHS = {
app: src,
build: coinhover,
}
const LAUNCH_COMMAND = process.env.npm_lifecycle_event
const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
publicPath: coinhover
})
}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'public/src')]
}
}
const developmentConfig = {
devServer: {
publicPath: "",
contentBase: path.join(__dirname, "dist"),
// hot: false,
quiet: true,
inline: true,
compress: true,
stats: "errors-only",
open: true
},
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
// new webpack.HotModuleReplacementPlugin()
]
}
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
}
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`)
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
)
You can add an option to ignore case:
"rules": {
"import/no-unresolved": [
2,
{ "caseSensitive": false }
]
}
This thread at github also describes how the linter was checking case for parts of the path which come before the folder containing package.json. If you for example have the path:
C:/Workspace/app and you navigate to it using cd C:/workspace/app (lowercase workspace), the linter would also give an error on the imports. Looks like it should now be fixed, but perhaps you are still using an older version.
Try installing eslint-import-resolver-webpack and adding this to your .eslintrc:
"settings": {
"import/resolver": "webpack"
}
Try
resolve: {
modules: [path.resolve(__dirname, 'public/src'), 'node_modules', path.resolve('node_modules')],
}
it helped me
If you would like to enable this rule, then:
Enable the rule within your config: 'import/no-unresolved': 'error'
Install and configure the TypeScript import resolver: eslint-import-resolver-typescript
The problem is that your webpack config is written in ES6 format, which doesn't play well with eslint-import-resolver-webpack.
So, you either refactor your webpack.config.js using ES5 syntax, or you get rid of eslint-import-resolver-webpack.
See here for the full solution: eslint plugin docs
Related
I am using Architect UI free version.
Download Link
I downloaded the file and When I ultimately run this command
npm run build
It generates all html files and an asset folder containing images and js files. In those js files CSS is embedded.
Now I want to extract the css file.
How can I generate the css file. Let me know the step by step procedure.
I was trying to use the mini-css-extract-plugin plugin but failed in generating the css file.
Help me in this regard.
I downloaded the package and did a little debugging.
webpack.config.js should be the following:
'use strict';
const Path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const ExtractSASS = new MiniCssExtractPlugin({filename:'./[name].css'});
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const webpack = require('webpack');
const pages = require('./src/pages');
let renderedPages = [];
for (let i = 0; i < pages.length; i++) {
let page = Object.assign({}, pages[i]);
renderedPages.push(
new HtmlWebpackPlugin({
template: page.template,
filename: page.output,
title: page.content.title,
heading_icon: page.content.heading_icon,
description: page.content.description
})
);
}
module.exports = (options) => {
const dest = Path.join(__dirname, 'architectui-html-free');
let webpackConfig = {
mode: 'none',
devtool: options.devtool,
entry: {
main: './src/app.js',
demo: './src/scripts-init/demo.js',
toastr: './src/scripts-init/toastr.js',
scrollbar: './src/scripts-init/scrollbar.js',
fullcalendar: './src/scripts-init/calendar.js',
maps: './src/scripts-init/maps.js',
chart_js: './src/scripts-init/charts/chartjs.js',
},
output: {
path: dest,
filename: './assets/scripts/[name].js'
},
plugins: [
new Webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Tether: 'tether',
'window.Tether': 'tether',
Popper: ['popper.js', 'default'],
}),
new CopyWebpackPlugin({
patterns: [
{ from: './src/assets/images', to: './assets/images' }
]
}),
new Webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(options.isProduction ? 'production' : 'development')
}
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.hbs$/,
loader: 'handlebars-loader',
options: {
helperDirs: [
Path.join(__dirname, 'src', 'helpers')
],
partialDirs: [
Path.join(__dirname, 'src', 'layout'),
Path.join(__dirname, 'src', 'DemoPages'),
]
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
]
}
};
if (options.isProduction) {
webpackConfig.entry = [
'./src/app.js',
'./src/scripts-init/demo.js',
'./src/scripts-init/toastr.js',
'./src/scripts-init/scrollbar.js',
'./src/scripts-init/calendar.js',
'./src/scripts-init/maps.js',
'./src/scripts-init/charts/chartjs.js',
];
webpackConfig.plugins.push(
ExtractSASS,
new CleanWebpackPlugin(/*[dest], {
verbose: true,
dry: false
}*/)
);
webpackConfig.module.rules.push({
test: /\.scss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}, {
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
});
} else {
webpackConfig.plugins.push(
new Webpack.HotModuleReplacementPlugin()
);
webpackConfig.module.rules.push({
test: /\.scss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
);
webpackConfig.devServer = {
port: options.port,
historyApiFallback: true,
hot: !options.isProduction,
};
webpackConfig.plugins.push(
new BrowserSyncPlugin({
host: 'localhost',
port: 3002,
files: ["public/**/*.*"],
browser: "google chrome",
reloadDelay: 1000,
}, {
reload: false
})
);
}
webpackConfig.plugins = webpackConfig.plugins.concat(renderedPages);
return webpackConfig;
};
We just changed some of the plugin definitions. Do a diff on the files to see what has changed.
Your package.json file should contain:
{
"name": "architectui-html-free",
"version": "3.0.0",
"description": "ArchitectUI - Free Bootstrap 5 Admin Dashboard Template",
"author": "DashboardPack.com",
"homepage": "https://dashboardpack.com",
"private": false,
"scripts": {
"start": "webpack server",
"build": "webpack --env isProduction"
},
"repository": {
"type": "git",
"url": "git+https://github.com/DashboardPack/architectui-html-theme-free"
},
"eslintConfig": {
"env": {
"browser": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"rules": {
"semi": 2
}
},
"dependencies": {
"#fortawesome/fontawesome-free": "^6.1.1",
"#fullcalendar/core": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/list": "^5.10.1",
"#fullcalendar/timegrid": "^5.10.1",
"#popperjs/core": "^2.11.4",
"animate.css": "^4.1.1",
"bootstrap": "^5.1.3",
"chart.js": "^2.9.4",
"fullcalendar": "^5.10.2",
"gmaps": "^0.4.25",
"jquery": "^3.6.0",
"mapbox-gl": "^2.7.1",
"metismenu": "^3.0.7",
"moment": "^2.29.2",
"pe7-icon": "^1.0.4",
"perfect-scrollbar": "^1.5.5",
"toastr": "^2.1.4",
"wnumb": "^1.2.0",
"yarn": "^1.22.18"
},
"resolutions": {
"**/event-stream": "^4.0.1"
},
"devDependencies": {
"#babel/core": "^7.17.8",
"#babel/preset-env": "^7.16.11",
"animate-sass": "^0.8.2",
"babel-loader": "^8.2.4",
"browser-sync": "^2.27.9",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.2.4",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"handlebars": "^4.7.7",
"handlebars-loader": "^1.7.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.0",
"nodemon": "^2.0.15",
"sass": "^1.49.11",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
}
We needed to change:
"scripts": {
"start": "webpack server",
"build": "webpack --env isProduction"
},
So that it runs the config.isProduction build. HTML will output the following:
<script defer src="./assets/scripts/main.js"></script><link href="./main.css" rel="stylesheet"></head>
OS: Windows 10 Pro
webpack: 1.14.0
So, when I start my server (npm start), the following code:
async applyMiddleware(req, next) {
....
}
is correctly transformed by the development section of "babel": "env":["transform-async-to-generator"] of my package.json. But when I build my app (npm run build) the production section of "babel": "env":["transform-async-to-generator"] fails to correctly transform the code, with the following error:
Module parse failed: C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\babel-loader\lib\index.js!C:\Users\d0475\Documents\Projects\learn-redux-graphql\client\apolloClient.js Unexpected token (77:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:25)
at Parser.pp$4.raise (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.expect (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:597:28)
at Parser.pp$3.parseObj (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1973:16)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1805:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseExprAtom (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1801:28)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (C:\Users\d0475\Documents\Projects\learn-redux-graphql\node_modules\webpack\lib\Parser.js:902:15)
# ./client/app.js 17:20-45
What is the issue here?
My package.json is:
{
"name": "learn-redux-graphql",
"version": "1.0.0",
"description": ":) ",
"scripts": {
"build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack",
"test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register",
"clean": "rimraf public",
"start": "node devServer.js"
},
"repository": {
"type": "git",
"url": "https://github.com/TheoMer/learn-redux-graphql.git"
},
"author": "Theo Mer",
"license": "MIT",
"homepage": "https://github.com/TheoMer/learn-redux-graphql",
"dependencies": {
"apollo-client": "^1.0.2",
"babel-core": "^6.5.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.3",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.5.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"dotenv-webpack": "^1.4.5",
"eslint": "^3.4.0",
"eslint-plugin-babel": "^3.1.0",
"eslint-plugin-react": "^4.1.0",
"express": "^4.13.4",
"firebase": "^3.3.0",
"graphql-tag": "^1.3.2",
"graphql-tools": "^0.10.1",
"immutability-helper": "^2.1.2",
"localforage": "^1.5.0",
"lodash": "^4.17.4",
"node-env-file": "^0.1.8",
"raven-js": "^2.1.1",
"react": "^0.14.7",
"react-addons-css-transition-group": "^0.14.7",
"react-apollo": "^1.0.0-rc.3",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.2",
"redbox-react": "^1.2.2",
"redux": "^3.3.1",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.0.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.3.1",
"subscriptions-transport-ws": "^0.5.5-alpha.0",
"webpack": "^1.12.14",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.23.0",
"copy-webpack-plugin": "^4.0.1",
"expect": "^1.14.0",
"expect-jsx": "^2.3.0",
"html-webpack-plugin": "^2.28.0",
"mocha": "^2.4.5",
"offline-plugin": "^4.7.0",
"react-addons-test-utils": "^0.14.7",
"sw-precache-webpack-plugin": "^0.9.1"
},
"babel": {
"presets": [
"react",
"es2015"
],
"env": {
"development": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
],
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
},
"production": {
"plugins": [
[
"transform-async-to-generator"
],
[
"transform-object-rest-spread"
],
[
"transform-react-display-name"
]
]
}
}
},
"eslintConfig": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [
2,
"single"
],
"strict": [
2,
"never"
],
"babel/generator-star-spacing": 1,
"babel/new-cap": 1,
"babel/object-shorthand": 1,
"babel/arrow-parens": 1,
"babel/no-await-in-loop": 1,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"babel",
"react"
]
}
}
My webpack.config.dev is:
var path = require('path');
var webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/app'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
My webpack.config.prod is:
const path = require('path');
const webpack = require('webpack');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
module.exports = {
devtool: 'source-map',
context: __dirname,
entry: {
main: path.resolve(__dirname, './client/app'),
},
output: {
path: path.join(__dirname, '/public'),
filename: '[name]-[hash].js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new Dotenv({
path: './.env', // Path to .env file (this is the default)
safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new HtmlWebpackPlugin({
title: 'Flamingo City',
filename: 'index.html',
template: './index_template.ejs',
}),
new CopyWebpackPlugin([
{ from: '404.html' }, // Copies file from root to specified output:path:
{ from: 'manifest.json' },
{ from: 'images', to: 'images' },
]),
new OfflinePlugin({
publicPath: '/',
safeToUseOptionalCaches: true,
caches: {
main: [
'main-*.js',
'index.html',
],
additional: [
':externals:'
],
optional: [
':rest:'
]
},
externals: [
'/'
],
ServiceWorker: {
navigateFallbackURL: '/',
events: true
},
AppCache: {
FALLBACK: {
'/': '/offline-page.html'
},
events: true
}
})
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};
You need to give the Webpack process access to the NODE_ENV variable.
Windows:
"build:webpack": "set NODE_ENV=production&& webpack --config webpack.config.prod.js",
MacOs/Linux:
"build:webpack": "export NODE_ENV=production && webpack --config webpack.config.prod.js",
I'm setting up Jest for a webpack 2 project that isn't a React project.
I have installed jest-cli and babel-jest.
I'm getting this error:
.babel-rc:
{
"presets": [
"es2015"
],
"plugins": [
"syntax-jsx",
["transform-react-jsx", {"pragma": "html"}]
]
}
webpack.config.js:
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
},
{
test: /\.styl$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'stylus-loader'
],
}
]
},
resolve: {
extensions: ['.js'],
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
plugins: [
new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
],
jest: {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
}
},
'env': {
'test': {
'plugins': ['transform-es2015-modules-commonjs']
}
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node server.js",
"test": "jest"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
]
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-jest": "^19.0.0",
"babel-loader": "^6.3.2",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.2",
"eslint": "^3.17.0",
"extract-text-webpack-plugin": "^2.0.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^19.0.2",
"jest-cli": "^19.0.2",
"regenerator-runtime": "^0.10.3",
"style-loader": "^0.13.2",
"stylus": "^0.54.5",
"stylus-loader": "^2.5.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"#cycle/dom": "^16.0.0",
"#cycle/run": "^3.0.0",
"babel-plugin-transform-react-jsx": "^6.23.0",
"bulma": "^0.3.2",
"css-modules-require-hook": "^4.0.5",
"eslint-plugin-jsx": "^0.0.2",
"snabbdom-jsx": "^0.3.1",
"xstream": "^10.3.0"
}
}
How can I get rid of the error?
Using arrow function without parameters still requires the parentheses.
The following code should work:
test('adds a and b together', () => {
expect(sum(1, 2)).toBe(3)
})
Note that the only case the parentheses are not needed is when there is only one parameter.
You can read documentation here.
I'm trying to config the server to have multiple entries and outputs. The app is using Zurb Foundation,jquery and React.
I want jquery and foundation not to be part of the bundle.js and also to have a separate bundle for react
Webpack validates, server starts but nothing is show and in console appears: "ReferenceError: webpackJsonp is not defined"
With a single entry is working, I don't know were is the error when trying to use multiple ones.
webpack.config
var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
entry: {
main: ['script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'./dist/app.js' ],
react: ['react', 'react-dom']
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
}),
new CommonsChunkPlugin('react', 'react.bundle.js')
],
output: {
filename: bundle.js'
},
devServer: {
inline: true,
contentBase: './build',
port: 3000
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
},
test: /\.js?$/,
exclude: /(node_modules)/
}
]
}
};
package.json
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"test": "karma start"
},
"author": "CBM",
"license": "MIT",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"foundation-sites": "^6.2.3",
"jquery": "^3.1.1",
"karma": "^1.3.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.1.0",
"react-router": "^2.8.1",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
babel.rc
{
"presets": ["es2015", "react"]
}
Specify an output for each entry:
entry: {
jquery: ['script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/foundation.min.js' ],
bundle: './dist/app.js',
react: ['react', 'react-dom']
},
output: {
filename: '[name].js'
}
If you want to add jquery and foundation libraries directly to the html just don't add the entries.
font: https://webpack.github.io/docs/multiple-entry-points.html
I am trying to get React Hot Reloader to work for my ReactJS project, but I am getting an error Error: Couldn't find preset "react-hot" relative to directory...
I did set up preset "react-hot" in .babelrc but what may be the issue? I have the following set up:
In my package.json:
{
"name": "practicing_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "John Bana",
"license": "ISC",
"dependencies": {
"axios": "^0.14.0",
"react": "^15.3.1",
"react-cookie": "^0.4.8",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"redux": "^3.6.0",
"redux-form": "^6.0.0-rc.3",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.9.3",
"react-hot-loader": "^3.0.0-beta.3",
"sass-loader": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
}
}
In my webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
context: __dirname,
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
loader: 'babel'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}]
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
plugins: [
new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: {comments: false },
mangle: false,
sourcemap: false,
minimize: true,
mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
}),
]
};
module.exports = config;
In my .babelrc:
{
"presets": ["react-hot", "react", "es2015", "stage-0"]
}
react-hot-loader isn't used by Babel, it's used by Webpack.
Remove react-hot from your Babel presets, then add the loader to your Webpack configuration file:
loaders: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel']
},