Code editor + Create React App

[llermaly]

Description

Explain how we can use the "ace" object of the Code Editor component when the application was created using create react app.

Would be nice to have for people that doesn't interact with webpack a lot.

Tried to follow this guide:

https://cloudscape.design/components/code-editor/?tabId=api

Using create-react-app with no success

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[gethinwebster]

Moved to a discussion as we generally don't document integration with every possible build tool/environment in our website.

[gethinwebster]

Could you provide some more context about the sorts of problems you're seeing? We don't generally use create-react-app very often so aren't experts on this, but if you can provide some more details we might be able to give some recommendations.

[llermaly]

@gethinwebster Thank you.

The issue is the code editor component requires extra steps to make the ace object and documentation only mention some things about webpack, would be great to have an example webpack config file.

I was reading to modify the webpack config in create-react-app projects you need to eject the project, or use an extra library like react-app-rewired https://www.npmjs.com/package/react-app-rewired so that's probably out of scope, I will redirect the topic to add more explanation about the webpack piece, even though making it easier would attract more people.

I understand you can load the dependencies here in react:

  componentDidMount() {
    this.setState({ loading: true });

    import('ace-builds')
      .then(ace =>
        import('ace-builds/webpack-resolver')
          .then(() => {
            ace.config.set('useStrictCSP', true);
            ace.config.set('loadWorkerFromBlob', false);
            this.setState({ ace, loading: false });
          })
          .catch(() => this.setState({ loading: false }))
      )
      .catch(() => this.setState({ loading: false }));
  }

How should the webpack file looks like for this to work?

[gethinwebster]

No specific webpack configuration should be required - all that's needed is that dynamic import syntax is supported, which is enabled by default in create-react-app from what I can see.

[gethinwebster]

I tried this out locally, and found that there is a problem with the latest 1.9.x versions of ace-builds (ajaxorg/ace#4897), so you should instead use v1.8.x, or remove the line ace.config.set('useStrictCSP', true);

[llermaly]

Perfect. After removing useStrictCSP block it works.

  useEffect(() => {
    setLoading(true);
    import("ace-builds")
      .then((ace) =>
        import("ace-builds/webpack-resolver")
          .then(() => {
            ace.config.set("loadWorkerFromBlob", false);
            setAce(ace);
            setLoading(false);
          })
          .catch(() => setLoading(false))
      )
      .catch(() => setLoading(false));
  }, []);

See this warning though:

WARNING in ./node_modules/ace-builds/src-noconflict/worker-coffee.js (./node_modules/file-loader/dist/cjs.js?esModule=false!./node_modules/ace-builds/src-noconflict/worker-coffee.js) Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'data:application/json;base64,': SyntaxError: Unexpected end of JSON input