morlay / babel-plugin-transform-require-ignore

65 stars 13 forks source link

This is not working for me. #8

Open Panoplos opened 7 years ago

Panoplos commented 7 years ago

I have a server that is performing SSR on a React App that uses less-loader in the webpack build of the app. When serving in production, SSR fails on the less import statements as I am not using webpack to initialise the server...which is why I tried your plugin.

The server is started with the following script:

require('babel-register')({
  'plugins': [
    [
      'babel-plugin-transform-require-ignore',
      {
        extensions: ['.less']
      }
    ]
  ]
})
require(require('path').join(__dirname, 'server'))

However, I am still getting

server:ssr     We are going to do full SSR, here...
  xxx GET / 500 254ms -

  SyntaxError: /home/Panoplos/Documents/Development/Node.js/test-ssr/src/universal/modals/components/modalWrapper.less: Unexpected token (1:0)
  > 1 | @import (multiple) 'settings.less';
      | ^
    2 | @import (reference) 'animation.less';
    3 | 
    4 | #backdrop {
      at Parser.pp$5.raise (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:4443:13)
      at Parser.pp.unexpected (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1755:8)
      at Parser.pp$1.parseDecorator (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1933:10)
      at Parser.pp$1.parseDecorators (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1918:26)
      at Parser.pp$1.parseStatement (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1812:10)
      at Parser.parseStatement (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:5795:22)
      at Parser.pp$1.parseBlockBody (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:2262:21)
      at Parser.pp$1.parseTopLevel (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1772:8)
      at Parser.parse (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:1667:17)
      at parse (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babylon/lib/index.js:7163:37)
      at File.parse (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/transformation/file/index.js:517:15)
      at File.parseCode (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/transformation/file/index.js:602:20)
      at /home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/transformation/pipeline.js:49:12
      at File.wrap (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/transformation/file/index.js:564:16)
      at Pipeline.transform (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
      at Object.transformFileSync (/home/Panoplos/Documents/Development/Node.js/test-ssr/node_modules/babel-core/lib/api/node.js:152:10)

My .babelrc looks like this:

{
  "presets": [
    "flow",
    "react",
    [
      "env",
      {
        "targets": {
          "node": "current"
        },
      "useBuiltIns": true
      //"debug": true
      }
    ]
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    ["module-resolver", {
      "root": ["./src"]
    }]
  ]
}
morlay commented 7 years ago

Could you put this plugin in babelrc ?(with env switch options )

not sure your babel-register works.

Panoplos commented 7 years ago

The plugin works in babelrc, but this is not ideal. When you mention that you are not sure if my babel-register works, what do you mean? It is working for all other babel related polyfills, like es6 modules.

morlay commented 7 years ago

Works in babelrc, means this is not an issue for this plugin.

May some issue with babel-register, could you provide an mini repo for reproducing this issue.

BTW, don't suggest use babel-register in production, compile codes before deploying. require hook is not stable.

Panoplos commented 7 years ago

Not sure I said anything about production mode. I am using webpack for server build and will rely on this plugin in the webpack config. Anyway, it was advertised that this works with the babel register hook, which it didn't, so I thought I would report the issue. Setting up a repo for reproduction of this is not something I have the time for, sorry.

Panoplos commented 7 years ago

That said, here are my software versions, for your reference:

node: v7.10.1 babel-core: 6.24.1 babel-register: 6.24.1 babel-loader: 7.1.1 babel-preset-env: 1.6.0 babel-plugin-transform-require-ignore: 0.1.1

morlay commented 7 years ago

babel-register uses for runtime,like testing in node. If you put this in code, that means you have to use this in production or other environments . it is not for compiling code.

For webpack user, you can use the first case in ReadMe of repo home. And run BABEL_ENV=node babel to make this plugin enabled only for node

Panoplos commented 7 years ago

Again, I am not using the above entry script in the webpack build. Just for running the server in dev mode. I have a specific webpack config for building the server that does not use babel-register, as it polyfills via other means.