npm start 编译失败
npm start failed to compile
这是 npm start 的问题,运行 react-scripts start。拜托,有人可以帮我吗?
我正在尝试在我的应用程序中使用 Swiper,但我在控制台上收到此错误。
!更新:添加了使用刷卡器的代码。
Failed to compile.
./node_modules/swiper/dist/js/swiper.esm.bundle.js
Module not found: Can't resolve '/home/lemes/Projects/idealnemoloko-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized' in '/home/lemes/Projects/idealnemoloko-react/node_modules/swiper/dist/js'
Laso 为您提供 package.json
希望能有所帮助
package.json
{
"name": "idealnemoloko-react",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"gh-pages": "^2.0.1",
"gsap": "^2.0.2",
"react": "^16.6.0",
"react-art": "^16.6.1",
"react-dom": "^16.6.0",
"react-native": "^0.57.4",
"react-native-web": "^0.9.6",
"react-on-images-loaded": "^2.1.9",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"swiper": "^4.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
我使用刷卡器的文件:
recipes/index.js
this.swiper = new Swiper('.recipes-swiper-container', {
direction: 'vertical',
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
mousewheel: true,
pagination: {
el: '.recipes-swiper-pagination',
clickable: true,
},
on: {
transitionEnd: this.handleSlideTrans
}
});
main/index.js
hasLoaded() {
if(this.state.isLoading === true) {
this.setState({isLoading: false})
this.swiper = new Swiper('.swiper-container', {
direction: 'vertical',
preventInteractionOnTransition: true,
speed: 1000,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
slidesPerView: 1,
initialSlide: this.props.index,
allowTouchMove: false,
mousewheel: {
eventsTarged: '#main-page'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
});
this.swiperInfo = new Swiper('.swiper-container-info', {
direction: 'vertical',
preventInteractionOnTransition: true,
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
initialSlide: this.props.index
});
this.swiper.on('slideNextTransitionStart', () => {
this.swiperInfo.slideNext();
});
this.swiper.on('slidePrevTransitionStart', () => {
this.swiperInfo.slidePrev();
});
var pag = document.getElementsByClassName('swiper-pagination')[0].clientHeight;
document.getElementById('info-back').style.top = 'calc(50% - ' + pag/window.innerHeight*100/3.25 + 'vh)';
}
}
swiperStart() {
this.swiper.autoplay.start();
}
why/index.js
this.swiper = new Swiper('.why-swiper-container', {
direction: 'vertical',
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
mousewheel: true,
pagination: {
el: '.why-swiper-pagination',
clickable: true,
},
on: {
transitionEnd: this.handleSlideTrans
}
});
我认为您需要 Swiper
。
您需要像这样导入 Swiper
包:
import Swiper from 'swiper/dist/js/swiper.js'
这是 npm start 的问题,运行 react-scripts start。拜托,有人可以帮我吗?
我正在尝试在我的应用程序中使用 Swiper,但我在控制台上收到此错误。
!更新:添加了使用刷卡器的代码。
Failed to compile.
./node_modules/swiper/dist/js/swiper.esm.bundle.js
Module not found: Can't resolve '/home/lemes/Projects/idealnemoloko-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized' in '/home/lemes/Projects/idealnemoloko-react/node_modules/swiper/dist/js'
Laso 为您提供 package.json
希望能有所帮助
package.json
{
"name": "idealnemoloko-react",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"gh-pages": "^2.0.1",
"gsap": "^2.0.2",
"react": "^16.6.0",
"react-art": "^16.6.1",
"react-dom": "^16.6.0",
"react-native": "^0.57.4",
"react-native-web": "^0.9.6",
"react-on-images-loaded": "^2.1.9",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"swiper": "^4.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
我使用刷卡器的文件: recipes/index.js
this.swiper = new Swiper('.recipes-swiper-container', {
direction: 'vertical',
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
mousewheel: true,
pagination: {
el: '.recipes-swiper-pagination',
clickable: true,
},
on: {
transitionEnd: this.handleSlideTrans
}
});
main/index.js
hasLoaded() {
if(this.state.isLoading === true) {
this.setState({isLoading: false})
this.swiper = new Swiper('.swiper-container', {
direction: 'vertical',
preventInteractionOnTransition: true,
speed: 1000,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
slidesPerView: 1,
initialSlide: this.props.index,
allowTouchMove: false,
mousewheel: {
eventsTarged: '#main-page'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
});
this.swiperInfo = new Swiper('.swiper-container-info', {
direction: 'vertical',
preventInteractionOnTransition: true,
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
initialSlide: this.props.index
});
this.swiper.on('slideNextTransitionStart', () => {
this.swiperInfo.slideNext();
});
this.swiper.on('slidePrevTransitionStart', () => {
this.swiperInfo.slidePrev();
});
var pag = document.getElementsByClassName('swiper-pagination')[0].clientHeight;
document.getElementById('info-back').style.top = 'calc(50% - ' + pag/window.innerHeight*100/3.25 + 'vh)';
}
}
swiperStart() {
this.swiper.autoplay.start();
}
why/index.js
this.swiper = new Swiper('.why-swiper-container', {
direction: 'vertical',
speed: 1000,
slidesPerView: 1,
allowTouchMove: false,
mousewheel: true,
pagination: {
el: '.why-swiper-pagination',
clickable: true,
},
on: {
transitionEnd: this.handleSlideTrans
}
});
我认为您需要 Swiper
。
您需要像这样导入 Swiper
包:
import Swiper from 'swiper/dist/js/swiper.js'