Я использую Babel с Webpack в моем приложении реакции. Я установил "babel-loader": "^ 8.0.5" и "@ babel / core": "^ 7.4.0", что удовлетворяет условию
"babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'".
Узел: v10.5.0
нпм: v6.1.0
Запуск приложения с использованием node --experimental-modules lib/server.mjs
для поддержки модулей es6
package.json
{
"name": "advanced-react",
"version": "1.0.0",
"description": "Advanced React",
"main": "lib/server.js",
"author": "Sai",
"license": "MIT",
"scripts": {
"dev": "nodemon --exec babel-node lib/server.mjs",
"webpack": "webpack -wd"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"eslint": "^5.15.3",
"eslint-plugin-react": "^7.12.4"
},
"dependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/polyfill": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"@babel/register": "^7.4.0",
"@babel/runtime": "^7.4.2",
"babel-loader": "^8.0.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"ejs": "^2.6.1",
"express": "^4.16.4",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"env",
"react",
"stage-2"
],
"plugins": ["transform-es2015-modules-commonjs"]
}
webpack.config.js
const path = require('path');
const config = {
entry: './lib/components/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{test: /\.(js)$/, use: ['babel-loader']}
]
}
};
module.exports = config;
но когда я запускаю приложение, сталкивающееся с этой ошибкой
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (D:\learnings\advanced-react\node_modules\babel-loader\lib\index.js:10:11)
at Module._compile (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at loadLoader (D:\learnings\advanced-react\node_modules\loader-runner\lib\loadLoader.js:18:17)
at iteratePitchingLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:280:3)
at NormalModule.build (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:427:15)
at Compilation.buildModule (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:635:10)
at moduleFactory.create (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:1021:12)
at factory (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
at hooks.afterResolve.callAsync (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\learnings\advanced-react\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesWaterfallHook.lazyCompileHook (D:\learnings\advanced-react\node_modules\tapable\lib\Hook.js:154:20)
at resolver (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
at process.nextTick (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
at eval (webpack-internal:///./lib/components/index.js:1:7)
at Object../lib/components/index.js (http://localhost:8080/bundle.js:96:1)
at __webpack_require__ (http://localhost:8080/bundle.js:20:30)
at http://localhost:8080/bundle.js:84:18
at http://localhost:8080/bundle.js:87:10