I have been trying everything I can find online to solve this error. Based on what I have read this module is configured correctly, but still errors. I am using yalc to link to the main project. Using npx rollup -c --bundleConfigAsCjs to compile.
Error
./node_modules/test-wordpress/dist/index.d.ts
Module parse failed: Unexpected token (3:8)
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
| import { sendForm } from "./ContactForm7";
| import { getPage } from "./Wordpress";
> declare const _default: {
| getPage: typeof getPage;
| sendForm: typeof sendForm;
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"jsx": "react",
"module": "esnext",
"sourceMap": true,
"declaration": true,
"outDir": "dist"
},
"include": [
"src"
, "src/index.tsx"
]
}
rollup.config.cjs
import typescript from '#rollup/plugin-typescript';
export default {
input: {
Wordpress: 'src/Wordpress.tsx',
ContactForm7: 'src/ContactForm7.tsx'
},
output: {
dir: 'dist',
format: 'cjs',
sourcemap: true,
},
plugins: [
typescript()
],
external: ['react'],
};
package.json
{
"name": "test-wordpress",
"version": "1.0.2",
"description": "Wordpress test project",
"main": "./dist/index.d.ts",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/test-project/wordpress.git"
},
"author": "Paul Winter",
"license": "ISC",
"bugs": {
"url": "https://github.com/test-project/wordpress/issues"
},
"homepage": "https://github.com/test-project/wordpress#readme",
"devDependencies": {
"#types/node": "^18.11.18",
"rollup": "^3.9.1",
"rollup-plugin-typescript": "^1.0.1"
},
"dependencies": {
"#rollup/plugin-typescript": "^11.0.0",
"axios": "^1.2.2",
"memory-cache": "^0.2.0"
}
}
I want to add tailwind to storybook. So that Stories will render just like it will render on web.
I used create-react-app project-name --template typescript to create the project.
Then to install the tailwind I followed this https://tailwindcss.com/docs/guides/create-react-app instruction from the documentation of tailwind.
Once I finished it I ran the code npm sb init. Which made sure that storybook ran.
Now I need to tell storybook to use tailwindcss for styling. But I have no idea how.
Every other answer I saw tells to edit postcss.config.js files.
But I followed this https://tailwindcss.com/docs/guides/create-react-app documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.
For clarity I will include some configuration file below.
craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
.storybook/preview.js
import "../src/index.css"
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
.storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-create-react-app"
]
}
src/index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
package.json
`{
"name": "memory",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.0.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.14.2",
"#types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.35",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#storybook/addon-actions": "^6.1.11",
"#storybook/addon-essentials": "^6.1.11",
"#storybook/addon-links": "^6.1.11",
"#storybook/node-logger": "^6.1.11",
"#storybook/preset-create-react-app": "^3.1.5",
"#storybook/react": "^6.1.11"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
Storybook recommends using the #storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader):
Add the postCSS addon to your installation
npm i -D #storybook/addon-postcss # or
yarn add -D #storybook/addon-postcss
Create the postcss.config.js in the project root
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Add the plugin to your .storybook/main.js
// .storybook/main.js
module.exports = {
...
addons: [
...
{
name: '#storybook/addon-postcss',
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use #import('./other-styles.css')
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require('postcss'),
},
},
},
],
};
Import your css file in the .storybook/preview.js
// .storybook/preview.js
import '../src/styles.css';
You're almost there.
The missing piece of your config is to add a webpack configuration to apply tailwind to postcss-loader:
const path = require('path')
module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.#(js|jsx|ts|tsx)'
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
include: path.resolve(__dirname, '../'),
})
return config
},
}
TAILWIND STORYBOOK CRA [2022-2023(hopefully)]
package.json
"devDependencies": {
"#storybook/addon-actions": "^6.5.9",
"#storybook/addon-essentials": "^6.5.9",
"#storybook/addon-interactions": "^6.5.9",
"#storybook/addon-links": "^6.5.9",
"#storybook/addon-postcss": "^2.0.0",
"#storybook/builder-webpack5": "^6.5.9",
"#storybook/manager-webpack5": "^6.5.9",
"#storybook/node-logger": "^6.5.9",
"#storybook/preset-create-react-app": "^4.1.2",
"#storybook/react": "^6.5.9",
"#storybook/testing-library": "^0.0.13",
"#typescript-eslint/eslint-plugin": "^5.28.0",
"#typescript-eslint/parser": "^5.28.0",
"autoprefixer": "^10.4.7",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint": "^8.17.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.1",
"webpack": "^5.73.0"
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
.storybook/main.js
module.exports = {
stories: [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
"#storybook/preset-create-react-app",
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: "#storybook/react",
core: {
"builder": "#storybook/builder-webpack5"
}
}
.storybook/preview.js
import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
The answer was right but in the latest CRA I have to config like this:
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
// HERE: OPTIONS
postcssOptions: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
],
include: path.resolve(__dirname, "../"),
});
Similar to ofhouse's answer, but here is a solution if you don't want to have an extra postcss.config.js for only a few lines or if you want use typescript in everything (as the loader doesn't pick up postcss.config.ts)
Add the official postCSS addon
npm i -D #storybook/addon-postcss
yarn add -D #storybook/addon-postcss
Config main.ts & tailwind.config.ts
/* .stories/main.ts */
import postcss from 'postcss';
import * as tailwindcss from '../tailwind.config';
import type { StorybookConfig } from '#storybook/react/types';
export const addons: StorybookConfig['addons'] = [
// other addons,
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: postcss,
postcssOptions: {
plugins: {
tailwindcss, // or you can nest your options entirely here
autoprefixer: {
// autoprefixer options
},
},
},
},
},
},
];
/* tailwind.config.ts */
import type { TailwindConfig } from 'tailwindcss/tailwind-config';
export const theme: TailwindConfig['theme'] = {
// theme options
}
// other options
This problem gave me headaches too. I followed every solution that can be found on StackOverflow and Github.
But I only could "fix it" by running the tailwind-CLI and building the global.css file and importing it to ./storybook/preview.js
here's the cli command used.
npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch
then import it from the output path (-o flag) in the command above.
// ./storybook/preview.js
import './global.css';
...
I've tried all the above answers but unfortunately, I was still getting some weird unknown word error when running the storybook.
This is the only solution that worked for me:
https://github.com/storybookjs/addon-postcss/issues/33#issuecomment-1173042151
When I used ng serve in my Angular project (in to correct place) its show this error in cmd.
The serve command requires to be run in an Angular project, but a project definition could not be found.
I try this also
Angular Cli Error: The serve command requires to be run in an Angular project, but a project definition could not be found
but this also not work for me.
I tried also to delete node-module and reinstall, but not work. When I used npm start it work.
Why? What is the problem?
My angular-cli.json code here
"project": {
"version": "1.0.0-beta.28.3",
"name": "angular-src"
},
"apps": [
{
"root": "src",
"outDir": "../public",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
ng update #angular/cli --migrate-only --from=<WhateverVersionYouAreCurrentlyOn>
e.g.
ng update #angular/cli --migrate-only --from=1.7.3
getting ref from here https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036
Make sure that you are in the project directory in the terminal before
running "ng serve".
Let's say your folder structure is as follows:
|-Documents
|---my_projects
|-----angular_project
Make sure that your terminal is in "angular_project" for example. i.e
username#PC_NAME:~/Documents/my_projects/angular_project$ ng serve
When I push my Next project to GitHub, I get the following error :
You defined 1 build that did not match any source files (please ensure they are NOT defined in .nowignore)
and this how my now.json looks like:
`
{
"version": 2,
"builds": [
{
"src": "packages/web-app/package.json",
"use": "#now/next"
}
],
"build": {
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
}
`
and Package.json file which located on the root folder contains the following :
`
{
"name": "biletiniz",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"bootstrap": "lerna bootstrap",
"dev": "lerna bootstrap && lerna run dev",
"build": "lerna bootstrap && lerna run build",
"start": "lerna bootstrap && lerna run start"
},
"dependencies": {
"lerna": "^3.16.4"
},
"version": "1.0.0",
"author": "LamaDabbeet",
"license": "MIT"
}
`
And this the project tree:
try this in Now.js V2:
{
"version": 2,
"name": "awesome-app",
"builds": [
{
"src": "packages/next-app/package.json",
"use": "#now/next"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/packages/next-app/$1",
"headers": {
"x-request-path": "$1"
}
}
],
"env": {
"SECRET": "dev-key",
"ANOTHER_SECRET": "another-dev-key"
}
}
Where next-app is your next.js app package
I am trying to debug a React Typescript application in VS Code and I can't figure out how to configure the launch.json to get TSX debugging to work.
I am using webpack to bundle everything into one js file
This is my package.json
{
"name": "reactts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"magic": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
}
}
and this is my tsconfig.json file
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
And this is my webpack.config.js file
var path = require("path");
var config = {
entry: ["./src/app.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
I use npm run magic to compile the tsx code into the bundled js file
I'm not using webpack but only the script provided by react create-app (npm start = react-scripts start), and then I launch Chrome Debugger using VS Code debug configuration:
Pointing directly to the source /src of the app where app.tsx and index.ts are located.
React -v 16.8.6
Node -v 10.16.0
{
"type": "chrome",
"request": "launch",
"name": "Debug React Run",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
If ill find a solution for webpack I'll update.
in the launch.json file inside the .vscode put the following
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
Run npm start in VSC terminal, the Brower should load, back in VSC just press F5 and you should be attached and able to debug
see Ref!
I hope this helps