threads-plugin icon indicating copy to clipboard operation
threads-plugin copied to clipboard

Does integration with CRACO require the part the docs mention about modifying babel presets?

Open SensationSama opened this issue 3 years ago • 3 comments

Hey there,

I am using create-react-app configuration override and trying to get threads-plugin to load properly. I'm not exactly sure how the following code fits into my config file.

According to the doc, "when using @babel/preset-env", the following should be added:

"presets": [
  ["env", {
    "modules": false
  }]
]

The guide specifies that CRA projects do not need to add this

If you are using create-react-app or babel-preset-react-app ("presets": ["react-app"]), you are already good to go - no need to adapt the configuration. 

Although in my case "@babel/preset-env" is included in my craco.config.js; so I assume it is necessary. This is my craco webpack config:

module.exports = {
    reactScriptsVersion: "react-scripts" /* (default value) */,
    babel: {
        "presets": ["@babel/preset-env", "@babel/preset-react"],
        "plugins": ["@emotion/babel-plugin", "@babel/plugin-proposal-throw-expressions"]
    },
    webpack: {
        plugins: {
            add: [new ThreadsPlugin()]
        }
    },
    eslint: {
        enable: false,
    }
};

So for instance I tried loading it as the following:

"presets": ["@babel/preset-env", "@babel/preset-react",  ["env", {
            "modules": false
        }]],

but it does not compile. Perhaps I am just getting the syntax wrong?

Failed to compile.

./src/index.js
Error: Cannot find module 'babel-preset-env'
- Did you mean "@babel/env"?
    at Array.map (<anonymous>)

Also I figured that according to my original stack trace in the dev tools

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

that the issue is a result of a failure to interpret the workers as modules (so hopefully I am on the right track).

Any clarification would be greatly appreciated 😃

SensationSama avatar Mar 03 '21 01:03 SensationSama