[Toolchain] Fix SSR and react hooks support #3691

damassi · 2019-03-07T06:38:16Z

This fixes a few things:

The pesky styled-components SSR issue where a linked module would break server rendering due to the requirement that a single static context be present. We ran into this issue with react hooks earlier today during SSR so that's been added to the list of aliased modules.
Once the SSR pass was fixed client-side errors began to appear oddly enough, which I was able to track down to react-hot-loader.

With these items fixed I was able to remove the yarn start:ssr command and have tested cross-linking all the way across from reaction to palette.

peril-staging · 2019-03-07T06:58:42Z

New dependencies added: require-control.

require-control

Author: Anton Korzunov

Description: Get the full control over the nodejs module system.

Homepage: https://github.com/theKashey/require-control#readme


Created	10 months ago
Last Updated	8 months ago
License	ISC
Maintainers	1
Releases	7
Direct Dependencies	`babel-core` and `babel-plugin-transform-es2015-modules-commonjs`
Keywords	mocha, karma, babel, nodejs, imports, syntax-error and esm

README

require-control

This is a module-in-the-middle, require hack, path control, this is just a toolbox to master nodejs modules.

Fast relief againts the imports inside your node_modules.
A cure from "something.default is not a thing".
A way to tame module name resolution.

API

All commands returns a function to cancel side effects.
All commands could be run as many times as you wish, but only name resolution will make sense.

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

import 'require-control/register';

And then all imports inside node_modules will work

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports

import 'require-control/interop-require';

And then default will always exists.

3. To create a loop-aware module cache

import {mirrorModuleCache} from 'require-control';
mirrorModuleCache((requireName, absoluteFilePath) => boolean);

And that will change how cache works for the selected files.

4. To control path resolution

import {nameResolution} from 'require-control';
nameResolution((requireName, parent) => newFileName);

import {setAliases} from 'require-control';
setAliases({
  'from': 'to'
});

And then all module aliases (webpack resolve, ts paths, aliases, anything)

PS: You can use setAliases to achieve 10-100 speedup against tsconfig-paths, if you are not using "complex" typescript paths.

5. To apply any babel transformation, anywhere

babelIt(pick, babelSettings), where pick could return true, false, or code to pipe into babel.

import {babelIt} from 'require-control';

babelIt( fileName => fileName.includes('my-folder'), {
  babelrc: false,
  plugin: ['power-converter']
})

Examples

TypeScript + ES6 + Mocha

require('ts-node/register');  // support TS
require('babel-register');    // support ES

const { esm_modules, interopRequire, setAliases, resolutions } = require('require-control');

esm_modules();                // support ES in node_modules
interopRequire();             // "webpack" default imports everywhere in js,jsx,less,scss
interopRequire(['.less']);    // "webpack" default imports for .less files

setAliases({                  // why not!
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

resolutions(request => {      // custom resolution
  if (request === 'react') {
    return 'preact';
  }
});

Webpack aliases (or typescript paths)

const {setAliases } = require('require-control');

setAliases({                  
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

Licence

MIT

Generated by 🚫 dangerJS against 57914a0

peril-staging · 2019-03-07T07:03:10Z

New dependencies added: require-control.

require-control

Author: Anton Korzunov

Description: Get the full control over the nodejs module system.

Homepage: https://github.com/theKashey/require-control#readme


Created	10 months ago
Last Updated	8 months ago
License	ISC
Maintainers	1
Releases	7
Direct Dependencies	`babel-core` and `babel-plugin-transform-es2015-modules-commonjs`
Keywords	mocha, karma, babel, nodejs, imports, syntax-error and esm

README

require-control

This is a module-in-the-middle, require hack, path control, this is just a toolbox to master nodejs modules.

Fast relief againts the imports inside your node_modules.
A cure from "something.default is not a thing".
A way to tame module name resolution.

API

All commands returns a function to cancel side effects.
All commands could be run as many times as you wish, but only name resolution will make sense.

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

import 'require-control/register';

And then all imports inside node_modules will work

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports

import 'require-control/interop-require';

And then default will always exists.

3. To create a loop-aware module cache

import {mirrorModuleCache} from 'require-control';
mirrorModuleCache((requireName, absoluteFilePath) => boolean);

And that will change how cache works for the selected files.

4. To control path resolution

import {nameResolution} from 'require-control';
nameResolution((requireName, parent) => newFileName);

import {setAliases} from 'require-control';
setAliases({
  'from': 'to'
});

And then all module aliases (webpack resolve, ts paths, aliases, anything)

PS: You can use setAliases to achieve 10-100 speedup against tsconfig-paths, if you are not using "complex" typescript paths.

5. To apply any babel transformation, anywhere

babelIt(pick, babelSettings), where pick could return true, false, or code to pipe into babel.

import {babelIt} from 'require-control';

babelIt( fileName => fileName.includes('my-folder'), {
  babelrc: false,
  plugin: ['power-converter']
})

Examples

TypeScript + ES6 + Mocha

require('ts-node/register');  // support TS
require('babel-register');    // support ES

const { esm_modules, interopRequire, setAliases, resolutions } = require('require-control');

esm_modules();                // support ES in node_modules
interopRequire();             // "webpack" default imports everywhere in js,jsx,less,scss
interopRequire(['.less']);    // "webpack" default imports for .less files

setAliases({                  // why not!
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

resolutions(request => {      // custom resolution
  if (request === 'react') {
    return 'preact';
  }
});

Webpack aliases (or typescript paths)

const {setAliases } = require('require-control');

setAliases({                  
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

Licence

MIT

Generated by 🚫 dangerJS against 57914a0

ds300 · 2019-03-07T09:42:22Z

src/index.js

+  "styled-components": path.resolve(
+    path.join(__dirname, "../node_modules/styled-components")
+  ),
+})


alloy

Glad we’re in a place where linking no longer is such a pain! 👏 We should keep looking for solutions without hacks, but until then I’m not against them, this stuff is hard.

As for the map of aliases, is there any way we can extract them from here and the web pack config and maintain a single authoritative list that both places can import?

damassi · 2019-03-07T18:29:27Z

As for the map of aliases, is there any way we can extract them from here and the web pack config and maintain a single authoritative list that both places can import?

We can do that, something like a sharedAliases file. On the webpack side we're adding a few other aliases but those are old jQuery client libs, so we can cleanly separate.

alloy · 2019-03-07T20:15:33Z

Ace 👍 Feel free to either merge and iterate or add it now.

damassi · 2019-03-07T21:54:20Z

Looked at the webpack side of things and the form required is different enough to warrant a bit of duplication. That said, I added a comment on the Webpack side and we can return if this list grows a bit.

peril-staging · 2019-03-07T21:56:06Z

New dependencies added: require-control.

require-control

Author: Anton Korzunov

Description: Get the full control over the nodejs module system.

Homepage: https://github.com/theKashey/require-control#readme


Created	10 months ago
Last Updated	8 months ago
License	ISC
Maintainers	1
Releases	7
Direct Dependencies	`babel-core` and `babel-plugin-transform-es2015-modules-commonjs`
Keywords	mocha, karma, babel, nodejs, imports, syntax-error and esm

README

require-control

This is a module-in-the-middle, require hack, path control, this is just a toolbox to master nodejs modules.

Fast relief againts the imports inside your node_modules.
A cure from "something.default is not a thing".
A way to tame module name resolution.

API

All commands returns a function to cancel side effects.
All commands could be run as many times as you wish, but only name resolution will make sense.

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

import 'require-control/register';

And then all imports inside node_modules will work

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports

import 'require-control/interop-require';

And then default will always exists.

3. To create a loop-aware module cache

import {mirrorModuleCache} from 'require-control';
mirrorModuleCache((requireName, absoluteFilePath) => boolean);

And that will change how cache works for the selected files.

4. To control path resolution

import {nameResolution} from 'require-control';
nameResolution((requireName, parent) => newFileName);

import {setAliases} from 'require-control';
setAliases({
  'from': 'to'
});

And then all module aliases (webpack resolve, ts paths, aliases, anything)

PS: You can use setAliases to achieve 10-100 speedup against tsconfig-paths, if you are not using "complex" typescript paths.

5. To apply any babel transformation, anywhere

babelIt(pick, babelSettings), where pick could return true, false, or code to pipe into babel.

import {babelIt} from 'require-control';

babelIt( fileName => fileName.includes('my-folder'), {
  babelrc: false,
  plugin: ['power-converter']
})

Examples

TypeScript + ES6 + Mocha

require('ts-node/register');  // support TS
require('babel-register');    // support ES

const { esm_modules, interopRequire, setAliases, resolutions } = require('require-control');

esm_modules();                // support ES in node_modules
interopRequire();             // "webpack" default imports everywhere in js,jsx,less,scss
interopRequire(['.less']);    // "webpack" default imports for .less files

setAliases({                  // why not!
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

resolutions(request => {      // custom resolution
  if (request === 'react') {
    return 'preact';
  }
});

Webpack aliases (or typescript paths)

const {setAliases } = require('require-control');

setAliases({                  
  'common': path.join(root, 'src/common'),
  'components': path.join(root, 'src/components'),
});

Licence

MIT

Generated by 🚫 dangerJS against a76256a

damassi assigned alloy Mar 7, 2019

peril-staging bot added the Toolchain label Mar 7, 2019

damassi mentioned this pull request Mar 7, 2019

v2 => [Refactor] Update SystemContext API to support useContext artsy/reaction#2123

Merged

[Toolchain] Fix SSR and react hooks

57914a0

damassi force-pushed the investigate-hooks branch from 4612cde to 57914a0 Compare March 7, 2019 06:58

ds300 reviewed Mar 7, 2019

View reviewed changes

src/index.js

"styled-components": path.resolve(

path.join(__dirname, "../node_modules/styled-components")

),

})

Copy link

Contributor

ds300 Mar 7, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

alloy approved these changes Mar 7, 2019

View reviewed changes

Add guard against closest

91ecbc6

damassi force-pushed the investigate-hooks branch from a76256a to 2bf5818 Compare March 7, 2019 21:56

Add comment around aliasing

ab4bfe5

damassi force-pushed the investigate-hooks branch from 2bf5818 to ab4bfe5 Compare March 7, 2019 21:58

damassi merged commit 3cda413 into artsy:master Mar 7, 2019

damassi deleted the investigate-hooks branch March 7, 2019 22:06

[Toolchain] Fix SSR and react hooks support #3691

[Toolchain] Fix SSR and react hooks support #3691

Conversation

damassi commented Mar 7, 2019 • edited Loading

peril-staging bot commented Mar 7, 2019

require-control

require-control

API

1. To cure all imports nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing .default to exist on exports

3. To create a loop-aware module cache

4. To control path resolution

5. To apply any babel transformation, anywhere

Examples

TypeScript + ES6 + Mocha

Webpack aliases (or typescript paths)

Licence

peril-staging bot commented Mar 7, 2019

require-control

require-control

API

1. To cure all imports nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing .default to exist on exports

3. To create a loop-aware module cache

4. To control path resolution

5. To apply any babel transformation, anywhere

Examples

TypeScript + ES6 + Mocha

Webpack aliases (or typescript paths)

Licence

ds300 Mar 7, 2019

Choose a reason for hiding this comment

alloy left a comment

Choose a reason for hiding this comment

damassi commented Mar 7, 2019

alloy commented Mar 7, 2019

damassi commented Mar 7, 2019

peril-staging bot commented Mar 7, 2019

require-control

require-control

API

1. To cure all imports nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing .default to exist on exports

3. To create a loop-aware module cache

4. To control path resolution

5. To apply any babel transformation, anywhere

Examples

TypeScript + ES6 + Mocha

Webpack aliases (or typescript paths)

Licence

damassi commented Mar 7, 2019 •

edited

Loading

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports

1. To cure all `imports` nodejs could look inside packages, stored out of sight of babel, inside node_modules

2. To make your project webpack-compact(babel interop require) by forcing `.default` to exist on exports