pmndrs / react-three-babel

🛍 A Babel plugin that automatically builds the extend catalogue of known native Three.js elements

react-three-babel

A Babel plugin for tree-shaking three.js via JSX.

npm install --save-dev @react-three/babel

// .babelrc or babel.config.js
{
  plugins: ['module:@react-three/babel']
}

react-three-babel's Issues

Cannot find package '@react-three/babel-plugin-babel'

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@react-three/babel-plugin-babel' imported from /Users/adamrobinson/Documents/ziggy-frontend/babel-virtual-resolve-base.js
at new NodeError (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:194:5)
at packageResolve (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:908:9)
at moduleResolve (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:937:20)
at defaultResolve (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1007:15)
at resolve (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:1020:12)
at tryImportMetaResolve (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/files/plugins.js:142:45)
at resolveStandardizedNameForImport (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/files/plugins.js:164:19)
at resolveStandardizedName (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/files/plugins.js:173:22)
at loadPlugin (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/files/plugins.js:52:20)
at loadPlugin.next ()
at createDescriptor (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-descriptors.js:140:16)
at createDescriptor.next ()
at step (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:261:32)
at evaluateAsync (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:291:5)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:44:11
at Array.forEach ()
at Function.async (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:43:15)
at Function.all (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:216:13)
at Generator.next ()
at createDescriptors (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-descriptors.js:102:41)
at createDescriptors.next ()
at createPluginDescriptors (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-descriptors.js:99:17)
at createPluginDescriptors.next ()
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/gensync-utils/functional.js:39:27
at Generator.next ()
at mergeChainOpts (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-chain.js:349:34)
at mergeChainOpts.next ()
at chainWalker (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-chain.js:316:14)
at chainWalker.next ()
at loadFileChain (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-chain.js:191:24)
at loadFileChain.next ()
at buildRootChain (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/config-chain.js:108:31)
at buildRootChain.next ()
at loadPrivatePartialConfig (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/partial.js:72:62)
at loadPrivatePartialConfig.next ()
at loadPartialConfig (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/config/partial.js:115:25)
at loadPartialConfig.next ()
at step (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:269:25)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:223:11)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:50:45
at step (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:287:14)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:223:11)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:189:28
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:113:33
at step (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:287:14)
at /Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/adamrobinson/Documents/ziggy-frontend/node_modules/gensync/index.js:223:11)

webpack 5.89.0 compiled with 1 error in 2854 ms

=== Babel.rc ====

{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
["@babel/preset-react", { "runtime": "automatic" }]
],
"plugins": [
["@react-three/babel"],
"lodash",
[
"module-resolver",
{
"root": ["./src"]
}
],
[
"babel-plugin-styled-components",
{
"pure": true
}
]
]
}

Plugin/Preset files are not allowed to export objects, only functions.

1、Dear all, my babel config is as follows

export default (api) => {
api.cache(true)

const presets = [
[
'@babel/preset-env',
{
corejs: '3.34',
useBuiltIns: 'entry',
// debug: true,
},
],
'@babel/preset-react',
]

const plugins = [
['module:@react-three/babel'],
]

return {
presets,
plugins,
}
}

2、my package.json is as follows

{
"name": "cloud-office-util-doc",
"version": "1.0.0",
"engines": {
"node": ">=18.0.0"
},
"dependencies": {
"@react-three/fiber": "^8.15.12",
"babel-runtime": "^6.26.0",
"core-js": "^3.34.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.155.0",
},
"devDependencies": {
"@babel/core": "^7.23.6",
"@babel/plugin-proposal-decorators": "^7.23.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.23.3",
"@babel/plugin-transform-runtime": "^7.23.6",
"@babel/preset-env": "^7.23.6",
"@babel/preset-react": "^7.23.3",
"@babel/runtime": "^7.23.6",
"@react-three/babel": "^1.0.1",
"@react-three/eslint-plugin": "^0.1.1",
"@types/node": "^18.19.3",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
"@types/three": "^0.155.1",
"@typescript-eslint/eslint-plugin": "^6.15.0",
"@typescript-eslint/parser": "^6.15.0",
"autoprefixer": "^10.4.16",
"babel-loader": "^9.1.3",
"babel-plugin-import": "^1.13.8",
"babel-plugin-lodash": "^3.3.4",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chalk": "^5.3.0",
"classnames": "^2.3.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"eslint": "^8.56.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-unicorn": "^50.0.1",
"fibers": "^5.0.3",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"html-webpack-plugin": "^5.6.0",
"husky": "^8.0.3",
"less": "^4.2.0",
"less-loader": "^11.1.3",
"lint-staged": "^15.2.0",
"mini-css-extract-plugin": "^2.7.6",
"moment-locales-webpack-plugin": "^1.2.0",
"patch-package": "^8.0.0",
"postcss": "^8.4.32",
"postcss-less": "^6.0.0",
"postcss-loader": "^7.3.3",
"postcss-scss": "^4.0.9",
"prettier": "^3.1.1",
"resolve-url-loader": "^5.0.0",
"rimraf": "^5.0.5",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"stylelint": "^16.0.2",
"stylelint-config-prettier-scss": "^1.0.0",
"stylelint-config-standard-scss": "^12.0.0",
"thread-loader": "^4.0.2",
"ts-loader": "^9.5.1",
"typescript": "^5.3.3",
"webpack": "^5.89.0",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.10.0"
},
}

3、when i compile the code with webpack, it output follow errors, how can i fix it;

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Plugin/Preset files are not allowed to export objects, only functions. In G:\gerrit_workspace\animation-editor-web\node_modules@react-three\babel\dist\index.mjs
at PoolWorker.fromErrorObj (G:\gerrit_workspace\animation-editor-web\node_modules\thread-loader\dist\WorkerPool.js:302:12)
at G:\gerrit_workspace\animation-editor-web\node_modules\thread-loader\dist\WorkerPool.js:184:29
at mapSeries (G:\gerrit_workspace\animation-editor-web\node_modules\neo-async\async.js:3625:14)
at PoolWorker.onWorkerMessage (G:\gerrit_workspace\animation-editor-web\node_modules\thread-loader\dist\WorkerPool.js:148:34)
at G:\gerrit_workspace\animation-editor-web\node_modules\thread-loader\dist\WorkerPool.js:124:14
at createDescriptor (G:\gerrit_workspace\animation-editor-web\node_modules@babel\core\lib\config\config-descriptors.js:160:11)
at createDescriptor.next ()
at step (G:\gerrit_workspace\animation-editor-web\node_modules\gensync\index.js:261:32)
at G:\gerrit_workspace\animation-editor-web\node_modules\gensync\index.js:273:13
at async.call.result.err.err (G:\gerrit_workspace\animation-editor-web\node_modules\gensync\index.js:223:11)

Plugin/Preset files are not allowed to export objects, only functions.

Build for production fails

When building a minfied bundle, this error pops up:

Module parse failed: Unexpected token [...]

Fix is in #7

Plugin is now compatible with current Canvas

There seems to be some outdated documentation re: using the react-three-babel plugin with the react-three-fiber Canvas component. Since v8 react-three-fiber has used createRoot.