Webpack 3.10.0 and babel-polyfill issue at runtime - reactjs

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

Webpack 4, babel 7, react, typescript: Unexpected token, expected ","

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,
}
}]
}
]

load dependent modules in chunks with react loadable

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

Webpack production build: Unexpected token

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)
);
},
...
]

extract-text-webpack-plugin error on production file

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.

PostCSS Module Parse Failed on Windows 10 build

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

Resources