search

mzohaibqc / antd-live-theme

Customize Ant Design specific colors dynamically on runtime
https://antd-live-theme.firebaseapp.com/
121 stars 15 forks source link

Works well in development, but not when deployed to production #1

Closed elie222 closed 6 years ago

elie222 commented 6 years ago

We get the following error when deploying to Netlify and we don't see the colors updated as expected although it works nicely in local development:

less.min.js:13 
b.exports {type: "Parse", filename: "http://my-site.netlify.com/color.less", index: 0, line: 1, callLine: NaN, …}
callExtract
:
undefined
callLine
:
NaN
column
:
0
extract
:
(3) [undefined, "<!DOCTYPE html><html lang="en"><head><meta charset…a1bc/static/css/main.1eac8156.css'/></head><body>", "        <link rel="stylesheet/less" type="text/css" href="/color.less" />"]
filename
:
"http://my-site.netlify.com/color.less"
href
:
"http://my-site.netlify.com/color.less"
index
:
0
line
:
1
message
:
"Unrecognised input"
stack
:
undefined
type
:
"Parse"
__proto__
:
Error

Any idea why we're getting this error?

mzohaibqc commented 6 years ago

@elie222 can you share your index.html file section containing color.less link.

elie222 commented 6 years ago

Will do shortly. Using in a cra app

On Wed, 2 May 2018, 23:25 Zohaib Ijaz, notifications@github.com wrote:

@elie222 https://github.com/elie222 can you share your index.html file section containing color.less link.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mzohaibqc/antd-live-theme/issues/1#issuecomment-386109303, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8oX0fu0udjH2JK3DQIc3rv3EJj6sxuks5tuhYhgaJpZM4TwBJL .

elie222 commented 6 years ago

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/images/favicons/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/images/favicons/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/images/favicons/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/images/favicons/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/images/favicons/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/images/favicons/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/images/favicons/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/images/favicons/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/images/favicons/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/images/favicons/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/images/favicons/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/images/favicons/apple-icon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/images/favicons/apple-icon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/images/favicons/apple-icon-16x16.png" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="theme-color" content="#ffffff" />

    <title>Demo</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

index.js:

/* eslint import/first: "off" */
require('dotenv').config()
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import './index.css'
import './styles/index.less'

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker()
mzohaibqc commented 6 years ago

@elie222 There is not enough information to find the cause but my guess is that something is wrong with generated color.less file. Kindly show me your config-overrides.js configurations. Maybe you build does not contain color.less file.

elie222 commented 6 years ago

So I just ran yarn build locally and it works. I think it's a redirect issue on Netlify for /color.less. Will update shortly.

This is our config file:

const path = require('path')
const { updateConfig } = require('react-app-rewire-antd-theme')

const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: [
    '@primary-color',
    // '@secondary-color',
    // '@text-color',
    // '@text-color-secondary',
    // '@heading-color',
  ],
  indexFileName: 'index.html',
}
module.exports = function override(config, env) {
  config = updateConfig(config, env, options)
  return config
}
elie222 commented 6 years ago

I finally got it working. Thanks. The issue I had in production was a Netlify redirect issue, where it was forcing the redirect and not loading the file.

Thanks for the help.

mzohaibqc commented 6 years ago

@elie222 Great. Glad to help you :)

mzohaibqc commented 6 years ago

@elie222 I've uploaded a new version which contain some bug fixes. Kindly update your local package.

v5zz commented 5 years ago

@elie222 I met the same problem, can you tell me how to solve

elie222 commented 5 years ago

I don’t remember exactly at this point. Try a more a more simple Netlify redirect file. Check their documentation for spas but maybe don’t use * or stop the redirection for certain files.

If there is a redirect. Try checking the network tab. And also doing preserve logs in the chrome console