📝 Documentation: Create React App instructions are broken

[philsherry]

Bug Report Checklist

• [X] I have pulled the latest main branch of the repository.
• [X] I have searched for related issues and found none that matched my issue.

Overview

Neither of your CRA installation instructions work and result in million.craco is not a function (not sure why there are two; assuming oversight). They’re different enough to make me end up here and ask if someone can clarify.

Cheers.

1. https://million.dev/blog/lint

const MillionCompiler = require('@million/lint');
 
module.exports = {
  plugins: [MillionCompiler.craco({ legacyHmr: true })],
};

2. https://million.dev/docs/install

const million = require("million/compiler");
 
module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};

Additional Info

Yes, I have craco installed and configured.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[tobySolutions]

Hmm, hello there @philsherry, thank you for reporting this. It would really help me a lot if you provided a reproduction. Do you think you can help with that?

I don't seem to be experiencing the same issues on my end.

[cloughy]

im having the exact same issue trying to use @million/lint. having craco installed on a CRA, following those instructions i get the following error TypeError: MillionCompiler.craco is not a function on craco.js.

/Users/[...]/craco.config.js:7
    plugins: [MillionCompiler.craco({ legacyHmr: true })],

On the other hand million/compiler works as expected.

[philsherry]

@tobySolutions There are two different sets of installation instructions for the same task, appearing in two different places. Is it safe to assume that there should only be one set of instructions? If so, which of the two is correct? @cloughy gets the same issue that I reported by running the code from one of those sets of instructions.

Can someone please clarify the instructions for installation with craco, and then update the blog or docs to reflect that clarity? Maybe even add a working example with a craco.config.js?

[tobySolutions]

Um, thank you very much @philsherry, @cloughy. Craco with Million optimizer seems to be working fine for me with this same config:

const million = require("million/compiler");
 
module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};

With Million Lint however, there have been cases where people experienced difficulties using Craco to set up Million lintand the team has worked to get that resolved. In the very next and upcoming release, issues like these wouldn't happen again.

Thank you @philsherry, maybe you can help with a reproduction for the cases so I can further investigate. I will begin work on the docs though to help clear out and clarify things on there.

[aviv-skillset]

I'd love to add some context,

const MillionCompiler = require('@million/lint/dist/compiler/craco');

does export something that can't be imported otherwise (without mentioning the dist folder explicitly) which looks like a craco middleware, yet it does not work even if you try to import it.

[tobySolutions]

@tobySolutions There are two different sets of installation instructions for the same task, appearing in two different places. Is it safe to assume that there should only be one set of instructions? If so, which of the two is correct? @cloughy gets the same issue that I reported by running the code from one of those sets of instructions.

Can someone please clarify the instructions for installation with craco, and then update the blog or docs to reflect that clarity? Maybe even add a working example with a craco.config.js?

Hello there @philsherry, sorry for the confusion. Yes, they are two different installations; the first one is for the Million OSS (Million optimizer) and the other is for Million Lint (The Linter).

• Million OSS: https://million.dev/docs/install#install-millionjs
• Million Lint: https://million.dev/blog/lint#install-npm-package

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[aviv-skillset]

I still haven't seen any progress in this issue (to be honest, didn't try to install again in case the versions bumped). just commenting to show this is not stale

[tobySolutions]

I still haven't seen any progress in this issue (to be honest, didn't try to install again in case the versions bumped). just commenting to show this is not stale

Hey there, sorry for the auto-labelling bot. Can you please retry and let me know how that goes? I'll see to it that the team's attention is drawn to this if you still experience the same thing.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[PaloSP]

Hello, I have a same issue.

I am using

"@craco/craco": "^7.1.0" 
"@million/lint": "^1.0.0-rc.24"
"react": "^18.2.0",
"react-scripts": "^5.0.1",
Node.js v18.14.2

TypeError: MillionCompiler.craco is not a function

When I use console.log("🚀 ~ MillionCompiler:", MillionCompiler);

I am getting this

🚀 ~ MillionCompiler: { astro: [Getter], babel: [Getter], craco: [Getter], default: [Getter], esbuild: [Getter], next: [Getter], rollup: [Getter], rspack: [Getter], unplugin: [Getter], vite: [Getter], webpack: [Getter] }

[NisargIO]

Hey @PaloSP! We just pushed a fix. Can you try updating @million/lint?

npx @million/lint@latest

[PaloSP]

Hello @NisargIO, thank you for quick response.

With this update I am not longer getting this eror.

However I am getting another one. App seems to be running but only white screen appear.

Uncaught TypeError: Cannot read properties of null (reading 'useRef') at Object.useRef (react.development.js:1630:1) at useFiber (index.mjs:922:1) at captureMount (index.mjs:1727:1) at $$ (index.mjs:1808:1) at App (App.tsx:36:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1)

Is it something with my code or with million? It is working without million.

[lemanschik]

only to inform you all the issue is not from million its from craco and create react app and the docs are not correct anymore the correct way to solve this is not using million as a whole as it is a missleaded concept at whole.