admin管理员组

文章数量:1023782

I'm using Next.js for Server Side Rendering of React application (with styled-ponents) and have issue with Babel plugins I'm using to show name of the ponents I'm using in code.

This is my .babelrc file:

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    },
    "production": {
      "presets": "next/babel",
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "displayName": false,
            "ssr": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "monjs"
          }
        ],
        "next/babel"
      ]
    }
  }
}

When I'm running cross-env NODE_ENV=development concurrently "tsc --watch" next

I'm getting these lines - meaning .babelrc is used during copilation:

[1] > Using external babel configuration
[1] > Location: "...../.babelrc"
[1] > Using "webpack" config function defined in next.config.js.

But once I go to dev tools and see some styled-ponent I can see this: class="sc-iyvyFf gGaJAt" but on my code I have this definition:

const Title = styled.div`
  font-size: 40px;
  line-height: 1.13;
`

As it seems from documentation example - I should get something like ... <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />. But I don't.

After going deeper I found this issue ( ) based on errors I get in browser console that said:

It seems that only the server code is being transpiled and not the client code

I'm using Next.js for Server Side Rendering of React application (with styled-ponents) and have issue with Babel plugins I'm using to show name of the ponents I'm using in code.

This is my .babelrc file:

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false
          }
        ]
      ]
    },
    "production": {
      "presets": "next/babel",
      "plugins": [
        [
          "babel-plugin-styled-ponents",
          {
            "displayName": false,
            "ssr": true
          }
        ]
      ]
    },
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "monjs"
          }
        ],
        "next/babel"
      ]
    }
  }
}

When I'm running cross-env NODE_ENV=development concurrently "tsc --watch" next

I'm getting these lines - meaning .babelrc is used during copilation:

[1] > Using external babel configuration
[1] > Location: "...../.babelrc"
[1] > Using "webpack" config function defined in next.config.js.

But once I go to dev tools and see some styled-ponent I can see this: class="sc-iyvyFf gGaJAt" but on my code I have this definition:

const Title = styled.div`
  font-size: 40px;
  line-height: 1.13;
`

As it seems from documentation example - I should get something like ... <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />. But I don't.

After going deeper I found this issue ( ) based on errors I get in browser console that said:

It seems that only the server code is being transpiled and not the client code

本文标签： javascripthow to test if babel works and my plugins are executedStack Overflow

版权声明：本文标题：javascript - how to test if babel works and my plugins are executed - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745592846a2157988.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。