So I got a package that needs to be installed globally and that takes user defined react components and renders them. I use babel-register and define:
require('babel-register')({
presets: [
'es2015',
'stage-0',
'react',
],
});
My package.json file looks like this:
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babel-runtime": "^6.23.0",
"chokidar": "^1.7.0",
"del": "^2.2.2",
"marked": "^0.3.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"window-size": "^1.0.0",
"yamljs": "^0.2.10"
},
Now because those user defined react components sometimes live in places that don’t have a .babelrc installed or any of the packages, I would really like to use the ones that have been installed globally with the package dependencies. I'm trying to avoid having to install those dependencies when you got my package installed globally. Though not sure how.
I checked the node_module folder and do have all dependencies installed there:
.
[...]
├── babel-code-frame
├── babel-core
├── babel-generator
├── babel-helper-bindify-decorators
├── babel-helper-builder-binary-assignment-operator-visitor
├── babel-helper-builder-react-jsx
├── babel-helper-call-delegate
├── babel-helper-define-map
├── babel-helper-explode-assignable-expression
├── babel-helper-explode-class
├── babel-helper-function-name
├── babel-helper-get-function-arity
├── babel-helper-hoist-variables
├── babel-helper-optimise-call-expression
├── babel-helper-regex
├── babel-helper-remap-async-to-generator
├── babel-helper-replace-supers
├── babel-helpers
├── babel-messages
├── babel-plugin-check-es2015-constants
├── babel-plugin-syntax-async-functions
├── babel-plugin-syntax-async-generators
├── babel-plugin-syntax-class-constructor-call
├── babel-plugin-syntax-class-properties
├── babel-plugin-syntax-decorators
├── babel-plugin-syntax-do-expressions
├── babel-plugin-syntax-dynamic-import
├── babel-plugin-syntax-exponentiation-operator
├── babel-plugin-syntax-export-extensions
├── babel-plugin-syntax-flow
├── babel-plugin-syntax-function-bind
├── babel-plugin-syntax-jsx
├── babel-plugin-syntax-object-rest-spread
├── babel-plugin-syntax-trailing-function-commas
├── babel-plugin-transform-async-generator-functions
├── babel-plugin-transform-async-to-generator
├── babel-plugin-transform-class-constructor-call
├── babel-plugin-transform-class-properties
├── babel-plugin-transform-decorators
├── babel-plugin-transform-do-expressions
├── babel-plugin-transform-es2015-arrow-functions
├── babel-plugin-transform-es2015-block-scoped-functions
├── babel-plugin-transform-es2015-block-scoping
├── babel-plugin-transform-es2015-classes
├── babel-plugin-transform-es2015-computed-properties
├── babel-plugin-transform-es2015-destructuring
├── babel-plugin-transform-es2015-duplicate-keys
├── babel-plugin-transform-es2015-for-of
├── babel-plugin-transform-es2015-function-name
├── babel-plugin-transform-es2015-literals
├── babel-plugin-transform-es2015-modules-amd
├── babel-plugin-transform-es2015-modules-commonjs
├── babel-plugin-transform-es2015-modules-systemjs
├── babel-plugin-transform-es2015-modules-umd
├── babel-plugin-transform-es2015-object-super
├── babel-plugin-transform-es2015-parameters
├── babel-plugin-transform-es2015-shorthand-properties
├── babel-plugin-transform-es2015-spread
├── babel-plugin-transform-es2015-sticky-regex
├── babel-plugin-transform-es2015-template-literals
├── babel-plugin-transform-es2015-typeof-symbol
├── babel-plugin-transform-es2015-unicode-regex
├── babel-plugin-transform-exponentiation-operator
├── babel-plugin-transform-export-extensions
├── babel-plugin-transform-flow-strip-types
├── babel-plugin-transform-function-bind
├── babel-plugin-transform-object-rest-spread
├── babel-plugin-transform-react-display-name
├── babel-plugin-transform-react-jsx
├── babel-plugin-transform-react-jsx-self
├── babel-plugin-transform-react-jsx-source
├── babel-plugin-transform-regenerator
├── babel-plugin-transform-strict-mode
├── babel-preset-es2015
├── babel-preset-flow
├── babel-preset-react
├── babel-preset-stage-0
├── babel-preset-stage-1
├── babel-preset-stage-2
├── babel-preset-stage-3
├── babel-register
├── babel-runtime
├── babel-template
├── babel-traverse
├── babel-types
[...]
├── react
[...]
└── yamljs
220 directories, 0 files
I get this error: Couldn't find preset "es2015" relative to directory.
Installing locally works but I can't use the bin binding and some other features I would like to add.
I tried to play around with the ignore or only options but to no success.
So I guess:
How can I import react components and babelfy them from a folder that is far away from my own node_modules folder that may not have any dependencies installed there without an error?
So turns out you can pass absolute path to the babel-register call:
require('babel-register')({
presets: [
Path.normalize(`${ __dirname }/../node_modules/babel-preset-es2015`),
Path.normalize(`${ __dirname }/../node_modules/babel-preset-stage-0`),
Path.normalize(`${ __dirname }/../node_modules/babel-preset-react`),
]
});
Which seems to work but now the app is complaining about not being able to find react: Error: Cannot find module 'react' even though it's in the dependencies.
So the error for not being able to find react has to do with the components obviously importing react. I wonder if I can redirect import statements to my global folder? And yes you can with this nifty plugin: https://github.com/Velenir/babel-plugin-import-redirect :)
So the answer turns out to be absolute paths inside my babel-register call. That resolved the initial issue. :) Hope it helps someone passing by.
require('babel-register')({
presets: [
Path.normalize(`${ __dirname }/../node_modules/babel-preset-es2015`),
Path.normalize(`${ __dirname }/../node_modules/babel-preset-stage-0`),
Path.normalize(`${ __dirname }/../node_modules/babel-preset-react`),
]
});