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

semsion · 2023-11-27T00:41:07Z

(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.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

semsion commented Nov 27, 2023 •

edited

Loading

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

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

Comments

semsion commented Nov 27, 2023 • edited Loading

semsion commented Nov 27, 2023 •

edited

Loading