Description
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!