Next.js - Cannot find module '@babel/core'

[eliascotto]

Environment

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "linaria": "^3.0.0-beta.1",
    "next": "10.0.3",
    "next-linaria": "^0.10.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

• Linaria version: ^3.0.0-beta.1
• Node.js version: v14.10.1
• OS: 10.15.6

Description

Test 1

Tried with a clean next.js test project and added linaria library with next-linaria.

npx create-next-app
cd test
npm i --save next-linaria linaria
vim next.config.js
npm run dev

next.config.js

const withLinaria = require('next-linaria');
module.exports = withLinaria({
  /* config options here */
});

Test 2

Changed next.config.js as this answer or issue #318

next.config.js

module.exports = {
  webpack(config) {
    // retrieve the rule without knowing its order
    const jsLoaderRule = config.module.rules.find(
      (rule) => rule.test instanceof RegExp && rule.test.test('.js')
    );
    const linariaLoader = {
      loader: 'linaria/loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    };
    if (Array.isArray(jsLoaderRule.use)) {
      jsLoaderRule.use.push(linariaLoader);
    } else {
      jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
    }
    return config;
  },
};

Error

> test@0.1.0 dev ./test
> next dev

ready - started server on http://localhost:3000
error - ./pages/_app.js
Error: Cannot find module '@babel/core'
Require stack:
- ./test/node_modules/@linaria/babel-preset/lib/evaluators/visitors/JSXElement.js
- ./test/node_modules/@linaria/babel-preset/lib/index.js
- ./test/node_modules/@linaria/webpack4-loader/lib/index.js
- ./test/node_modules/linaria/lib/webpack4-loader.js
- ./test/node_modules/loader-runner/lib/loadLoader.js
- ./test/node_modules/loader-runner/lib/LoaderRunner.js
- ./test/node_modules/webpack/lib/NormalModule.js
- ./test/node_modules/webpack/lib/NormalModuleFactory.js
- ./test/node_modules/webpack/lib/Compiler.js
- ./test/node_modules/webpack/lib/webpack.js
- ./test/node_modules/@next/react-dev-overlay/lib/middleware.js
- ./test/node_modules/next/dist/server/hot-reloader.js
- ./test/node_modules/next/dist/server/next-dev-server.js
- ./test/node_modules/next/dist/server/next.js
- ./test/node_modules/next/dist/server/lib/start-server.js
- ./test/node_modules/next/dist/cli/next-dev.js
- ./test/node_modules/next/dist/bin/next

[eliascotto]

Okay found solution in documentation. Information not reported anywhere else 😓.
Issue is resolved

Please note, that @babel/core is a peer dependency of all loaders. Do not forget to add it to devDependencies list in your project.

https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#bundlers