Reactjs 巴别塔需要的模块不是';你没用过吗?
我是新来的反应,网页,巴贝尔。。。。所有这些。试图建立一个我想利用的普通项目<代码>npm运行启动显示以下错误:Reactjs 巴别塔需要的模块不是';你没用过吗?,reactjs,webpack,Reactjs,Webpack,我是新来的反应,网页,巴贝尔。。。。所有这些。试图建立一个我想利用的普通项目npm运行启动显示以下错误: ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/brandor/test/react_tut/src/index.js: Cannot find module 'babel-preset-env' Require
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/brandor/test/react_tut/src/index.js: Cannot find module 'babel-preset-env'
Require stack:
- /Users/brandor/test/react_tut/node_modules/@salesforce/babel-preset-design-system-react/index.js
我不知道为什么它说需要“巴别塔预设环境”。我安装slds模块时不应该安装以下组件吗
$npm install@salesforce ux/design system@salesforce/design system react
如果我真的安装了这个模块(以及它抱怨的另一个),那么我会得到一些似乎与之相关的东西,但我使用的是我的babel.config.js
文件中看起来正确的预设
另一个错误是:
TypeError:/Users/brandor/test/react\u tut/src/components/App.js:无法读取null的属性“bindings”
不确定这是否是网页包配置、babel或某个内容的错误版本的问题
package.json
{
"name": "react_tut",
"version": "1.0.0",
"description": "Boilerplate stuff",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open --hot"
},
"license": "MIT",
"dependencies": {
"@salesforce-ux/design-system": "^2.11.6",
"@salesforce/design-system-react": "^0.10.18",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-export-extensions": "^6.22.0",
"core-js": "^3.6.4",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-flow": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"url-loader": "^4.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx']
},
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, 'src/js'),
path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
],
exclude: [
path.join(
__dirname,
'node_modules/@salesforce/design-system-react/node_modules',
),
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(svg|gif|jpe?g|png)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
],
};
'use strict';
const presets = ['@babel/preset-react', '@babel/preset-flow', '@salesforce/babel-preset-design-system-react'];
module.exports = {
presets: [
...presets,
[
'@babel/preset-env',
{
modules: false,
corejs: '3',
useBuiltIns: 'usage',
},
],
],
env: {
test: {
presets: [
...presets,
[
'@babel/preset-env',
{
targets: { node: 'current' },
corejs: '3',
useBuiltIns: 'usage',
},
],
],
},
},
};
babel.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx']
},
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.join(__dirname, 'src/js'),
path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
],
exclude: [
path.join(
__dirname,
'node_modules/@salesforce/design-system-react/node_modules',
),
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(svg|gif|jpe?g|png)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=30&name=assets/fonts/webfonts/[name].[ext]'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
],
};
'use strict';
const presets = ['@babel/preset-react', '@babel/preset-flow', '@salesforce/babel-preset-design-system-react'];
module.exports = {
presets: [
...presets,
[
'@babel/preset-env',
{
modules: false,
corejs: '3',
useBuiltIns: 'usage',
},
],
],
env: {
test: {
presets: [
...presets,
[
'@babel/preset-env',
{
targets: { node: 'current' },
corejs: '3',
useBuiltIns: 'usage',
},
],
],
},
},
};
您正在使用它作为您的babel配置中的预设。是否
@babel/preset env
真的与babel preset env
相同?如果安装这两个模块,它们在package.json
文件中显示为单独的。。。