Feedback thread for CRA migration tool

[ijjk]

Please leave your feedback about the Create React App to Next.js migration tool in this thread.

[tonimelisma]

Doesn't seem to work for me, missing dependency:

Need to install the following packages:
  @next/codemod
Ok to proceed? (y) 
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
? On which files or directory should the codemods be applied? .
Error: Cannot find module 'jscodeshift/src/runner'
Require stack:
- /home/toni/.npm/_npx/a0dc7465aefb54f9/node_modules/@next/codemod/lib/run-jscodeshift.js
- /home/toni/.npm/_npx/a0dc7465aefb54f9/node_modules/@next/codemod/transforms/cra-to-next.js
- /home/toni/.npm/_npx/a0dc7465aefb54f9/node_modules/@next/codemod/bin/cli.js
- /home/toni/.npm/_npx/a0dc7465aefb54f9/node_modules/@next/codemod/bin/next-codemod.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
    at Function.Module._load (node:internal/modules/cjs/loader:774:27)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/home/toni/.npm/_npx/a0dc7465aefb54f9/node_modules/@next/codemod/lib/run-jscodeshift.js:7:34)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)

[starman-vlad]

Running the npx @next/[email protected] cra-to-next <path> resolves the issue.

[ppbl]

After the migration is successful, run next dev,
Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

[ppbl]

This is because I wrote the static img and used the style attribute in index.html in CRA. The style attribute has no conversion, which is not a big problem

[ghost]

After conversion, the CSS imports in _app.js are based on my file system and are not relative!! While in my CRA project I used relative paths.

[DoctorDerek]

Even better on Windows the slashes got stripped completely

import "C:devcalendar-appointmentssrcindex.css"

But I'm used to Windows development being fragile -- the whole \\ on Windows but / for file paths on Linux thing is just one issue 😀

[kylemh]

If CRA users are taking advantage of SVGR, this codemod will need to deal with that.

[vinniimiranda]

I got this Error: Cannot find module 'react/jsx-dev-runtime'

[ijjk]

Are you on a compatible react version as mentioned here https://nextjs.org/docs/upgrading#upgrade-react-version-to-latest?

[stunaz]

Didn't try yet, but can it work with react-router installed ?

[ijjk]

Yes, you can continue using react-router and incrementally migrate to adopt Next.js page routing

[shivika24]

When we migrate a reactJs codebase to nextJs using npx @next/codemod cra-to-next and view the page source of the page corresponding HTML page is not generated. It just shows:-

<style data-next-hide-fouc="true">body{display:none}</style><style>body{display:block}</style>You need to enable JavaScript to run this app.<title>TEST App</title><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1623927770471"></script><script src="/_next/static/chunks/webpack.js?ts=1623927770471" defer=""></script><script src="/_next/static/chunks/main.js?ts=1623927770471" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1623927770471" defer=""></script><script src="/_next/static/chunks/pages/%5B%5B...slug%5D%5D.js?ts=1623927770471" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1623927770471" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1623927770471" defer=""></script>

<script src="/_next/static/chunks/react-refresh.js?ts=1623927770471"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/[[...slug]]","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>

So how can it be used for SEO?

Whereas if i create a new page in /pages directory and add the similar code and then view the page source the corresponding HTML is generated.

[ijjk]

This is from ssr: false being set on const NextIndexWrapper = dynamic(() => import('${relativeIndexPath}'), { ssr: false }) to prevent incompatibilities with SSR. You can set this to true if you aren't leveraging window usage unsafely.

[shivika24]

react-router routes are also not being created in /pages directory with route name. so react-router is not automatically being converted and with npx @next/codemod cra-to-next only [[...slug]].js is created. so how is it migrating react-app to nextJs?

[panmona]

@shivika24 If you want to migrate away from React Router see this: https://nextjs.org/docs/migrating/from-react-router

[serrg]

I do not know what to think, got this result:

All done. 
Results: 
0 errors
0 unmodified
1762 skipped
0 ok

and the diff shows:

- ReactDOM.render(
+ export default function NextIndexWrapper() {

That's all :)
I would expect a change to package.json at least :)

[ijjk]

@serrg did the package.json not get updated and auto-install next for you replacing react-scripts? If so could you provide a minimal example so we can investigate further?

[ijjk]

@dusty rewrites are supported with craCompat can you provide a minimal example where they are not working for you?

[dusty]

Ya, I'll put one together, thanks for the reply.

[dusty]

It was user error, I made the assumption that { source: '/somepath' } would proxy the entire path, what I needed was { source: '/somepath/:path*'}

[serrg]

@ijjk Exactly, package.json is not modified
Just index.tsx was modified with changing ReactDOM.render to export default function NextIndexWrapper() {

On branch develop
Your branch is up to date with 'origin/develop'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   src/index.tsx

I am trying to make a minimal example, the app is not small as you can see there is about 1762 files, I will try to cut it.

[IsaacMabol]

Thanks for your patience I have got your help today

[stv8]

Couple of issues I ran into.

1. When converting script imports from CRA's index.html, it turned this

index.html

<script
      defer
      src="https://static.cloudflareinsights.com/beacon.min.js"
      data-cf-beacon='{"token": "$TOKEN", "spa": true}'
    ></script>

into this

_document.js

<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{"token": "$TOKEN", "spa": true}" dangerouslySetInnerHTML={{ __html: `` }} />

Which causes a syntax error. I had to manually change the surrounding double quotes to single quotes in data-cf-beacon="{"token": "$TOKEN", "spa": true}" -> data-cf-beacon='{"token": "$TOKEN", "spa": true}'

---

2. My original index.js from CRA isn't compiling, the code mod did this.

Original

const render = (Component) => {
  return ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <MuiThemeProvider theme={theme}>
          <CssBaseline />
          <Component />
        </MuiThemeProvider>
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
  );
};

render(App);

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    render(NextApp);
  });
}

Modified by codemod

const render = (Component) => {
  export default function NextIndexWrapper() {
    return (
      <React.StrictMode>
        <BrowserRouter>
          <MuiThemeProvider theme={theme}>
            <CssBaseline />
            <Component />
          </MuiThemeProvider>
        </BrowserRouter>
      </React.StrictMode>
    );
  }

  return;
};

render(App);

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    render(NextApp);
  });
}

---

3. IMO code mode should add next dev as a script to package.json

Like so,

    "dev": "next dev",

[stv8]

4.

Something doesn't seem to be getting hooked up right, when I log props I get an empty object along with this error

// import NextIndexWrapper from '../src'

// next/dynamic is used to prevent breaking incompatibilities
// with SSR from window.SOME_VAR usage, if this is not used
// next/dynamic can be removed to take advantage of SSR/prerendering
import dynamic from "next/dynamic";

// try changing "ssr" to true below to test for incompatibilities, if
// no errors occur the above static import can be used instead and the
// below removed
const NextIndexWrapper = dynamic(() => import("../src"), { ssr: false });

export default function Page(props) {
  console.log(props);
  return <NextIndexWrapper {...props} />;
}

[ijjk]

The ReactDOM.render call being nested inside of the render function isn't supported and should have shown an error during migrating although the arrow function might have caused this to not show, you also do not need module.hot.accept in Next.js as it's handled by default, we might need to remove/add a warning for this as well 🤔

[stv8]

gotcha, so should I remove the custom render and module.hot replacement and just have this?

export default function NextIndexWrapper() {
    return (
      <React.StrictMode>
        <BrowserRouter>
          <MuiThemeProvider theme={theme}>
            <CssBaseline />
            <Component />
          </MuiThemeProvider>
        </BrowserRouter>
      </React.StrictMode>
    );
}

[ijjk]

Yeah that should be the only thing needed in the src/index.js file

[stv8]

EDIT Nevermind I got it working, it was an environment variable issue. Do you have any resources on converting the client side routes to server side?

I got the app to load once I changed that and removed the calls to the hot loader. However now I'm getting this, and my API routes aren't the root cause.

I also updated react to 17 as per the next 11 requirements.

[maximus-lynn]

When running npx @next/codemod cra-to-next I get all my css files that are using styled components commented out and it would seem the changes that have happened are in the index.js file giving it a new name NextIndexWrapper.

export default function NextIndexWrapper() {
  return <App store={store} persistor={persistor} history={history} />;
}

I have noticed the package.json file hasn't changed at all and hasn't included the next.js dependency.

I got a lot of errors when the styled component files were commented out so I undid that and the app loads in the browser with a successful compile however only loads a white screen.

Don't suppose there is something I'm missing?

[ijjk]

Hi, can you share the project this occurred on? The commented out CSS files should have been added to pages/_app.js as they are detected as global CSS which is only allowed there currently in Next.js. The package.json should have been updated as well to replace react-scripts an example will be needed for further investigation though.

[maximus-lynn]

Happy to screenshare with you,

I wondered if it is looking out for .css files to make global but the problem is that our files are name.css.js but imported as name.css so it might think they are global when they aren't?

[ijjk]

Ah interesting yeah these shouldn't be moved since they are actually JS files, sounds like we will need to compare against the filesystem name instead of just the import name

[maximus-lynn]

Yeah that'll do it.

Any idea why the package.json file didn't update?

[ijjk]

Can you share your package.json/the folder structure for the project, if react-scripts is present in the package.json it should have been updated 🤔

[luannaufal]

When trying to run the code mod for a CRA project containing the following structure, I've ran into 2 issues, using the @next/[email protected]

1. When pointing the path to the root, I'm receiving this error
   

2. When pointing the path to src folder, the error is about not finding the package.json
   

[ijjk]

Hi, can you share the project this is occurring on or the contents of your package.json?

[luannaufal]

Hi, can you share the project this is occurring on or the contents of your package.json?

Here you have it:

{
  "name": "___",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/luxon": "^1.3.13",
    "@jetkit/react": "2.2.7",
    "@material-ui/core": "4.11.0",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "@material-ui/pickers": "^3.2.10",
    "@testing-library/react-hooks": "^3.4.1",
    "@types/pdfjs-dist": "^2.1.3",
    "@types/react-mentions": "^3.3.0",
    "@types/react-pdf": "^4.0.3",
    "@types/react-text-truncate": "^0.14.0",
    "@types/sanitize-html": "^1.27.1",
    "axios": "0.19.0",
    "axios-case-converter": "^0.7.0",
    "camelcase-keys": "^6.2.2",
    "classnames": "2.2.6",
    "connected-react-router": "6.6.1",
    "downloadjs": "^1.4.7",
    "email-validator": "^2.0.4",
    "emoji-picker-react": "^3.1.3",
    "fishery": "^1.2.0",
    "formik": "^2.1.4",
    "formik-material-ui": "^1.0.2",
    "html-react-parser": "^0.11.0",
    "jetbridge-react-scripts": "2.0.5",
    "js-file-download": "^0.4.12",
    "luxon": "^1.21.3",
    "query-string": "^6.12.1",
    "quill-mention": "^2.2.5",
    "random-words": "^1.1.1",
    "react": "16.12.0",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "16.12.0",
    "react-mentions": "^3.3.1",
    "react-number-format": "^4.4.1",
    "react-pdf": "^5.0.0",
    "react-phone-input-2": "^2.12.1",
    "react-quill": "^1.3.5",
    "react-redux": "7.1.3",
    "react-router-dom": "^5.2.0",
    "react-spinners": "^0.8.1",
    "react-text-truncate": "^0.16.0",
    "react-zoom-pan-pinch": "^1.6.1",
    "redux": "4.0.4",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.3.0",
    "sanitize-html": "^2.3.2",
    "serverless-finch": "^2.5.2",
    "snakecase-keys": "^3.2.0",
    "typescript": "^3.8.3",
    "yup": "^0.28.5"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^5.4.1",
    "@storybook/addon-actions": "5.2.8",
    "@storybook/addon-centered": "5.2.8",
    "@storybook/addon-info": "5.2.8",
    "@storybook/addon-links": "5.2.8",
    "@storybook/addons": "5.2.8",
    "@storybook/cli": "5.2.8",
    "@storybook/react": "5.2.8",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.2",
    "@types/classnames": "2.2.9",
    "@types/downloadjs": "^1.4.2",
    "@types/enzyme": "3.10.3",
    "@types/enzyme-adapter-react-16": "1.0.5",
    "@types/faker": "^4.1.11",
    "@types/history": "4.7.3",
    "@types/jest": "24.0.23",
    "@types/lodash": "4.14.149",
    "@types/luxon": "1.21.0",
    "@types/material-ui": "^0.21.8",
    "@types/node": "12.12.14",
    "@types/random-words": "^1.1.0",
    "@types/react": "16.9.15",
    "@types/react-dom": "16.9.4",
    "@types/react-redux": "7.1.5",
    "@types/react-router-dom": "5.1.3",
    "@types/yup": "^0.26.32",
    "awesome-typescript-loader": "5.2.1",
    "axios-mock-adapter": "^1.18.2",
    "cypress": "^6.1.0",
    "cypress-localstorage-commands": "^1.2.4",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "eslint-plugin-react-app": "6.0.3",
    "eslint-plugin-react-hooks": "^4.2.0",
    "faker": "^4.1.0",
    "husky": "3.1.0",
    "jest-mock-axios": "^4.2.1",
    "lint-staged": "9.5.0",
    "node-sass": "4.13.0",
    "prettier": "1.19.1",
    "react-test-renderer": "16.12.0",
    "redux-mock-store": "^1.5.4",
    "ts-loader": "^7.0.5"
  },
  "types": "index.d.ts",
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "{*.{ts,js},!(node*)**/*.{ts,tsx,js,jsx}}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.ts src/**/*.tsx",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
    "fix": "eslint --fix src/**/*.ts src/**/*.tsx && prettier --write '{*.{ts,js},!(node*)**/*.{ts,tsx,js,jsx}}'",
    "deploy": "serverless client deploy --no-confirm --stage dev",
    "cypress-open": "cypress open",
    "fmt:check": "prettier --check src/**/*.{ts,tsx}"
  },
  "browserslist": [
    ">1%",
    "not dead",
    "last 2 safari versions",
    "ie 11",
    "not op_mini all"
  ]
}

[panmona]

First everything seemed fine with the migration but after clicking around a bit in the application I ran into this error that I couldn't get away after it:

Target container is not a DOM element.
Error: Target container is not a DOM element. at Object.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26086:13) at eval (webpack-internal:///./src/index.tsx:39:40) at Module../src/index.tsx (http://localhost:3000/_next/static/chunks/src_index_tsx.js:919:1) at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1624786773632:675:31) at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1624786773632:37:33) at Function.fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1624786773632:353:21)

I thought this had to do something with the direct svg imports and tried to inline them but that didn't help.
I made this two things in separate commits in this project: https://github.com/ultimate-ttt/ultimate-ttt/tree/panm/nextjs
Can you try reproducing it on your side and maybe help us identify what is causing this error?

Output of the codemod script

$ npx @next/codemod cra-to-next Need to install the following packages: @next/codemod Ok to proceed? (y) y npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead ? On which files or directory should the codemods be applied? . Transforming CRA project at: /home/mau/Dev/play/ultimate-ttt Processing 130 files... SKIP /home/mau/Dev/play/ultimate-ttt/.storybook/decorators.js SKIP /home/mau/Dev/play/ultimate-ttt/public/mockServiceWorker.js SKIP /home/mau/Dev/play/ultimate-ttt/src/App.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/App.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/index.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/setupTests.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/test-utils.tsx SKIP /home/mau/Dev/play/ultimate-ttt/cypress/integration/howToPlay.spec.ts SKIP /home/mau/Dev/play/ultimate-ttt/cypress/plugins/index.js SKIP /home/mau/Dev/play/ultimate-ttt/cypress/support/commands.js SKIP /home/mau/Dev/play/ultimate-ttt/cypress/support/index.js SKIP /home/mau/Dev/play/ultimate-ttt/cypress/support/component.js SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/ApiUrl.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/Keys.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/PlayerToTile.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/SimpleTicTacToeGame.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/Point.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/index.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/TicTacToeGame.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/routes/index.ts SKIP /home/mau/Dev/play/ultimate-ttt/lighthouserc.js SKIP /home/mau/Dev/play/ultimate-ttt/src/state/AppState.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/serviceWorker.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/configureStore.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/ArrowButtons/ArrowButtons.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/ArrowButtons/ArrowButtons.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/ArrowButtons/ArrowButtons.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Icons/IconProvider.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/react-app-env.d.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Navigation/Navigation.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Navigation/Navigation.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Paging/Paging.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Paging/Paging.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Paging/Paging.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Symbols/DrawSymbol.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/routes/routes.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Symbols/OSymbol.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Symbols/XSymbol.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/__test__/TicTacToeGame.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/__test__/Point.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/api/handlers.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/api/browser.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/lib/__test__/PlayerToTile.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/boardWithThreeMovesMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/boardWithTwoMovesMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/api/server.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/emptyBoardMock.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/finishedGameDataMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/finishedBoardMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/boardWithOneMoveMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/index.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/commonAction.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/mocks/board/unfinishedBoardMock.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/analysisGame/analysisGameReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/analysisGame/analysisGameReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/analysisGame/analysisGameSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/analysisGame/analysisGameSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/.storybook/main.js SKIP /home/mau/Dev/play/ultimate-ttt/src/state/finishedGames/finishedGameReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Icons/index.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Symbols/Symbol.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/howToPlayActions.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/finishedGames/saveFinishedGameDataSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/finishedGames/saveFinishedGameDataActions.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/finishedGames/finishedGameReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/howToPlayReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/finishedGames/saveFinishedGameDataSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/selectors/analysisGameStateSelectors.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/howToPlaySteps.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/possibleWinStates.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/selectors/appStateSelectors.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/selectors/finishedGameStateSelectors.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/selectors/howToPlayStateSelectors.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/selectors/howToPlayStateSelectors.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/AnalysisGameDisplay.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/AnalysisGame.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/ScrollElementConstants.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisOverview/AnalysisOverview.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisOverview/AnalysisOverview.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/Game/Game.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/Game/Game.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/HowToPlay/DialogActionBar.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/HowToPlay/HowToPlay.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/HowToPlay/HowToPlayContent.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/HowToPlay/HowToPlayIndicatorHint.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/HowToPlay/HowToPlayDialog.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/BigBoard/BigBoard.cy.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/BigBoard/BigBoard.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/BigBoard/BigBoard.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/BigBoard/BigBoard.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/SmallBoard/SmallBoard.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/SmallBoard/SmallBoard.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/SmallBoard/SmallBoard.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/Tile/Tile.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/Tile/Tile.cy.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/Tile/Tile.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/activeBoards/activeBoardCalculationSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/components/Board/Tile/Tile.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/activeBoards/activeBoardsActions.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/activeBoards/activeBoardsCalculationSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/howToPlaySaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/board/boardActions.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/board/boardReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/board/boardCalculationSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/activeBoards/activeBoardsReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/game/checkGameFinishedSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/game/checkGameFinishedSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/game/gameAction.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/activeBoards/activeBoardsReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/board/boardCalculationSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/board/boardReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/game/gameReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/moves/moveAction.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/moves/moveReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/game/gameReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/moves/moveValidationSaga.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/moves/moveValidationSaga.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/MoveList/MoveList.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/MoveList/MoveList.test.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/MoveList/MoveList.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisGame/NoGameFound/NoGameFound.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisOverview/GameSummaryCard/GameSummaryCard.story.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/AnalysisOverview/GameSummaryCard/GameSummaryCard.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/Game/GameFinishedDisplay/GameFinishedDisplay.cy.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/views/Game/GameFinishedDisplay/GameFinishedDisplay.tsx SKIP /home/mau/Dev/play/ultimate-ttt/src/state/howToPlay/howToPlayReducer.test.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/currentGame/moves/moveReducer.ts SKIP /home/mau/Dev/play/ultimate-ttt/src/state/analysisGame/analysisGameActions.ts OKK /home/mau/Dev/play/ultimate-ttt/.storybook/preview.js OKK /home/mau/Dev/play/ultimate-ttt/src/styles.tsx All done. Results: 0 errors 0 unmodified 128 skipped 2 ok Time elapsed: 2.554seconds

added 81 packages, removed 187 packages, changed 190 packages, and audited 4733 packages in 46s

265 packages are looking for funding
run npm fund for details

58 vulnerabilities (1 low, 28 moderate, 29 high)

To address issues that do not require attention, run:
npm audit fix

To address all issues possible (including breaking changes), run:
npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run npm audit for details.
CRA to Next.js migration complete
Please share any feedback on the migration here: #25858

[shivika24]

Uncaught TypeError: props.history.listen is not a function. after i migrated react-app to nextjs.

[Hardik5862]

I am getting this error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/node-sass
npm ERR! node-sass@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional node-sass@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR! node_modules/next
npm ERR! next@"11.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Hardik Sachan\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Hardik Sachan\AppData\Local\npm-cache_logs\2021-07-02T05_41_23_021Z-debug.log
Error: failed to complete transform {
command: 'npm install --save-exact --save next@latest --logLevel error'
}

[amorriscode]

I'm experiencing a very similar issue. Not the exact dependency issues but having trouble resolving the dependency tree.

[nkint]

Hi! In my VSCode the codemod to migrate from CRA removed react-scripts from my package.json and my ESlint stopped to work.

Do anyone else got the same problem?

[Cobertos]

I only recently found out about this migration tool (after learning React and Next from a Vue/Nuxt background). Started with a create-react-app and just followed the manual installation of Next, and it worked nicely.

Just a data point.

[bjornwiberg]

[tomasbruckner]

Hi, after migrating and opening localhost:3000 I get this error. I googled the problem and it led me to this issue #21703

But I am not aware of any custom webpack config.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\xxx\.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

error - HookWebpackError: Cannot read property 'replace' of undefined
    at makeWebpackError (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:61060:9)
    at C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:45233:12
    at eval (eval at create (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:33832:10), <anonymous>:22:1)
    at fn (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:43168:17)
    at Hook.eval [as callAsync] (eval at create (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:33832:10), <anonymous>:20:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:33634:14)
    at cont (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:45230:34)
    at C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:45276:10
    at symbolIterator (C:\Users\xxx\node_modules\next\dist\compiled\neo-async\async.js:1:14452)
    at done (C:\Users\xxx\node_modules\next\dist\compiled\neo-async\async.js:1:14832)
-- inner error --
TypeError: Cannot read property 'replace' of undefined
    at PagesManifestPlugin.createAssets (C:\Users\xxx\node_modules\next\dist\build\webpack\plugins\pages-manifest-plugin.js:39:47)
    at C:\Users\xxx\node_modules\next\dist\build\webpack\plugins\pages-manifest-plugin.js:52:26
    at fn (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:43166:10)
    at Hook.eval [as callAsync] (eval at create (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:33832:10), <anonymous>:20:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:33634:14)
    at cont (C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:45230:34)
    at C:\Users\xxx\node_modules\next\dist\compiled\webpack\bundle5.js:45276:10
    at symbolIterator (C:\Users\xxx\node_modules\next\dist\compiled\neo-async\async.js:1:14452)
    at done (C:\Users\xxx\node_modules\next\dist\compiled\neo-async\async.js:1:14832)
    at C:\Users\xxx\node_modules\next\dist\compiled\neo-async\async.js:1:9438
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read property 'replace' of undefined

[matchu]

After running this codemod, I ran next dev, and got this error output:

💖 172.30.73.108 impress-2020> yarn next dev
yarn run v1.22.10
$ /home/matchu/impress-2020/node_modules/.bin/next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/matchu/impress-2020/.env
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ValidationError: Invalid options object. Ignore Plugin has been initialized using an options object that does not match the API schema.
 - options should be one of these:
   object { resourceRegExp, contextRegExp? } | object { checkResource }
   Details:
    * options misses the property 'resourceRegExp'. Should be:
      RegExp
      -> A RegExp to test the request against.
    * options misses the property 'checkResource'. Should be:
      function
      -> A filter function for resource and context.
    at validate (/home/matchu/impress-2020/node_modules/next/dist/compiled/schema-utils3/index.js:1:153662)
    at /home/matchu/impress-2020/node_modules/next/dist/compiled/webpack/bundle5.js:124274:17
    at new IgnorePlugin (/home/matchu/impress-2020/node_modules/next/dist/compiled/webpack/bundle5.js:46478:3)
    at Object.getBaseWebpackConfig [as default] (/home/matchu/impress-2020/node_modules/next/dist/build/webpack-config.js:1402:36)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/home/matchu/impress-2020/node_modules/next/dist/trace/trace.js:74:20)
    at async Span.traceAsyncFn (/home/matchu/impress-2020/node_modules/next/dist/trace/trace.js:74:20)
    at async HotReloader.start (/home/matchu/impress-2020/node_modules/next/dist/server/dev/hot-reloader.js:321:25)
    at async DevServer.prepare (/home/matchu/impress-2020/node_modules/next/dist/server/dev/next-dev-server.js:289:9)
    at async /home/matchu/impress-2020/node_modules/next/dist/cli/next-dev.js:126:9 {
  errors: [
    {
      keyword: 'anyOf',
      dataPath: '',
      schemaPath: '#/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: /^\.\/locale$/,
      children: [Array]
    }
  ],
  schema: { title: 'IgnorePluginOptions', anyOf: [ [Object], [Object] ] },
  headerName: 'Ignore Plugin',
  baseDataPath: 'options',
  postFormatter: null
}
error Command failed with exit code 1.

I don't do any webpack setup myself; it looks like this error is coming from the craCompat code? For now, I'm disabling craCompat in next.config.js, which stops this crash from happening, and trying to continue my migration from there.

[christiankaindl]

Having the same problem here, the error seems to be caused when craCompat: true is set in next.config.js

[aldibatyr]

For some reason all the files in my directory are skipped when running cra-to-next command. are there prerequisites prior to running the migration. command? Thanks!

[aldibatyr]

Results: 
1 errors
0 unmodified
562 skipped
0 ok
Time elapsed: 4.046seconds 
Error: failed to apply transforms for src/index.tsx, please check for syntax errors to continue 

[ldalves]

Hey! 👋 We are in the process of migrating an application from CRA to Next. After solving many issues, we were able to start the application. But at the moment it only works if we have the craCompat: true and disableStaticImages: true settings in the next.config.js. I would like to know what I have to do to be able to remove these settings. Any tips? 😄 Thanks!

[O4FDev]

Hey! I think I might be one of the first on this thread but I just migrated a React Project ~3 years old, after resolving some dependency issues (literally changing the versions) I was able to convert to Next with just the command and it works amazingly, I could see some issues arriving but I can't see any I couldn't fix within twenty minutes by looking at the Next.js docs.

On another note - the performance is way up, some lagging issues I was facing are seemingly just wiped out upon the conversion and all the Next.js features I typically would use, I haven't had any issues with - this experience is far better than taking a create-next-app project and migrating it by hand which is awesome, big props to the Next.js team on this one!

[Oscopoldo]

Hello,
in my project I have both CRA files and Ruby on rails files and every component and file used by React are in a folder which is not called "src" (from the root it's app/javascript/[projectname]) and I don't know how to run this because it looks for src/index, how can I do?

[igortas]

Migrating to nextjs 13.4.2, I get interop issue:

typeError: _interop_require_default._ is not a function
    at eval (webpack-internal:///./node_modules/next/dist/pages/_error.js:12:55)
    at ./node_modules/next/dist/pages/_error.js (/home/igor/projects/ToolbarApp/.next/server/pages/_error.js:22:1)
    at __webpack_require__ (/home/igor/projects/ToolbarApp/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/home/igor/projects/ToolbarApp/.next/server/pages/_error.js:122:39)
    at /home/igor/projects/ToolbarApp/.next/server/pages/_error.js:123:28
    at Object.<anonymous> (/home/igor/projects/ToolbarApp/.next/server/pages/_error.js:126:3)
    at Module._compile (node:internal/modules/cjs/loader:1205:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1092:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at requirePage (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/require.js:156:12)
    at /home/igor/projects/ToolbarApp/node_modules/next/dist/server/load-components.js:68:84
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadComponentsImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/load-components.js:68:26)
    at async DevServer.findPageComponentsImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/next-server.js:756:36)
    at async DevServer.findPageComponents (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/dev/next-dev-server.js:1297:20)
    at async DevServer.renderErrorToResponseImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:1504:26)
    at async pipe.req.req (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:1439:30)
    at async DevServer.pipeImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:627:25)
    at async DevServer.run (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/dev/next-dev-server.js:930:28)
    at async DevServer.handleRequestImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:533:20)
- error node_modules/next/dist/shared/lib/dynamic.js (24:55) @ eval
- error Error [TypeError]: _interop_require_default._ is not a function
    at eval (webpack-internal:///./node_modules/next/dist/shared/lib/dynamic.js:21:55)
    at ./node_modules/next/dist/shared/lib/dynamic.js (/home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:22:1)
    at __webpack_require__ (/home/igor/projects/ToolbarApp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dynamic.js:1:18)
    at ./node_modules/next/dynamic.js (/home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:43:1)
    at __webpack_require__ (/home/igor/projects/ToolbarApp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/[[...slug]].tsx:7:70)
    at ./src/pages/[[...slug]].tsx (/home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:33:1)
    at __webpack_require__ (/home/igor/projects/ToolbarApp/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:108:39)
    at /home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:109:28
    at Object.<anonymous> (/home/igor/projects/ToolbarApp/.next/server/pages/[[...slug]].js:112:3)
    at Module._compile (node:internal/modules/cjs/loader:1205:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1092:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at requirePage (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/require.js:156:12)
    at /home/igor/projects/ToolbarApp/node_modules/next/dist/server/load-components.js:68:84
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadComponentsImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/load-components.js:68:26)
    at async DevServer.findPageComponentsImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/next-server.js:756:36)
    at async DevServer.findPageComponents (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/dev/next-dev-server.js:1297:20)
    at async DevServer.renderPageComponent (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:1300:24)
    at async DevServer.renderToResponseImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:1343:32)
    at async DevServer.pipeImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:627:25)
    at async Object.fn (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/next-server.js:1136:21)
    at async Router.execute (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/router.js:315:32)
    at async DevServer.runImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:601:29)
    at async DevServer.run (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/dev/next-dev-server.js:922:20)
    at async DevServer.handleRequestImpl (/home/igor/projects/ToolbarApp/node_modules/next/dist/server/base-server.js:533:20) {
  digest: undefined
}

[Mister-Zeng]

Im getting this same error as well.

[skandog]

Same here - any progress?

[atstoyanov]

I did an experiment with a fresh CRA app. After the codemod was applied the app didn't want to start with the same error:
typeError: _interop_require_default._ is not a function

After a few experiments I found this:

The codemod adds this into next.config.js

  experimental: {
    craCompat: true,
  },

If you set the craCompat to false the error will disappear.

But the project won't start again. The issue is the index.tsx:

Original file:

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Should be replaced with:

export default () => {
  return (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

Adding next-images to the project will allow loading the SVG logo from the CRA app. And that was enough for the app to start working as NextJS app.

Setting craComp to true after resolving the other issues will lead to the same error.

[santimc]

Have the same problem, tried to follow the instructions of the last answer in a larger project but keep having issues with imported images.

[alex-shepel]

When I run the migration command from npx, I get the package-lock.json file updated. Since I am using yarn, I need some alternative to update yarn.lock. Is it possible to do this?

[raulvictorrosa]

I'm having this issue here:

❯ pnpm dlx @next/codemod cra-to-next
.../Library/pnpm/store/v3/tmp/dlx-93313  |  WARN  deprecated [email protected]
.../Library/pnpm/store/v3/tmp/dlx-93313  |  WARN  deprecated [email protected]
.../Library/pnpm/store/v3/tmp/dlx-93313  |  WARN  deprecated [email protected]
.../Library/pnpm/store/v3/tmp/dlx-93313  |  WARN  deprecated [email protected]
.../Library/pnpm/store/v3/tmp/dlx-93313  |  WARN  deprecated [email protected]
.../Library/pnpm/store/v3/tmp/dlx-93313  | +447 +++++++++++++++++++++++++++++++++++++++++++++
.../Library/pnpm/store/v3/tmp/dlx-93313  | Progress: resolved 447, reused 447, downloaded 0, added 447, done
? On which files or directory should the codemods be applied? .
Error: a "./pages" directory already exists, please rename to continue 
Please share any feedback on the migration here: https://github.com/vercel/next.js/discussions/25858
 ERROR  Command failed with exit code 1: codemod cra-to-next

pnpm: Command failed with exit code 1: codemod cra-to-next
    at makeError (/snapshot/dist/pnpm.cjs)
    at handlePromise (/snapshot/dist/pnpm.cjs)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.handler [as dlx] (/snapshot/dist/pnpm.cjs)
    at async /snapshot/dist/pnpm.cjs
    at async main (/snapshot/dist/pnpm.cjs)
    at async runPnpm (/snapshot/dist/pnpm.cjs)
    at async /snapshot/dist/pnpm.cjs

[skandog]

Got to make sure there is no pages folder in the top level of the repo. This happened to me after an unsuccessful attempt with the codemod. I stashed my changed, but that didnt remove the pages dir - once I deleted the empty folder it ran fine.