To support apps running in docker containers

[GaitanK]

Your work has been very useful to us and makes our development easy. But there is one thing we felt that can be improved is adding support to apps running in Docker containers. We have our frontend and backend running simultaneously inside docker, so when we try to access a component it returns an error stating "This path does not exist on this computer".

We recommend a feature where we can provide a function as a prop which receives the actual path (in our case it's the path written in docker file) as input and converts that path to our current working directory.

Eg: <ClickToComponent pathModifier={(path)=>{ const modifiedPath = actualPath + path.slice(n); return modifiedPath; }}/>

[neo-sam]

Or modified babel.config.js plugin function:

const oldJsxSouceInjector =
  require('@babel/plugin-transform-react-jsx-source').default({
    assertVersion(v) {
      return v == 7;
    },
  }).visitor.JSXOpeningElement;

module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
  plugins: [
    ...(process.env.BABEL_ENV === 'development'
      ? [
          () => ({
            name: 'plugin-transform-react-jsx-source-with-realpwd',
            visitor: {
              JSXOpeningElement(path, state) {
                const { REALPWD } = process.env;
                if (REALPWD) {
                  const { filename: oldname, cwd } = state;
                  if (oldname && oldname.startsWith(cwd)) {
                    const newname = REALPWD + oldname.split(cwd)[1];
                    console.log(newname);
                    return oldJsxSouceInjector(path, {
                      ...state,
                      filename: newname,
                    });
                  }
                }
                return oldJsxSouceInjector(path, state);
              },
            },
          }),
        ]
      : []),
  ],
};

Usage:

pass env var REALPWD=$(pwd) into container, or REALPWD='wsl.localhost//devbook'$(pwd) for WSL

[hassanshaikley]

The plugin isn't working for me with vite 4.

I copy pasted

{
            name: 'plugin-transform-react-jsx-source-with-realpwd',
            visitor: {
              JSXOpeningElement(path, state) {
                const { REALPWD } = process.env;
                if (REALPWD) {
                  const { filename: oldname, cwd } = state;
                  if (oldname && oldname.startsWith(cwd)) {
                    const newname = REALPWD + oldname.split(cwd)[1];
                    console.log(newname);
                    return oldJsxSouceInjector(path, {
                      ...state,
                      filename: newname,
                    });
                  }
                }
                return oldJsxSouceInjector(path, state);
              },
            },
          }

and ran docker with REALPWD=/my/path

But I don't believe the plugin is doing anything because it is attempting to open vscode in the same location as before I added the plugin. What am I doing wrong?

Also I tried installing plugin-transform-react-jsx-source-with-realpwd but it doesn't appear to exist. Am I missing something?