Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Static directory with source directory override. #3416

Closed
1 task done
Kyle-Mendes opened this issue Dec 7, 2017 · 4 comments
Closed
1 task done

Static directory with source directory override. #3416

Kyle-Mendes opened this issue Dec 7, 2017 · 4 comments

Comments

@Kyle-Mendes
Copy link

I have overwritten next to use src for the content of my application and am using express to serve my application.

.
├── node_modules
├── package.json
├── server.js
├── src
│   ├── components
│   ├── next.config.js
│   ├── pages
│   ├── static (dynamic from webpack)
│   └── styles
└── yarn.lock

// next.config.js
const path = require('path');

const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
	webpack: (config) => {
		config.plugins.push(new ExtractTextPlugin({ // bundle all CSS for static export
			filename  : 'static/styles/bundle.css', //<--- PROBLEM LINE
			allChunks : true,
		}));

		config.module.rules.push(
			{
				test    : /(\.scss|\.css)$/,
				loader  : 'emit-file-loader',
				options : {
					name: './dist/[path][name].[ext]',
				},
			},
			{
				test   : /(\.scss|\.css)$/,
				loader : ExtractTextPlugin.extract({
					fallback : 'style-loader',
					use      : [
						{
							loader  : 'css-loader',
							options : {
								modules        : true,
								sourceMap      : true,
								importLoaders  : 1,
								localIdentName : '[name]__[local]___[hash:base64:5]',
							},
						},
						{
							loader  : 'postcss-loader',
							options : {
								plugins: [autoprefixer],
							},
						},
						{
							loader  : 'sass-loader',
							options : {
								includePaths: [path.resolve(__dirname, './')], //eslint-disable-line
							},
						},
					],
				}),
			});

		return config;
	},
};
// server.js
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const dir = './src';

const app = next({ dev, dir });

What happens:

Running yarn dev === NODE_ENV=dev node server.js

  • ./src/static/styles/bundle.css is created and refreshed on file changes
  • next properly references the /static directory in the head so my styles appear

Runing yarn build === next build src && yarn start === NODE_ENV=production node server.js

  • pages / components / JS is bundled into ./src/.next
  • server.js correctly loads JS resources from .next directory.
  • ./src/.next/static is created with the bundle.css
  • **head is trying to resolve /static to ./src/static instead of ./next/static

What I've tried

I've tried everything under the sun for filename in next.config.js and I cannot seem to get it to drop the static directory into ./src when running yarn build. It either is nowhere (presumably in relative path in the build process, deep in my file system) or is in .next which is not referenced in <head>

Expected Behavior

I think that static should get compiled to .next and used there. It would be a much cleaner solution. However, I get that sometimes static will be very large, (due to images and the like) so that might not be the best solution. Therefore, any help getting static to populate when using a src override with build would be amazing.

  • I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce (for bugs)

  1. See Above

Outcome

If I'm able to get this fixed, I can update the external-css example (or make a new css-module example that will help the community have a non-js-in-css option that is modern and scalable.

Your Environment

Tech Version
next 4.14
node 8
OS osx
browser chrome
etc
@arunoda
Copy link
Contributor

arunoda commented Dec 7, 2017

The core of this is we don't yet support most of the webpack loaders and ExtractTextPlugin. We know about this issue and working on a solution right now.

@arunoda arunoda closed this as completed Dec 7, 2017
@Kyle-Mendes
Copy link
Author

@arunoda

Is there an issue I can follow?

Also, could this perhaps be helped by having next surface an ENV variable like build_directory so we could use that to construct the path in our next config file?

For now it seems like I'll have to run dev and cancel the process to get static populated

@arunoda
Copy link
Contributor

arunoda commented Dec 7, 2017

We'll update the PR when it's ready for early beta.
There are many related issues like this. Better to stay with the canary branch for more.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 8, 2018
@timneutkens
Copy link
Member

Posted #8451

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@arunoda @timneutkens @Kyle-Mendes