Open luisandia opened 6 years ago
can you post your webpack configs?
My webpack.config
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);
module.exports = (env = {}) => {
return {
entry: {
index: [SRC_DIR + '/index.js']
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js'
},
// watch: true,
devtool: env.prod ? 'source-map' : 'eval',//'cheap-module-eval-source-map',
devServer: {
contentBase: BUILD_DIR,
// port: 9001,
compress: false,
hot: false,
open: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
},
{
test: /\.svg$/,
include: [/react-images-upload/],
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
new webpack.NamedModulesPlugin(),
extractCSS,
extractSCSS,
new HtmlWebpackPlugin(
{
inject: true,
template: './public/index.html'
}
),
new CopyWebpackPlugin([
{from: './public/img', to: 'img'}
],
{copyUnmodified: false}
),
new ErrorOverlayPlugin(),
]
}
};`
**package.json**
{
"name": "@coreui/react",
"version": "1.0.10",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"devDependencies": {
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"error-overlay-webpack-plugin": "^0.1.5",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
},
"dependencies": {
"animate.css": "^3.6.1",
"auth0-js": "^9.5.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "4.0.0",
"chart.js": "2.7.1",
"font-awesome": "4.7.0",
"history": "4.7.2",
"jquery": "^3.3.1",
"jquery.easing": "^1.4.1",
"moment-timezone": "^0.5.14",
"rc-time-picker": "^3.3.1",
"react": "^16.3.2",
"react-animated-css": "^1.0.4",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-toggle": "^2.2.6",
"react-chartjs-2": "2.7.0",
"react-ckeditor-component": "^1.0.7",
"react-data-components": "^1.2.0",
"react-dom": "16.2.0",
"react-dropzone": "^4.2.9",
"react-flip-move": "^2.9.14",
"react-google-maps": "^9.4.5",
"react-image-gallery": "^0.8.7",
"react-images-upload": "^1.0.7",
"react-infinite-scroll-component": "^4.0.3",
"react-paypal-express-checkout": "^1.0.4",
"react-redux": "^5.0.7",
"react-router-dom": "4.2.2",
"react-s-alert": "^1.4.1",
"react-select": "^1.2.1",
"react-sortable-tree": "^2.1.2",
"react-sortable-tree-theme-full-node-drag": "^1.1.0",
"react-tooltip": "^3.5.1",
"react-transition-group": "2.2.1",
"reactstrap": "^6.1.0",
"redux-devtools-extension": "^2.13.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-react-session": "^2.3.1",
"redux-thunk": "^2.2.0",
"shortid": "^2.2.8",
"simple-line-icons": "2.4.1",
"styled-components": "^3.2.6",
"styled-css-grid": "^0.8.2",
"superagent": "^3.8.2"
},
"scripts": {
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
"start": "webpack-dev-server --progress --color --inline --env.dev",
"build": "webpack -p --progress --env.prod",
"clean": "rimraf ./build"
},
"engines": {
"node": ">= 8.9.4",
"npm": ">= 5.6.0"
}
}
@luisandia Cool, Thanks!
Any update to this? I'm experiencing the same issue:
Webpack config:
webpack.config.prod.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
console.warn('BUILD_DIR', BUILD_DIR);
console.warn('SRC_DIR', SRC_DIR);
module.exports = (env = {}) => {
console.warn('===================');
console.warn('Running environment: ', env.NODE_ENV);
console.warn('===================');
return {
entry: {
index: [SRC_DIR + '/index.js'],
},
node: {
child_process: 'empty',
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js?[chunkhash]',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env', 'stage-0'],
},
},
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(
extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
alias: { '../img': '../public/img' },
},
},
{
loader: 'sass-loader',
},
],
})
),
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]',
},
},
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]',
},
},
],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: env.NODE_ENV,
}),
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
extractCSS,
extractSCSS,
new HtmlWebpackPlugin({
hash: true,
inject: true,
template: './public/index.html',
}),
new CopyWebpackPlugin([{ from: './public/img', to: 'img' }], {
copyUnmodified: false,
}),
],
};
};
Is there any update on this issue?
try with 2.6.0
I fixed my issue by disabling code split.
I use Sortable-tree in my project, works fine in development enviroment, but after running
npm run build
I get the following error in the browser console:main.js:910 Uncaught TypeError: n is not a function at Object.<anonymous> (main.js:910) at t (main.js:28) at Object.<anonymous> (main.js:1062) at t (main.js:28) at Object.<anonymous> (main.js:1029) at t (main.js:28) at main.js:82 at main.js:82 at main.js:2441 at Object../node_modules/react-sortable-tree/dist/main.js (main.js:2441)
this only happen in production enviroment.
How can i fix that?