Styjun

Looking after a wayward brother in mother's will

Are there mythical creatures in the world of Game of Thrones?

How can I offer a test ride while selling a bike?

Is there a way to save this session?

What does the behaviour of water on the skin of an aircraft in flight tell us?

What are the problems in teaching guitar via Skype?

Order by does not work as I expect

Looking for an old image of designing a cpu with plan laid out / being edited on a literal floor

Is there an evolutionary advantage to having two heads?

How do I get a list of only the files (not the directories) from a package?

TV show or movie: Diseased people are exiled to a spaceship

How do I get a cleat that's stuck in a pedal, detached from the shoe, out?

Why does my electric oven present the option of 40A and 50A breakers?

If Sweden was to magically float away, at what altitude would it be visible from the southern hemisphere?

Humans meet a distant alien species. How do they standardize? - Units of Measure

How much current can Baofeng UV-5R provide on +V pin?

Can an old DSLR be upgraded to match modern smartphone image quality

How crucial is a waifu game storyline?

How to detach yourself from a character you're going to kill?

Select * from View takes 4 minutes

Is American Express widely accepted in France?

Can a helicopter mask itself from Radar?

How do I set the Verbatim font (or the mono font) to bold by default?

California: "For quality assurance, this phone call is being recorded"

Can't import React component on server-side Next.js

React js onClick can't pass value to methodHow to import a css file in a react component?How to use React components from local npm packageServing static images with WebpackComponent files not importing in webpack react project?Imported components transformed into “/static” urls in react-create-appCreate react app App fails when importing custom libraryTesting React component with Jest gives 'Cannot find module' errorReact router doesn't work on express serverReact won't import my module “Module not found: Can't resolve ”

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I'm trying to import a very simple component from a library into a Next.js app.

I have stripped down my library to the bare minimum. It contains the following src/components/index.js:

import React from 'react'
const Container = ( children ) => <div>children</div>
export Container 

In my Next.js app, I created a pages/index.js that contains the following:

import React from 'react'
import Container from 'mylib'

class HomePage extends React.Component 
 render() 
 return <Container>Hello</Container>
 


export default HomePage

mylib is a local npm package which I have installed in my Next.js app using npm i ../mylib. It has a standard webpack config:

const path = require('path')

module.exports = 
 entry: 
 components: './src/components/index.js',
 ,
 output: 
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 libraryTarget: 'commonjs2'
 ,
 mode: "production",
 module: 
 rules: [
 
 test: /.js$/,
 exclude: /node_modules/,
 use: 
 loader: 'babel-loader',
 
 
 ],
 ,
;

and then the package.json points to dist/components.js as the main file.

The following does work:

1. In my Next.js app, replace return <Container>Hello</Container> with return <div>Hello</div> (while keeping the import Container in place)


2. Refresh the page in the server (I'm running Next's dev server)


3. Restore the use of <Container> (the opposite of step 1)


4. Save the file --> hot-reload in the browser with the Container properly displayed (I added a className to be sure)

At this point, if I refresh the browser, I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

which suggests I made a bad import/export, but I don't know where. And the error only occurs on the server-side.

What did I do wrong?

javascript reactjs next.js

share|improve this question

asked Mar 24 at 11:16

ArnaudArnaud

375520

add a comment | 

2

I'm trying to import a very simple component from a library into a Next.js app.

I have stripped down my library to the bare minimum. It contains the following src/components/index.js:

import React from 'react'
const Container = ( children ) => <div>children</div>
export Container 

In my Next.js app, I created a pages/index.js that contains the following:

import React from 'react'
import Container from 'mylib'

class HomePage extends React.Component 
 render() 
 return <Container>Hello</Container>
 


export default HomePage

mylib is a local npm package which I have installed in my Next.js app using npm i ../mylib. It has a standard webpack config:

const path = require('path')

module.exports = 
 entry: 
 components: './src/components/index.js',
 ,
 output: 
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 libraryTarget: 'commonjs2'
 ,
 mode: "production",
 module: 
 rules: [
 
 test: /.js$/,
 exclude: /node_modules/,
 use: 
 loader: 'babel-loader',
 
 
 ],
 ,
;

and then the package.json points to dist/components.js as the main file.

The following does work:

1. In my Next.js app, replace return <Container>Hello</Container> with return <div>Hello</div> (while keeping the import Container in place)


2. Refresh the page in the server (I'm running Next's dev server)


3. Restore the use of <Container> (the opposite of step 1)


4. Save the file --> hot-reload in the browser with the Container properly displayed (I added a className to be sure)

At this point, if I refresh the browser, I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

which suggests I made a bad import/export, but I don't know where. And the error only occurs on the server-side.

What did I do wrong?

javascript reactjs next.js

share|improve this question

asked Mar 24 at 11:16

ArnaudArnaud

375520

add a comment | 

I'm trying to import a very simple component from a library into a Next.js app.

I have stripped down my library to the bare minimum. It contains the following src/components/index.js:

import React from 'react'
const Container = ( children ) => <div>children</div>
export Container 

In my Next.js app, I created a pages/index.js that contains the following:

import React from 'react'
import Container from 'mylib'

class HomePage extends React.Component 
 render() 
 return <Container>Hello</Container>
 


export default HomePage

mylib is a local npm package which I have installed in my Next.js app using npm i ../mylib. It has a standard webpack config:

const path = require('path')

module.exports = 
 entry: 
 components: './src/components/index.js',
 ,
 output: 
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 libraryTarget: 'commonjs2'
 ,
 mode: "production",
 module: 
 rules: [
 
 test: /.js$/,
 exclude: /node_modules/,
 use: 
 loader: 'babel-loader',
 
 
 ],
 ,
;

and then the package.json points to dist/components.js as the main file.

The following does work:

1. In my Next.js app, replace return <Container>Hello</Container> with return <div>Hello</div> (while keeping the import Container in place)


2. Refresh the page in the server (I'm running Next's dev server)


3. Restore the use of <Container> (the opposite of step 1)


4. Save the file --> hot-reload in the browser with the Container properly displayed (I added a className to be sure)

At this point, if I refresh the browser, I get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

which suggests I made a bad import/export, but I don't know where. And the error only occurs on the server-side.

What did I do wrong?

javascript reactjs next.js

share|improve this question

asked Mar 24 at 11:16

ArnaudArnaud

375520

import React from 'react'
const Container = ( children ) => <div>children</div>
export Container 

import React from 'react'
import Container from 'mylib'

class HomePage extends React.Component 
 render() 
 return <Container>Hello</Container>
 


export default HomePage

const path = require('path')

module.exports = 
 entry: 
 components: './src/components/index.js',
 ,
 output: 
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 libraryTarget: 'commonjs2'
 ,
 mode: "production",
 module: 
 rules: [
 
 test: /.js$/,
 exclude: /node_modules/,
 use: 
 loader: 'babel-loader',
 
 
 ],
 ,
;

share|improve this question

asked Mar 24 at 11:16

ArnaudArnaud

375520

share|improve this question

asked Mar 24 at 11:16

ArnaudArnaud

375520

asked Mar 24 at 11:16

ArnaudArnaud

375520

asked Mar 24 at 11:16

ArnaudArnaud

375520