Results 1 to 2 of 2

Thread: Custom theme falls back to default theme on production build

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Default Custom theme falls back to default theme on production build

    Hello, I have been working on a custom theme, which has worked very well in the local build, but at the time of creating the build for production it simply does not use my theme, instead it uses the default theme.
    It works great on dev build (npm start), but just dont apply on production (npm run build)

    Note: i create this theme by extending the default one, as shown in docs

    May i missing something? Ill leave here package.json and webpack.config.js

    PACKAGE.JSON
    HTML Code:
    {
      "name": "my-app",
      "version": "0.0.1",
      "description": "my-app description for React app MyApp",
      "keywords": [
        "ExtReact"
      ],
      "license": "ISC",
      "main": "index.js",
      "scripts": {
        "build": "npm run clean && cross-env webpack --env.environment=production",
        "clean": "rimraf build",
        "dev": "webpack-dev-server --env.verbose=no --env.environment=development",
        "pretest": "webpack --progress",
        "preupdate-snapshots": "webpack --progress",
        "prod": "webpack-dev-server --env.verbose=no --env.environment=production",
        "prod2": "cd build && static-server --port 8080",
        "start": "npm run dev",
        "test": "jest",
        "update-snapshots": "jest -u",
        "analyze": "source-map-explorer build/*.js"
      },
      "dependencies": {
        "@babel/polyfill": "^7.0.0",
        "@babel/runtime": "^7.1.5",
        "@sencha/ext": "~6.6.0",
        "@sencha/ext-exporter": "^6.7.0",
        "@sencha/ext-modern": "~6.6.0",
        "@sencha/ext-modern-theme-material": "~6.6.0",
        "@sencha/ext-modern-treegrid": "~6.6.0",
        "@sencha/ext-react": "~6.6.3",
        "@sencha/ext-react-renderercell": "~6.6.3",
        "@sencha/ext-react-transition": "~6.6.3",
        "ag-grid-community": "^19.1.4",
        "ag-grid-react": "^19.1.2",
        "axios": "^0.18.0",
        "prop-types": "^15.6.2",
        "react": "^16.6.3",
        "react-dom": "^16.6.3",
        "react-pure-modal": "^1.5.1",
        "react-redux": "^6.0.0",
        "react-router-dom": "^4.2.2",
        "redux": "^4.0.1",
        "redux-devtools-extension": "^2.13.7",
        "redux-logger": "^3.0.6",
        "redux-promise-middleware": "^5.1.1",
        "redux-thunk": "^2.3.0"
      },
      "devDependencies": {
        "@babel/core": "^7.1.6",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/plugin-proposal-decorators": "^7.1.6",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.1.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/plugin-transform-runtime": "^7.1.0",
        "@babel/preset-env": "^7.1.6",
        "@babel/preset-react": "^7.0.0",
        "@sencha/ext-react-babel-plugin": "~6.6.3",
        "@sencha/ext-react-webpack-plugin": "^6.6.0",
        "babel-loader": "^8.0.4",
        "babel-polyfill": "^6.26.0",
        "brotli-webpack-plugin": "^1.1.0",
        "compression-webpack-plugin": "^2.0.0",
        "cross-env": "^5.2.0",
        "css-loader": "^2.1.1",
        "eslint": "^5.16.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.17.3",
        "eslint-plugin-node": "^9.1.0",
        "eslint-plugin-promise": "^4.1.1",
        "eslint-plugin-react": "^7.13.0",
        "eslint-plugin-standard": "^4.0.0",
        "file-loader": "^3.0.1",
        "html-webpack-plugin": "^3.2.0",
        "portfinder": "^1.0.19",
        "react-hot-loader": "^4.3.12",
        "rimraf": "^2.6.2",
        "style-loader": "^0.23.1",
        "uglifyjs-webpack-plugin": "^2.1.3",
        "url-loader": "^1.1.2",
        "webpack": "^4.26.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      },
      "jest": {
        "collectCoverageFrom": [
          "src/**/*.{js,jsx}"
        ],
        "transform": {
          "^.+\\.jsx?$": "babel-jest"
        },
        "setupFiles": [
          "./node_modules/@sencha/ext-react/jest/setup.js",
          "./build/ext-react/ext.js"
        ],
        "unmockedModulePathPatterns": [
          "react",
          "react-dom",
          "react-addons-test-utils",
          "enzyme"
        ]
      }
    }
    webpack
    HTML Code:
    const webpack = require('webpack');
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const ExtWebpackPlugin = require('@sencha/ext-react-webpack-plugin')
    const portfinder = require('portfinder')
    const sourcePath = path.join(__dirname, './src') 
    const CompressionPlugin = require('compression-webpack-plugin');
    
    module.exports = function (env) {
      var buildprofile = env.profile || process.env.npm_package_extbuild_defaultprofile
      var buildenvironment = env.environment || process.env.npm_package_extbuild_defaultenvironment
      var buildverbose = env.verbose || process.env.npm_package_extbuild_defaultverbose
      if (buildprofile == 'all') { buildprofile = '' }
      const isProd = buildenvironment === 'production'
    
      portfinder.basePort = (env && env.port) || 1962; // the default port to use
      return portfinder.getPortPromise().then(port => {
        const plugins = [
          new HtmlWebpackPlugin({
            template: 'index.html',
            hash: true
          }),
          new ExtWebpackPlugin({
            framework: 'react',
            theme: 'custom-ext-react-theme',
            port: port,
            profile: buildprofile,
            environment: buildenvironment,
            verbose: buildverbose,
            //treeShaking: isProd,
            treeShaking: false,
            production: isProd
          })
        ]
        if (isProd) {
          plugins.push(
            new CompressionPlugin({
              filename: '[path].br[query]',
              algorithm: 'brotliCompress',
              test: /\.(js|css|html|svg)$/,
              exclude:/\.png$/,
              compressionOptions: { level: 4 },
              threshold: 10240,
              minRatio: 0.8,
              deleteOriginalAssets: false
            })
          )
          plugins.push(
            new CompressionPlugin({
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: /\.js$|\.css$|\.html$/,
              exclude:/\.png$/,
              threshold: 10240,
              minRatio: 0.8
            })
          ) 
        }
    
        plugins.push(
          new webpack.HotModuleReplacementPlugin(),
          new webpack.DefinePlugin({
            'process.imDevBuild': !isProd,
            'process.imProdBuild': isProd,
          }),
        )
        return {
          performance: {
            hints: false
          },
          optimization: { noEmitOnErrors: true },
          node: false,
    
          mode: buildenvironment,
          cache: true,
          devtool: isProd ? 'source-map' : false,
          context: sourcePath,
          entry: {
            'app': ['./index.js']
          },
          output: {
            path: path.resolve(__dirname, 'build'),
            filename: '[name].js'
          },
          module: {
            rules: [
              {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                  'babel-loader'
                ]
              },
              {
                test: /\.css$/,
                use: [
                  'style-loader',
                  'css-loader'
                ]
              },
              {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg|otf)$/,
                //test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)$/,
                //test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {},
                  },
                ],
              },
            ]
    
          },
          resolve: {
            // The following is only needed when running this boilerplate within the ext-react repo.  You can remove this from your own projects.
            alias: {
              "react-dom": path.resolve('./node_modules/react-dom'),
              "react": path.resolve('./node_modules/react'),
              //'react-dom': '@hot-loader/react-dom'
            }
          },
    
          plugins,
          devServer: {
            contentBase: './build',
            watchContentBase: true,
            historyApiFallback: true,
            hot: !isProd,
            host: '0.0.0.0',
            port: port,
            disableHostCheck: false,
            compress: isProd,
            inline: !isProd,
            stats: {
              assets: false,
              children: false,
              chunks: false,
              hash: false,
              modules: false,
              publicPath: false,
              timings: false,
              version: false,
              warnings: false,
              colors: {
                green: '\u001b[32m'
              }
            }
          }
        }
      })
    }
    PS: Help :c

  2. #2

    Default

    It has been resolved, there was a network problem wich lead to some problems with git

    Anyway, if this webpack or json is useful for someone else, there it is,

    Sencha SPA, compress plugin and hot module replace active

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •