Closed pcast01 closed 4 years ago
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",
Thanks for the reply!
I am using these versions:
"react": "^16.7.0",
"react-dom": "^16.8.4"
I tried with the same versions. After installing dependencies, I have react@16.12.0 and react-dom@16.12.0. 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
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.
Do you have source code or GitHub/GitLab repo or CodeSandbox to check out?
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.
Did you try to remove node_modules and reinstall dependencies ?
Good idea. I'll try that.
I tried with the same versions. After installing dependencies, I have react@16.12.0 and react-dom@16.12.0. 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
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
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.
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.
@stephane-monnot any thoughts/new progress on this issue? Just wanted to check in and see if you have anything.
@fpigeonjr I tried a fix (on master branch), could you try again ? @pcast01 could you try again to install the demo and run it ?
@stephane-monnot. I can confirm that I spin up the project. Thanks!
@stephane-monnot Let me know when you are going to do a new release for this repo. Thanks for the work you do!
any news on this @stephane-monnot? Thanks!
I can't reproduce the problem. I tried on many projects, it works. Could you provide a full example ?
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?
@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: https://github.com/joshwnj/react-visibility-sensor/issues/148#issuecomment-589248631.
I am having a problem in my cli with a dependency that is in this library. Please reference to this link https://github.com/joshwnj/react-visibility-sensor/issues/148, where I detail the issue for this other repo called react-visibility-sensor. This error makes your repo not work and I have the fix/hack that I found to have the react-visibility-sensor point to the correct react-dom dependency.
I am on Node version: 12.13.0.
If there is any ideas that will help resolve this I would appreciate it.
Also I might be able to help fix this if you would like a PR. I might be able to replace this dependency with another one or possibly create the scroll to animation.