react-three-next icon indicating copy to clipboard operation
react-three-next copied to clipboard

Published 20 hours ago • verified publisher icon pmndrs

Issues with babel during (official pmndrs) example code import into this template

Open semsion opened this issue 1 year ago • 0 comments

(Official pmndrs) Example code that's been imported into this template https://codesandbox.io/s/zgsyn

This is a copy of the template with the changes added https://github.com/semsion/R3F_Particles

  • UPDATE: Previous example code jsx commented out, as would cause further errors at a later build step.

After ensuring all the right files are copied over, all imports are accessible, and ensuring all other dependencies from the example package.json have been added, was initially getting the below error:

 ⨯ ./node_modules/@babel/core/lib/transformation/normalize-file.js:9:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@babel/core/lib/transformation/index.js
./node_modules/@babel/core/lib/transform.js
./node_modules/@babel/core/lib/index.js
./node_modules/babel-plugin-glsl/lib/processGlslTag.js
./node_modules/babel-plugin-glsl/macro.js
./src/components/canvas/shaders/simulationMaterial.js
./src/components/canvas/Particles.js
./src/components/canvas/Examples.jsx
./app/page.jsx

Then modified next.config.js with the below:

  ...
  images: {},
  future: { // NEW
    webpack5: true, // by default, if you customize webpack config, they switch back to version 4.
    // Looks like backward compatibility approach.
  },
  webpack(config, { isServer }) {
    config.resolve.fallback = { // NEW
      ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
      // by next.js will be dropped. Doesn't make much sense, but how it is
      fs: false, // the solution
    }
    if (!isServer) {
    ...

Next the following error was received:

⨯ ./node_modules/resolve-from/index.js:3:0
Module not found: Can't resolve 'module'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/import-fresh/index.js
./node_modules/babel-plugin-glsl/node_modules/cosmiconfig/dist/loaders.js
./node_modules/babel-plugin-glsl/node_modules/cosmiconfig/dist/index.js
./node_modules/babel-plugin-glsl/node_modules/babel-plugin-macros/dist/index.js
./node_modules/babel-plugin-glsl/macro.js
./src/components/canvas/shaders/simulationMaterial.js
./src/components/canvas/Particles.js
./src/components/canvas/Examples.jsx
./app/page.jsx

Then after adding a .babelrc file to the root directory, with the following inside:

{ "plugins": ["macros"] }

... am now receiving the below error, which has not been resolved:

⨯ ./app/layout.jsx:11:4
Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled (11:5):

   9 | export default function RootLayout({ children }) {
  10 |   return (
> 11 |     <html lang='en' className='antialiased'>
     |     ^
  12 |       {/*
  13 |         <head /> will contain the components returned by the nearest parent
  14 |         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

Any assistance would be gratefully received.

semsion avatar Nov 27 '23 00:11 semsion