Comments (19)
I can reproduce this error. But I don't understand why it's happened.
If you delete node_modules et run again "install" and "start", it will fix the error.
yarn install
yarn start
I can't understand why...
I will check it tomorrow if I have time.
from react-vertical-timeline.
Ah I don't have it anywhere. I can't release it anywhere for privacy concerns. My friend your repo in both npm and yarn and got the same error. Let me get the error message.
from react-vertical-timeline.
I tried with the same versions. After installing dependencies, I have [email protected] and [email protected]. No problem. Maybe the babel or webpack config ?
For your information, I test with the demo of this package.
git clone https://github.com/stephane-monnot/react-vertical-timeline.git cd react-vertical-timeline
Change react and react-dom version in package.json.
And runyarn install yarn start
I am getting errors on yarn start
. I have tried on 2 systems linux and mac and getting the same results.
Error is in reference the Catalog.
I am running node-lts, version v12.14.0
from react-vertical-timeline.
I removed node_modules and I still received the error on my PROD webpack config.
So I have added the hack and it got past that error. Ultimately it is a problem with react-visibility-sensor.
I really appreciate you helping to troubleshoot this issue and taking the time. If you have anymore feedback let me know. I will keep you posted on any changes I see to this issue.
from react-vertical-timeline.
@stephane-monnot any thoughts/new progress on this issue? Just wanted to check in and see if you have anything.
from react-vertical-timeline.
@fpigeonjr I tried a fix (on master branch), could you try again ?
@pcast01 could you try again to install the demo and run it ?
from react-vertical-timeline.
@stephane-monnot. I can confirm that I spin up the project. Thanks!
from react-vertical-timeline.
@stephane-monnot Let me know when you are going to do a new release for this repo. Thanks for the work you do!
from react-vertical-timeline.
I can't reproduce this issue. Which version of React and react dom are you using ?
I tried with :
"react": "^16.4.2",
"react-dom": "^16.4.2",
from react-vertical-timeline.
Thanks for the reply!
I am using these versions:
"react": "^16.7.0",
"react-dom": "^16.8.4"
from react-vertical-timeline.
I tried with the same versions. After installing dependencies, I have [email protected] and [email protected]. No problem. Maybe the babel or webpack config ?
For your information, I test with the demo of this package.
git clone https://github.com/stephane-monnot/react-vertical-timeline.git
cd react-vertical-timeline
Change react and react-dom version in package.json.
And run
yarn install
yarn start
from react-vertical-timeline.
I am updating my react and react-dom versions to test that out. Also I am having a friend test out your recommendation.
Here is my webpack.config file in development mode. Let me know if you see anything that might be the issue.
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const AsyncChunkNames = require("webpack-async-chunk-names-plugin");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: `${__dirname}/public/index.html`,
excludeChunks: ["base"],
filename: "index.html",
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
});
module.exports = {
mode: "development",
optimization: {
usedExports: true,
concatenateModules: true,
minimize: true,
minimizer: [new TerserPlugin()],
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
vendor: {
name: "vendor",
chunks: "all",
test: /node_modules/
},
common: {
name: "common",
minChunks: 2,
chunks: "async",
priority: 10,
reuseExistingChunk: true,
enforce: true
}
}
}
},
// devtool: "cheap-eval-source-map", // Remove this line for super small bundle sizes
entry: ["babel-polyfill", "whatwg-fetch", `${__dirname}/public/index.js`],
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader?cacheDirectory",
include: __dirname,
query: {
presets: ["@babel/env", "@babel/react"],
plugins: [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
] // https://stackoverflow.com/questions/35517245/error-missing-class-properties-transform
}
},
{
test: /\$/,
include: /node_modules/,
type: "javascript/auto"
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
},
{ test: /\.(woff|woff2|eot|ttf)$/, use: ["url-loader?limit=100000"] },
{
test: /\.(png|jpg|gif|mp3|ico|svg)$/,
loader: "file-loader",
options: {}
}
]
},
output: {
filename: "transformed.js",
path: `${__dirname}build`,
chunkFilename: "[name].js"
},
resolve: {
extensions: ["*", ".js", ".jsx", ".json"]
},
node: {
console: true,
fs: "empty",
net: "empty",
tls: "empty",
dns: "empty",
dgram: "empty"
},
plugins: [
HTMLWebpackPluginConfig,
new LodashModuleReplacementPlugin(),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development")
}),
new webpack.NamedModulesPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new AsyncChunkNames()
],
devServer: {
historyApiFallback: true
}
};
I also have a different webpack.production.config that is not letting me build and comes up with an error:
Unexpected token: operator «=» in uglifyjs
not sure if this is related but could be.
from react-vertical-timeline.
Do you have source code or GitHub/GitLab repo or CodeSandbox to check out?
from react-vertical-timeline.
Did you try to remove node_modules and reinstall dependencies ?
from react-vertical-timeline.
Good idea. I'll try that.
from react-vertical-timeline.
any news on this @stephane-monnot? Thanks!
from react-vertical-timeline.
I can't reproduce the problem. I tried on many projects, it works. Could you provide a full example ?
from react-vertical-timeline.
I can't reproduce the problem. I tried on many projects, it works. Could you provide a full example ?
@pcast01 Do you have code examples to provide?
from react-vertical-timeline.
@stephane-monnot Thanks for all the help. I was able to use a workaround and I know this isn't your issue. I did find out that the origin of this issue is stated here: joshwnj/react-visibility-sensor#148 (comment).
from react-vertical-timeline.
Related Issues (20)
- How to modify style.min.css for custom styling
- enhancement: Ability to add custom breakpoints
- How to remove vertical line and icons HOT 1
- Can't find a way to remove connector below last item HOT 1
- change lineColor for tailwind dark mode HOT 2
- The white line not showing on the first render in NextJS 13 HOT 3
- No props for icon box shadow
- TypeError: Cannot read properties of undefined (reading 'prototype') HOT 3
- Animation Issue in Timeline when Loading More Items HOT 5
- In Next js 13.5 react-vertical-timeline not working HOT 35
- Typescript Error HOT 8
- [QUESTION] does react-vertical-timeline support live feed, out of the box? HOT 1
- Receiving warning: extra attributes from the server: style when using component HOT 1
- How do i change the border type for the sideline??
- Does the react-vertical-timeline-component doesn't work in latest next.js? HOT 17
- Have the 2 columns layaut also in mobile HOT 1
- VerticalTimelineElement doesn't properly center all icon elements HOT 4
- "Unable to resolve dependency tree" HOT 1
- how to customize width of the element HOT 1
- não funciona
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vertical-timeline.