I'm currently using Webpack 3.10.0 along with following babel packages.
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "~6.13.2",
"babel-preset-react": "~6.11.1",
My issue is, during runtime I get the following error on the browser console and the page doesn't load.
bundle.js:737 Uncaught Error: Cannot find module "babel-polyfill"
at webpackMissingModule (bundle.js:737)
at Object.<anonymous> (bundle.js:737)
at __webpack_require__ (bundle.js:679)
at bundle.js:725
at bundle.js:728
My webpack.config.js looks as below.
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: {
bundle: ['babel-polyfill', './Main.js'],
bundleIntegrated: ['babel-polyfill', './MainInt.js']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../assets/myproject')
},
target: 'web',
devServer: {
inline: true,
port: 3000,
proxy: {
'/myct/**': {
target: 'http://localhost:9000',
secure: false,
changeOrigin: true
}
}
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: ['.js', '.jsx'],
alias: {
config: path.join(__dirname, 'config/config.dev')
}
},
module: {
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: "eslint-loader",
}
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|__tests__)/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
use: [
{
loader: "file-loader?name=../assets/mastering/fonts/[name].[ext]",
},
],
},
],
}
}
I have imported babel-polyfill into Main.js and MainInt.js files as instructed in https://babeljs.io/docs/usage/polyfill/ and I haven't used new webpack.optimize.ModuleConcatenationPlugin().
Any ideas on how to resolve this issue. Thanks in advance :)
I found the issue. Thank you everyone for your help.
Giving the full path in filename fixed the issue.
output: {
path: path.resolve(__dirname, '../assets/myproject'),
filename: '../assets/myproject/[name].js',
},
Related
Error:
ERROR in ./src/client/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ***\src\client\index.tsx: Unexpected token, expected "," (5:16)
3 |
4 | const a = {title: 'te'}
> 5 | const x = <span {...a}/>
| ^
6 | console.log(`>>>`, a)
webpack config:
import * as Webpack from 'webpack';
import {Compiler} from 'webpack';
import * as WebpackDevServer from 'webpack-dev-server';
import {paths} from './paths';
import {alias} from './alias';
const domain = ''
const createWebpackConfig = (): Webpack.Configuration => {
const config: Webpack.Configuration = {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: [
'react-hot-loader/patch',
paths.appEntryFile,
],
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/[name].bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: '/',
},
resolve: {
alias,
extensions: ['.tsx', '.ts', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
presets: [
['#babel/preset-env', {
targets: '> 0.25%, not dead',
// Only add polyfills our code might need
useBuiltIns: 'usage',
debug: true,
// Looks like by default bable uses core-js 2 which breaks
corejs: 3,
modules: 'commonjs'
}],
'#babel/preset-react'
],
plugins: [
// To have `private` on class properties. `loose:true` to don't add bloat to the code.
['#babel/plugin-proposal-class-properties', {loose: true}],
// Ability to do: `const enum`
'babel-plugin-const-enum',
// Ability to use typescript, has to be after 'babel-plugin-const-enum' otherwise will complain
['#babel/plugin-transform-typescript', {allowNamespaces: true}],
'react-hot-loader/babel',
],
},
},
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
]
},
plugins: [
],
node: {
fs: 'empty',
net: 'empty',
// Because of promise-request
tls: 'empty'
}
}
return config
}
const compiler = Webpack(createWebpackConfig());
const host = '127.0.0.1';
const devServerOptions: WebpackDevServer.Configuration = {
open: false,
host,
hot: true,
stats: {
colors: true,
},
}
const server = new WebpackDevServer(compiler, devServerOptions);
server.listen(3000, host, () => {
console.log('Starting server on http://localhost:3000');
});
index.tsx:
import * as React from 'react';
const a = {title: 'te'}
const x = <span {...a}/>
console.log(`>>>`, a)
partial package.json (plus more crap):
"#babel/core": "^7.8.4",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-transform-typescript": "^7.8.3",
"#babel/polyfill": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"babel-cli": "^6.26.0",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-const-enum": "^0.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-app": "^9.1.1",
I can't figure out why it doesn't work. I have react plugin so it should understand react, "babel-loader": "^8.0.6",
Fixed by adding a babel preset: ['#babel/preset-typescript', {allowNamespaces: true}],
I have no clue why react breaks...
I faced the same issue. To fix this issue I have
to install #babel/preset-typescript by running
yarn add #babel/preset-typescript
to add
['#babel/preset-typescript', {allowNamespaces: true}]
in webpack.config.js like this
rules: [
{
test: /\.[tj]sx?$/,
include: /(src)/,
use: [{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
"useBuiltIns": "usage",
"corejs": 3
}
],
['#babel/preset-typescript', { allowNamespaces: true }]
],
plugins: [
'#babel/plugin-syntax-dynamic-import'
]
}
}]
},
{
test: /\.tsx?$/,
include: path.resolve(__dirname, "src"),
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
}
}]
}
]
The Application (build in "react": "15.4.1" ) has some dependent modules.Dependent Modules are referred in package.json : "git+https://git.xyz.net/myApp/ui/myModule.ui.git#v0.0.4",.
myModule has same logical entities.
Now I applied lazy loading on myModule using "react-loadable": "4.0.3",.
I am getting below chunks when i run npm start on myModule:
0.my-Module-ui.js
1.my-Module-ui.js
2.my-Module-ui.js
my-Module-ui.js
webpack file for myModule :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'my-Module-ui.js',
// chunkFilename: '[name].js',
libraryTarget: 'umd',
publicPath: '/',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /\.(json)$/,
loaders: [
'json-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ["es2015" , "stage-0", "react"],
plugins: ["transform-runtime"],
}
},
{
test: /\.(sass|less|css)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
},
// Load images
{ test: /\.jpg/, loader: "url-loader?limit=10000&mimetype=image/jpg" },
{ test: /\.gif/, loader: "url-loader?limit=10000&mimetype=image/gif" },
{ test: /\.png/, loader: "url-loader?limit=10000&mimetype=image/png" },
{ test: /\.svg/, loader: "url-loader?limit=10000&mimetype=image/svg" },
// Load fonts
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
{ test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
]
},
// plugins: [
// new webpack.optimize.UglifyJsPlugin({comments: false, compress: { warnings: false }, screw_ie8: true})
// ]
};
Webpack version in package.json : "webpack": "^3.0.0",
Issue:
when I load the main app,My Main App home screen has some widget which uses the dependent modules doesn't gets loaded but we see error in console.
2.my-Module-ui.js:1 Uncaught SyntaxError: Unexpected token <
my-Module-ui.js:109 Uncaught (in promise) Error: Loading chunk 2 failed.
at HTMLScriptElement.onScriptComplete (my-Module-ui.js:109)
I have tried everything since yesterday...Please help me out on this ,Please let me know if any others details are required
I have been trying to deploy my production build with webpack but I can't get it done. I almost read and tried everything and can't make it work.
This is the last error that I have:
My webpack configuration looks like this:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
// base: path.resolve(staticSourcePath, 'src/sass/base.scss'),
app: path.resolve(sourcePath, 'index.prod.jsx')
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
publicPath: '/'
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
sourcePath,
path.resolve(__dirname, 'node_modules')
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[chunkhash].js',
minChunks(module) {
return module.context && module.context.indexOf('node_modules') >= 0;
}
}),
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
compress: {
warnings: false
}
}
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})
],
context: staticSourcePath
}
}),
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
path: buildPath,
excludeChunks: ['base'],
// filename: 'index.html',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'all',
fileBlacklist: [/\.(css|map)$/, /base?.+/]
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.jsx$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react", "env"],
plugins: [
"transform-object-rest-spread",
"transform-class-properties"
]
}
},
{
test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
use: 'file-loader?name=assets/[name]-[hash].[ext]'
},
{
test: /\.(png|gif|jpg|svg)$/,
use: [
'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
],
include: staticSourcePath
}
]
}
};
I tried changing the presets of babel. I don't know if it could be a problem with the library query-string but even when I don't use it the error persists.
I also tried almost all configurations from https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/104 and can't make it work :C....
I hope someone can help me I have been fighting with this error since weekend and im near to kill myself T_T
Already tried babel-polyfill and dont work :(
Just updated to webpack 4 and solved my problem. To many people have this kind of error with webpack < 4.
I will leave my webpack 4 configuration here for those who had suffered like me
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
resolve: {
extensions: ['.js', '.jsx']
},
output: {
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
devServer: {
// host: '0.0.0.0', /******* Para ver en lan*/
// disableHostCheck: true,/****** Para ver en lan */
historyApiFallback: true,
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
]
};
package.json
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"compression-webpack-plugin": "^1.1.11",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.7",
"mini-css-extract-plugin": "^0.2.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties",
"transform-regenerator"
]
}
In my experience, it's usually Uglify being too aggressive.
I noticed that in your answer, you've swapped out Uglify for compression-webpack-plugin. That's probably what made the bug go away.
In your original package.json, I'd change the Uglify config to
new UglifyJsPlugin({
sourceMap:true,
cache: true,
parallel: true,
uglifyOptions:{
ecma:8
}
}),
First, you want to see Uglify's warnings. It'll tell you if there's code that's likely to get clobbered by the minification / obfuscation algorithm. If there are, you may have to play with the compress, mangle, toplevel or keep_fnames options depending on how your code is structured. https://github.com/mishoo/UglifyJS2#minify-options
I understand that this might show a lot of warnings from 3rd party libraries. There's a couple things you can do:
Find alternative libs that minify correctly (they'll probably be higher quality anyways).
Import the already minified versions of the lib from /dist instead of from /src and then exclude the lib from the Uglify plugin
The settings for cache and parallel just make the minification run a bit faster.
Sometimes such a problem may be a result of the non-transpiled packages (excluded from transpiling).
To solve this you should include these packages to transpiled code:
rules: [
...
test: /\.jsx?$/,
exclude(resource) {
return (
/node_modules/.test(resource)
&& !/node_modules\/(query-string|strict-uri-encode|split-on-first)/.test(resource)
);
},
...
]
i have a problem with extract-text-webpack-plugin when i execute webpack to production. the error is this:
sh-3.2# yarn build
yarn build v0.24.5
$ webpack --config webpack.config.prod.js -p --watch --progress
10% building modules 1/1 modules 0 active
Webpack is watching the files…
78% advanced chunk optimization/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:188
chunk.sortModules();
^
TypeError: chunk.sortModules is not a function
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3083:16
at eachOfArrayLike (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1003:9)
at eachOf (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1051:5)
at Object.eachLimit (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3145:5)
at Compilation.<anonymous> (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
at Compilation.applyPluginsAsyncSeries (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/tapable/lib/Tapable.js:142:13)
at Compilation.seal (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:570:8)
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compiler.js:474:16
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:472:11)
at processModuleDependencies.err (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:443:13)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
error Command failed with exit code 1.
here is my webpack.config file to production:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
entry: [
path.join(__dirname, 'src', 'index.jsx')
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: { loader: 'babel-loader'}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2)$/,
use: 'url-loader?prefix=font/&limit=5000'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) || 'development' }
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new extractTextWebpackPlugin(path.join(__dirname, 'build', 'styles.css')),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
title: "redux tuto",
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html'
}),
new webpack.optimize.UglifyJsPlugin({
compress: { warning: false },
mangle: { except: ['$super', 'exports', 'require'] }
}),
],
target: 'web',
devServer: {
host: '0.0.0.0',
hot: false,
port: 8081,
inline: true,
contentBase: path.join(__dirname, './build'),
historyApiFallback: true,
}
}
and the versions of packages are the next:
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.18.2",
"webpack": "2.2.1",
"webpack-dev-server": "2.4.0"
anyone knows wich is the problem ? i have updated node and the error persist.
thanks in advance.
I'm running into an interesting error with my react build. My configuration runs perfectly fine on my Mac, but I get the following error when running on my Windows 10 computer:
ERROR in ./~/react-toolbox/lib/app_bar/theme.css
Module parse failed: C:\cygwin64\home\username\projectname\node_modules\react-toolbox\lib\app_bar\theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238 );
| --palette-red-100: rgb(255, 205, 210);
# ./~/react-toolbox/lib/app_bar/index.js 16:13-35
# ./src/containers/app/app.js
# ./src/index.js
# multi react-hot-loader/patch ./src/index.js
Here's my Webpack 2 Config
'use strict'
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const postcssImport = require('postcss-import')
const postcssCssnext = require('postcss-cssnext')
// configure source and distribution folder paths
const publicFolder = 'public'
const buildFolder = 'build'
module.exports = {
entry: {
'app': [
'react-hot-loader/patch',
'./src/index.js'
]
},
resolve: {
//Allows us to leave off the file extension when importing
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: '/node_modules/',
loader: 'eslint-loader',
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader'
},
{
test: /\.css$/,
include: [
/(node_modules)\/react-toolbox/,
path.join(__dirname, 'src')
],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: 'inline',
plugins: function() {
return [
postcssImport({ addDependencyTo: webpack }),
postcssCssnext({
browsers: ['last 2 versions', '> 5%'],
compress: true,
})
]
},
},
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name].bundle.css',
allChunks: true
}),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'index.html'),
to: path.join(__dirname, buildFolder, 'index.html')
}]),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'demo.html'),
to: path.join(__dirname, buildFolder, 'demo.html')
}]),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'demo.js'),
to: path.join(__dirname, buildFolder, 'demo.js')
}]),
new webpack.NamedModulesPlugin()
],
output: {
path: path.resolve(__dirname, buildFolder),
filename: '[name].js',
publicPath: '/'
},
devtool: 'eval',
devServer: {
// files are served from this folder
contentBase: path.join(__dirname, 'build'),
// support HTML5 History API for react router
historyApiFallback: true,
// listen to port 5000, change this to another port if another server
// is already listening on this port
port: 5000,
//match the output 'publicPath'
publicPath: '/',
//Proxies to match requests to our Django API endpoints
proxy: {
'/api': {
target: 'http://localhost:4000'
}
},
hot: true
}
}
And for good measure, here's my .babelrc config
{
"presets": [
[ "es2015", { "modules": false } ],
"latest",
"react"
],
"plugins": ["react-hot-loader/babel", "syntax-dynamic-import"],
"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
}
No idea why the error occurs when compiling on Windows 10 but works perfectly on my Mac. I can't seem to find any current info regarding this issue for either PostCSS or Webpack 2.
Any ideas?
just remove
include: [
/(node_modules)\/react-toolbox/,
path.join(__dirname, 'src')
]
from test: /\.css$/ rule