Using a custom server ignore custom babelrc config

lionelB commented 7 years ago

Hello,

Using a custom server like the one parametrized routing and it seems that next ignore the .babelrc file at root of the project.

I use a custom .babelrc for babel-plugin-css-in-js and there is no css output

arunoda commented 7 years ago

@lionelB could you work on a sample repo where we can see what's going on here. Make sure to show us the expected result.

lionelB commented 7 years ago

@arunoda you can take look here https://github.com/lionelB/nextjs-sample

arunoda commented 7 years ago

@lionelB actually, this is a simple path error. You shouldn't link your CSS with relative URLs. You need to do it like this:

<link rel="stylesheet" href="/static/styles.css" />

lionelB commented 7 years ago

@arunoda it seems you misread this issue. On the linked repository, if you launch the app using npm run server (node server) (which used a custom server.js), the babel-plugin-css-in-js doesn't create the stylesheet file (wich is not the case when you use npm run dev (next)

lionelB commented 7 years ago

SO even if there is a console message that state "Using .babelrc defined in your app root" it doesn't

arunoda commented 7 years ago

It worked for me well. Here's the live version: https://nextjs-sample-ozaahbjnjf.now.sh/

I just had to change this:

diff --git a/pages/blog.js b/pages/blog.js
index 5119fdd..8ded7fc 100644
--- a/pages/blog.js
+++ b/pages/blog.js
@@ -9,7 +9,7 @@ export default class extends React.Component {
   render () {
     return <div>
       <Head>
-        <link rel="stylesheet" href="static/styles.css" />
+        <link rel="stylesheet" href="/static/styles.css" />
       </Head>
       <h1 className={styles.title}>My {this.props.id} blog post</h1>
       <p className={styles.paragraph}>
diff --git a/pages/index.js b/pages/index.js
index 1fc3264..90c4f03 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,7 +5,7 @@ export default () => (
   <ul className={ styles.nav }>

     <Head>
-      <link rel="stylesheet" href="static/styles.css" />
+      <link rel="stylesheet" href="/static/styles.css" />
     </Head>
     <li><Link href='/blog?id=first' as='/blog/first'><a>My first blog post</a></Link></li>
     <li><Link href='/blog?id=second' as='/blog/second'><a>My second blog post</a></Link></li>
@@ -19,5 +19,3 @@ const styles = cssInJS({
     textTransform: "uppercase"
   }
 })
-

lionelB commented 7 years ago

Thanks for the update, I was to concentrate on the generated file. When I was testing it, css file was not present, and only appear after I edited some js file. thanks for your help.

vercel / next.js

Using a custom server ignore custom babelrc config #761