import React from 'react' does not work

[arunk]

According to your README.md we should be able to import React from 'react'. The script compiles fine without errors, but when I try and run it within the game I get this error: Error while calculating ram usage for this script. File: "@react.js" not found on server: home

[shyguy1412]

There should be no @react.js, it just 'react' so it makes sense that file isnt found. Additionally, imports should be resolved at transpile time so it should be impossible for a script to contain an import statement unless its a dynamic import.

Can you share the relevant files, their path (relative to project root) and your build.mjs?

[arunk]

Sorry that was a mistake. Here is my file:

import { React, ReactDOM } from 'react';

const MyComponent = () => {
    {
        return
            <h2>This is my component</h2>
            ;
    }
}

const doc = eval("document");

ReactDOM.render(<MyComponent/>, doc.getElementById("root"));

This file is in the root of my home directory. It is called gui.js. My build.mjs is:

import { context } from 'esbuild';
import { BitburnerPlugin } from 'esbuild-bitburner-plugin';

const createContext = async () => await context({
  entryPoints: [
    'servers/**/*.js',
    'servers/**/*.jsx',
    'servers/**/*.ts',
    'servers/**/*.tsx',
  ],
  outbase: "./servers",
  outdir: "./build",
  plugins: [
    BitburnerPlugin({
      port: 12525,
      types: 'NetscriptDefinitions.d.ts',
      mirror: {
      },
      distribute: {
          'build/home': [ 'home' ]
      },
      extensions: [ ],
      ignore: [
        /\/Temp\//g,
      ],
      pushOnConnect: true,
    })
  ],
  bundle: true,
  format: 'esm',
  platform: 'browser',
  logLevel: 'debug',
  jsx: 'transform',
  loader: {
   '.js': 'jsx'
  }
});

const ctx = await createContext();
ctx.watch();

Thanks for your help.

[shyguy1412]

This file is in the root of my home directory. It is called gui.js.

You scripts for home should be located at ./servers/home/ relative to the project root (location of the package.json file)

Additionally, your distribute settings arent really doing anything. Files under ./build/home/ will always be uploaded to home after transpilation and should never be edited manually.

[arunk]

Yes the file gui.js is in ./servers/home. I will remove the distribute section in build.mjs. Earlier I was using the mirror option, to mirror the ./servers/home with the home server, but then I realized that my scripts are being compiled and then i'm losing the original js files. So I've stopped using mirror. This is the error I'm getting now when I'm running gui.js: Cannot read properties of undefined (reading 'render') stack:

[arunk]

I discovered that both React and ReactDOM are available as global variables to all scripts. So my UI scripts work without needing the import { React, ReactDOM }. Closing this issue, thanks!