React.lazy() in plugins

Adobe XD UXP Plugin API
1

I wonder why I’m not allowed to use React lazy in plugins? I get Unexpected token (19:31)


ERROR in ./src/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):    
SyntaxError: C:/Users/xxxxxxx/AppData/Local/Packages/Adobe.CC.XD_adky2gkssdxte/LocalState/develop/react-plugin/src/App.jsx: Unexpected token (19:31)

  18 | // import About from "./components/About"; // this works
> 19 | const About = React.lazy(() => import("./components/About")); 

 @ ./src/main.jsx 20:0-24 23:39-42
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[nodemon] app crashed - waiting for file changes before starting...
2

It’s hard for me to tell if it’s complaining about => or import(). I assume you’re able to use arrow functions elsewhere, correct?

Might need to see your webpack config.

3

@kerrishotts: correct, arrow functions work elsewhere in my code.

webpack.config.js :point_down:

module.exports = {
    entry: "./src/main.jsx",
    output: {
        path: __dirname,
        filename: 'main.js',
        libraryTarget: "commonjs2"
    },
    devtool: "none", // prevent webpack from using eval() on my module
    externals: {
        application: "application",
        uxp: "uxp",
        assets: "assets",
        scenegraph: "scenegraph",
        application: "application",
        commands: "commands",
        clipboard: "clipboard",
        cloud: "cloud",
        uxp: "uxp",
        viewport: "viewport",
        interactions: "interactions",
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    plugins: [
                        "transform-react-jsx",
                        "transform-object-rest-spread",
                    ]
                }
            },
            {
                test: /\.png$/,
                exclude: /node_modules/,
                loader: 'file-loader'
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

package.json👇

{
  "name": "myReactPlugin",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "npm run watch --production",
    "watch": "nodemon -w src -e js,jsx,json,css -w webpack.config.js -x yarn build",
    "build": "webpack --mode development"
  },
  "license": "none",
  "private": true,
  "devDependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "nodemon": "^1.18.7",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}
4

You’ll probably need to add some more plugins for Babel to support the import syntax. See if any of the discussion here helps.

1 Like
5

it works with these deps:

"dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
1 Like