michalkvasnicak / babel-plugin-css-modules-transform

Extract css class names from required css module files, so we can render it on server.
MIT License
326 stars 54 forks source link

Unable to require/import images when using this plugin #93

Open PRossetti opened 6 years ago

PRossetti commented 6 years ago

I use this plugin for ignoring css, scss and svg require / import.

I have this in my src/server/index.js:

require('babel-register')({
  ignore: ['node_modules'],
  plugins: [
    "transform-react-jsx",
    [
      "babel-plugin-transform-require-ignore",
      {
        "extensions": [
          ".css", ".scss", ".svg"
        ]
      }
    ]
  ]
});

The problem is when in one of my isomorphic react components I try something like this: const logo = require('./logo.svg');

This immediately breaks my server when I run it with node or nodemon (nodemon src/server/index.js) with this error:

/Users/myUser/Projects/courses/react-ssr/node_modules/babel-core/lib/transformation/file/index.js:558 throw err; ^

Error: /Users/myUser/Projects/courses/react-ssr/src/shared/App.js: ./logo.svg should notbe imported using default imports. at PluginPass.enter (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-plugin-transform-require-ignore/lib/index.js:56:23) at newFn (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/visitors.js:276:21) at NodePath._call (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:76:18) at NodePath.call (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:48:17) at NodePath.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:105:12) at TraversalContext.visitQueue (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:150:16) at TraversalContext.visitMultiple (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:103:17) at TraversalContext.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/context.js:190:19) at Function.traverse.node (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/index.js:114:17) at NodePath.visit (/Users/myUser/Projects/courses/react-ssr/node_modules/babel-traverse/lib/path/context.js:115:19)

I need this plugin for ignoring those requires, otherwise my app breaks worst, and I need to require images because otherwise webpack doesn't find them and doesn't process them :(

Please help!

Some more information: I'm working in a React+Express project with SSR, inspired by this video: https://www.youtube.com/watch?v=tsEHfL-Ul1Y

BUT I don't won't to transpile my server code with webpack into new files. I only transpile my code on-the-fly with babel.

Hope you can help me! Regards!