Usign as an ESM module without any build step

[nestarz]

Hello,

I would like to use this library without any build step and using esm-react.

This mean (maybe) I need a build of react-three-fiber without any dependencies. I did that by modifying the rollup config with the code above:

Do you think that is a good idea ? Thanks !

import path from 'path'
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import json from 'rollup-plugin-json'
import commonjs from 'rollup-plugin-commonjs'
import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
import { terser } from 'rollup-plugin-terser'

const root = process.platform === 'win32' ? path.resolve('/') : '/'
const external = id => !id.startsWith('.') && !id.startsWith(root)
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']

const getBabelOptions = ({ useESModules }, targets) => ({
  babelrc: false,
  extensions,
  exclude: '**/node_modules/**',
  runtimeHelpers: true,
  presets: [
    ['@babel/preset-env', { loose: true, modules: false, targets }],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    ['@babel/proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
    ['transform-react-remove-prop-types', { removeImport: true }],
    ['@babel/transform-runtime', { regenerator: false, useESModules }],
  ],
})

function createConfig(entry, out, minify) {
  return [
    {
      input: `./src/${entry}/index`,
      output: { file: `dist/${out}.js`, format: 'esm' },
      plugins: [
        commonjs({
          namedExports: {
            // left-hand side can be an absolute path, a path
            // relative to the current directory, or the name
            // of a module in node_modules
            scheduler: [
              'unstable_runWithPriority',
              'unstable_IdlePriority',
              'unstable_now',
              'unstable_scheduleCallback',
              'unstable_cancelCallback',
            ],
            react: [
              'createContext',
              'useState',
              'useRef',
              'useCallback',
              'useLayoutEffect',
              'useEffect',
              'useContext',
              'useMemo',
            ],
          },
        }),
        json(),
        babel(getBabelOptions({ useESModules: true }, '>1%, not dead, not ie 11, not op_mini all')),
        sizeSnapshot(),
        resolve({ extensions }),
        minify ? terser() : null,
      ],
    },
    {
      input: `./src/${entry}/index`,
      output: { file: `dist/${out}.cjs.js`, format: 'cjs' },
      external,
      plugins: [
        json(),
        babel(getBabelOptions({ useESModules: false })),
        sizeSnapshot(),
        resolve({ extensions }),
        minify ? terser() : null,
      ],
    },
  ]
}

export default [
  ...createConfig('targets/web', 'web'),
  ...createConfig('targets/web', 'web.min', true),
  //...createConfig('targets/native', 'native')
]

[drcmda]

its fine. the scheduler isn't shared anyway among reconcilers, each has to carry its own.

[nestarz]

Well, i'm facing some issues, I got this error:

Hooks can only be called inside the body of a function component.

There are three common reasons you might be seeing it:

You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
Let’s look at each of these cases.

I think that is because I bundled React with react-three-fiber, and two React can't cohabit (maybe ?).

[drcmda]

im not sure how react-esm works. but yes, two react version are poison for hooks, there must be a flaw in that build config somewhere.

[nestarz]

I gave up for now, I didn't found any solution even if I liked the idea to not have any build step. But if you have any idea how to configure rollup to produce a valid esm build that work in the browser, I'm very welcolme :) Thanks again

Also, react-esm is react, the authors say its a

An ES6 module exposing the latest version of react and react-dom

https://github.com/lukejacksonn/es-react

[drcmda]

i know too little about es-react unfortunately. if you should ever solve it, prs welcome