Replies: 5 comments
-
Hi @Lwdthe1. I just ran this exact example as you described and did not encounter any issues. Could you post a repository showing this issue? Also you do not need these dependencies:
they can be removed. |
Beta Was this translation helpful? Give feedback.
-
Those babel dependencies are for an unrelated app in my system. I just included them in this bug report in the off chance it could be part of the problem. |
Beta Was this translation helpful? Give feedback.
-
I can't share my repo, but I do have a custom next.config.js that has a webpack config in it. I'll share that later today. |
Beta Was this translation helpful? Give feedback.
-
@jamesmosier My const path = require('path')
const withCss = require('@zeit/next-css')
const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } = require('next/constants')
const aliasPathsToResolve = [
{ name: '@components', path: path.resolve(__dirname, './components') },
{ name: '@services', path: path.resolve(__dirname, './services') },
{ name: '@utils', path: path.resolve(__dirname, './utils') },
{ name: '@hooks', path: path.resolve(__dirname, './hooks') },
{ name: '#', path: path.resolve(__dirname, '../../common/react/') },
{ name: '#common', path: path.resolve(__dirname, '../../common/react/') },
{ name: '#styles', path: path.resolve(__dirname, '../../common/react/styles/') },
{ name: '#components', path: path.resolve(__dirname, '../../common/react/components/') },
{ name: '#services', path: path.resolve(__dirname, '../../common/react/services/') },
{ name: '#utils', path: path.resolve(__dirname, '../../common/react/utils/') },
{ name: '#ijData', path: path.resolve(__dirname, '../../common/react/utils/ijData') },
]
// This uses phases as outlined here: https://nextjs.org/docs/#custom-configuration
module.exports = (phase) => {
// when started in development mode
// `next dev` or `npm run dev` regardless of the value of STAGING environmental variable
const isDevServer = phase === PHASE_DEVELOPMENT_SERVER
// when `next build` or `npm run build` is used
const isProd = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== '1'
// when `next build` or `npm run build` is used
const isStaging = PHASE_PRODUCTION_BUILD && process.env.STAGING === '1'
const env = {
IS_PHASE_DEVELOPMENT_SERVER: !!isDevServer,
RESOURCES_BASE_URL: (() => {
if (isDevServer) return 'http://localhost:3100'
return ''
})(),
}
return withCss({
env,
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[local]___[hash:base64:5]',
},
// https://github.com/zeit/next.js/issues/5598#issuecomment-499568968
onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 },
webpack (config, { isServer, dev, defaultLoaders }) {
/** Transpile common react code */
config.module.rules.push({
test: /\.(js|jsx)$/,
include: [ path.resolve(__dirname, '../../common/react/') ],
exclude: /node_modules/,
use: [ defaultLoaders.babel ],
})
config.module.rules.push({
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192,
publicPath: '/_next/static/',
outputPath: 'static/',
name: '[name].[ext]',
},
},
})
// Ensure that our client's react & react-dom modules are used
// instead of modules in another package.json elsewhere in the system.
config.resolve.alias = {
...config.resolve.alias,
react: path.resolve(__dirname, '../../../node_modules/react'),
'react-dom': path.resolve(__dirname, '../../../node_modules/react-dom'),
}
/** Resolve aliases */
aliasPathsToResolve.forEach((module) => {
config.resolve.alias[ module.name ] = module.path
})
return config
},
})
} |
Beta Was this translation helpful? Give feedback.
-
Also @jamesmosier these are my react versions:
|
Beta Was this translation helpful? Give feedback.
-
Bug report
Describe the bug
After days of hunting down the cause of this bug, I've narrowed it down the spread operator. Other ES6 features such as arrow functions (as you can see in the code below) work just fine, so I don't know what's going on here.
Please see the callstack in the screenshot section below.
To Reproduce
Make a server side rendered Express + NextJs React app with only a
page/index.js
on the frontend with the below code. If you take out the...props
part ofnewProps
, all should work.Expected behavior
Should render: "Hello, world!".
Screenshots
System information
Additional context
Add any other context about the problem here.
Beta Was this translation helpful? Give feedback.
All reactions