I'm currently working with next#11.1.2 and webpack v5 and got stuck for hours with fixing mp3 loading. I tried several other solutions from stack and GitHub. None of them worked for me.
Type error: Cannot find module 'public/sounds/bighit.mp3' or its corresponding type declarations.
14 |
15 | // Assets
> 16 | import sound_bighit from "public/sounds/bighit.mp3"
| ^
info - Checking validity of types .%
Here is my last configuration for webpack:
const path = require('path')
const SRC = path.resolve(__dirname, 'public/sounds/')
module.exports = {
webpack: (config, { }) => {
config.module.rules.push({
test: /\.mp3$/,
incluse: SRC,
use: {
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'public/sounds/',
publicPath: 'public/sounds/'
}
}
})
// config.module.rules.push({
// test: /\.mp3$/,
// use: {
// loader: 'file-loader',
// },
// })
// config.module.rules.push({
// test: /\.mp3/,
// use: {
// loader: 'url-loader',
// },
// })
return config
}
}
There is no need to import such files. Next.js supports putting the assets in public folder. Remove your custom webpack configuration and then simply do this:
<audio controls src="/sounds/bighit.mp3" />
Refer: Static File Serving
Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).
Also, the error that you were getting was a TypeError, to fix it you can try:
// types/sounds.d.ts
declare module "*.mp3" {
const content: string;
export default content;
}
Refer: Importing Other Assets | TypeScript - webpack
Related
This is the error:
"Build failed!
× ERROR ./media/fonts/handFont3.otf 1:4.
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
# ./index.js 3:0-37
# ../node_modules/preact-cli/lib/lib/entry.js
# multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server"
I'm trying to import pdf into preact component to make it build so I can get the link to the page with pdf file. Here is how:
import pdfFile from '../../media/images/pdfFile.pdf'
<a href={pdfFile} target="_blank"...
It didn't work, so I Googled this two solutions to add in wepback.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(png|svg|jpg|gif|pdf)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
},
]
},
};
and
{
test: /\.(pdf)$/,
use: ['url-loader']
},
I do manually make webpack.config work by this string:
--config webpack.config.js
And file is working, but result is the same. I'm still getting the error. And the same with otf fonts.
Thank you.
I figured out the solution. You can't use webpack config with preact config together.
So I removed webpack config and changed preact one to this:
export default (config, env, helpers, options) => {
const rule = {
test: /\.(otf|pdf)$/,
loader: 'file-loader'
}
config.module.rules.push(rule);
}
so react-dates css worked fine until i moved to css-modules. i tried importing the css file from node modules in index.js files and in the head of the html file but none of them worked.
Any help or suggestion will be greatly appreciated.
This is working perfectly for this problem
In webpack.config.js define a function which checks your file to
decide if it's css module or global; done using getLocalIdent
option.
This is the method that I'm currently using in my setup.
This also requires your files to have some naming convention,
[name].module.css for css modules and [name].css for regular files.
See example below:
// regex to test for modules, loaderUtils is part of webpack dependencies
const cssModuleRegex = new RegExp(/\.module\.(less|css)$/);
const loaderUtils = require("loader-utils");
// inside webpack rules
{
test: /\.(less|css)$/,
use: [
{
loader: CssExtractPlugin.loader,
options: { hot: is_dev, reloadAll: is_dev }
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[local]___[hash:base64:5]',
getLocalIdent: getLocalIdent
}
}
},
"postcss-loader",
"less-loader"
]
}
// this is a copy of the default function, modified slightly to achieve our goal
function getLocalIdent(loaderContext, localIdentName, localName, options) {
// return local name if it's a global css file
if (!cssModuleRegex.test(loaderContext.resourcePath)) {
return localName;
}
if (!options.context) {
// eslint-disable-next-line no-param-reassign
options.context = loaderContext.rootContext;
}
const request = path
.relative(options.context, loaderContext.resourcePath)
.replace(/\\/g, '/');
// eslint-disable-next-line no-param-reassign
options.content = `${options.hashPrefix + request}+${localName}`;
// eslint-disable-next-line no-param-reassign
localIdentName = localIdentName.replace(/\[local\]/gi, localName);
const hash = loaderUtils.interpolateName(
loaderContext,
localIdentName,
options
);
return hash
.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
.replace(/^((-?[0-9])|--)/, '_$1');
}
Source: How to apply global styles with CSS modules in a react app?
My current build process is to build the project with create-react app, then load the unpacked build as an extension. From there, I launch it, but when I do, I get an error in my main.[hash].js:formatted file.
Normally, I'd click on that error to go to the line number, drop a debugger, reload, and then figure out what's causing the problem. However, the file seems to not be source-mapped. I can't step through this code:
{
key: "render",
value: function() {
var e = this
, t = this.state
, n = t.chromeVersion,
/// ... props, etc
, v = this.props.aProp,
, u = this.state.aStateVal,
, _ = Object(H.b)(this.state.anotherVal)
return p.a.createElement("div", {
// etc etc
which should instead look something like this:
render() {
const {
chromeVersion,
// other state values
} = this.state;
const error = this.props.aProp
const display = this.state.aStateVal,
let getStuff = aFunction(
this.state.anotherVal
);
return (
<div /...
// etc etc
my webpack.config.js at the base of the project looks like this:
const webpack = require("webpack");
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = "development";
}
module.exports = {
entry: `${__dirname}/src/index.js`,
output: {
path: `${__dirname}/../build`,
filename: "background.js"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
query: {
babelrc: false,
presets: [require.resolve("babel-preset-react-app")]
}
}
]
},
plugins: [
// there used to be an uglify here, but I've removed it
],
devtool: 'source-map'
};
I run my build with the following commands:
GENERATE_SOURCEMAP=true NODE_ENV=development react-scripts build
&& webpack --config path/to/webpack.config.js
&& node /path/to/prepareManifestForExtension.js // Needed for chrome app
What am I missing to be able to debug my code when running my chrome app? How do I get error messages that point to the source mapped line?
Building a server side react app and while using Webpack I am having issues with Style-Loader.
I am using version "^0.23.1" and when running a script to bundle and build there is an issue from Style-Loader.
The issue is window is not defined
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
Has anyone run into this issue? After looking through Stack and the Github issues for style-loader I am not finding any solution.
Here is my webpack file:
const path = require('path');
const webpack = require('webpack');
module.exports = {
// webpack to use node
target: 'node',
entry: './src/index.js',
output: {
filename: 'client-build.js',
path: path.resolve(__dirname, 'build/public'),
publicPath: '/build/public'
},
module: {
rules: [
{
test: /\.js$|\.jsx$/,
loader: 'babel-loader',
exclude: '/node_modules/',
options: {
presets: [
'#babel/preset-react'
]
}
},
{
test: /\.(s*)css$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/,
loader: 'file-loader',
query: {
name: 'assets/img/[name].[ext]'
},
},
]
},
plugins: [
new webpack.ProvidePlugin({
"React": "react",
}),
],
}
If there is anything else you need to see I can post it.
style-loader tries to inject styles into the head of the website (window / document), which will be non-existent on your server on render / execution.
You need to remove this loader from your server-config and replace it with something else (e.g. ExtractTextPlugin or MiniCSSExtractplugin, depending on your webpack version)
I think your problem is, that there is no window object when running js code on a node server. Which also makes sense, as your server has no window where your code is rendered. You can use the global object for global references instead, see this related post here: Does node.js have equivalent to window object in browser
If I got it correctly I think you are trying to use style-loader for bundling server side code.If it is the case try doing this instead of doing this:
loader: ['style-loader', 'css-loader', 'sass-loader']
Try this:
loader: ['css-loader/locals', 'sass-loader']
Style loader is not supposed to be used on the server side code. So we provide kind of a null-loader instead of css-loader and remove style loader. This should do the trick I guess.
I had a this problem where I needed some themes and styles from a component-library which in turn used webpack and style-loader.
My project was pure script and is supposed to generate some files and therefore had no browser. It would not compile at all since style-loader(and some other libs) tried to inject styles in the tag.
I ended up mocking window and document so that the imported project could compile.
NOTE that this worked in my case where I only needed a minor part of my component-library, if you use this in a more complicated project there will probably be some weird bugs. But it might help someone figure out a similar problem
Run this before you do the actual import
Since it is the actual import that causes the problem you need to do the hack before importing.
import * as Hack from './hack/StyleLoaderHack';
Hack.runHack();
...
import {X} from 'your library'
StyleLoaderHack.js
class HackStyle {
position;
constructor() {
this.position = [];
}
}
class HackElement {
className;
childNodes;
style;
constructor(tag) {
this.className = tag;
this.attributes = [];
this.childNodes = [];
this.style = new HackStyle();
}
appendChild = (child) => {
let append;
if (!(child instanceof HackElement)) {
append = new HackElement(child);
} else {
append = child;
}
this.childNodes.push(append);
return append;
};
insertBefore = (newChild, refChild) => {
let insert;
if (!(newChild instanceof HackElement)) {
insert = new HackElement(newChild);
} else {
insert = child;
}
this.childNodes.push(insert);
};
setAttribute = (qualifiedName, value) => {
// sketchy but works
this.attributes.push(qualifiedName);
this.attributes.push(value);
};
}
class HackDocument {
head;
constructor() {
this.head = new HackElement("head");
}
createElement = (tagName) => {
const element = new HackElement(tagName);
return element;
};
querySelector = (target) => {
const node = new HackElement(target);
return node;
};
querySelectorAll = (target) => {
if (target === "[data-emotion-css]") {
return [];
}
const node = new HackElement(target);
return [node];
};
createTextNode = (data) => {
return new HackElement(data);
};
}
/**
* Adds some function to global which is needed to load style-loader, emotion, create-emotion and react-table-hoc-fixed-columns.
*/
export const runHack = () => {
global.window = {};
const hackDocument = new HackDocument();
global.document = hackDocument;
};
I've built a website with Gatsby.js (static website generator with React) and am trying to add storybook to it.
I added a custom webpack config to storybook (following the instruction at https://storybook.js.org/configurations/custom-webpack-config/) to load sass and sass-resources, but can't make it work.
Followings are the configurations. I have installed all of the "style-loader", "css-loader", "sass-loader", "sass-resources-loader" as well as "node-sass" for "storybook/react" in addition to those originally added to "gatsby" and "gatsby-plugin-sass" as dependencies.
It will be great if somebody kindly advise. Thank you very much for your help in advance.
structure
root - .storybook - addon.js
- config.js
- webpack.config.js
- src - components - Component_1 - Component_1.js
- Component_1.scss
- Component_1.stories.js
- ...
- styles - _variables.scss
- mixins - _mixin_1.scs
- ...
- ...
- ...
webpack.config.js (root/.storybook/webpack.config.js)
const path = require("path");
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loaders: [
"style-loader",
"css-loader",
"sass-loader",
{
loader: "sass-resources-loader",
options: {
resources: [
"src/styles/_variables.scss",
"src/styles/mixins/**/*.scss"
]
},
},
],
include: path.resolve(__dirname, "../")
}
]
}
};
component_1.stories.js
import React from "react";
import { storiesOf } from "#storybook/react";
import Component_1 from "./Component_1";
storiesOf("Component_1", module)
.addDecorator(story => (
<div style={{backgroundColor: $color-primary}}>
{story()}
</div>
))
.add("default", () => (
<Component_1>
This is Component 1!
</Component_1>
));
error message (shown on storybook app)
$color is not defined
ReferenceError: $grey is not defined
at http://localhost:6006/static/preview.bundle.js:80090:33
at http://localhost:6006/static/preview.bundle.js:57555:14
at http://localhost:6006/static/preview.bundle.js:57556:16
at WrapStory.render(http://localhost:6006/static/preview.bundle.js:61197:14)
at http://localhost:6006/static/preview.bundle.js:44767:21
at measureLifeCyclePerf (http://localhost:6006/static/preview.bundle.js:44047:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:6006/static/preview.bundle.js:44766:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:6006/static/preview.bundle.js:44793:32)
at ReactCompositeComponentWrapper.performInitialMount (http://localhost:6006/static/preview.bundle.js:44333:30)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:6006/static/preview.bundle.js:44229:21)
In this case, sass variable "$color-primary" is defined in "src/styles/_variables.scss". I want to use it to style the Component_1 shown in the storybook app.
I tried importing "_variables.scss" expressly to "Component_1.stories.js" and failed again (Skiped "sass-resources-loader", just used "sass-loader").
Thank you for your advices.
[edit]
In addition to above, my storybook config file is as follow.
config.js (root/.storybook/config.js)
import { configure, addDecorator } from "#storybook/react";
// automatically import all files ending in *.stories.js
const req = require.context('../src/components', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
There is a :export property for sharing variables. You can refer following link for sharing variables between sass and JavaScript.
https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
Try to add the path to your variables in the storybook config file
import "../src/styles/_variables.scss";